cli-jaw 2.2.4 → 2.2.5

package/public/js/main.ts

@@ -538,14 +538,17 @@ async function bootstrap(): Promise<void> {
     await initI18n();
     const langSel = document.getElementById('langSelect') as HTMLSelectElement | null;
     if (langSel) langSel.value = getLang();
-    await loadCliRegistry();
-    bindPerCliControlEvents();
     initHelpDialog();
     initChatSearch();
     initMediaLightbox();
     document.getElementById('chatSearchTrigger')?.addEventListener('click', toggleChatSearch);
     initAttentionBadge();
+    // Connect early (devlog 260705_frontend_perf H5): channel-up drives
+    // loadMessages(), which only needs i18n + the badge/help listeners above —
+    // the CLI-registry fetch below used to serially delay first history paint.
     connect();
+    await loadCliRegistry();
+    bindPerCliControlEvents();
     initDragDrop();
     initAutoResize();
     await loadCommands();
@@ -566,8 +569,16 @@ async function bootstrap(): Promise<void> {
     initGestures();
     try { sessionStorage.removeItem(STALE_BUNDLE_RELOAD_KEY); } catch {}
 
-    // Phase 127-F2: prewarm Mermaid at idle so first diagram renders fast
-    prewarmMermaid();
+    // Phase 127-F2: prewarm Mermaid at idle so first diagram renders fast.
+    // 260705_frontend_perf M6: check AFTER history has had a chance to load
+    // (channel-up → loadMessages is async) and only prewarm when the DOM
+    // actually contains a diagram candidate — otherwise skip the chunk fetch.
+    // renderMermaidBlocks still lazy-loads on demand if a diagram streams in.
+    setTimeout(() => {
+        if (document.querySelector('.mermaid-pending, [data-mermaid-code-raw], .diagram-widget-pending')) {
+            prewarmMermaid();
+        }
+    }, 3000);
 
     // Register Service Worker (production only — Vite HMR handles dev; skip embedded dashboard preview iframes)
     if ('serviceWorker' in navigator && !import.meta.env.DEV && !isEmbeddedPreviewFrame()) {

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

@@ -105,10 +105,66 @@ function isTextInputElement(element: Element): element is HTMLInputElement {
     return ['text', 'search', 'url', 'tel', 'email', 'password'].includes(element.type);
 }
 
+function editableTargetFromElement(element: Element | null): HTMLInputElement | HTMLTextAreaElement | HTMLElement | null {
+    if (!element) return null;
+    if (element instanceof HTMLTextAreaElement) return element;
+    if (isTextInputElement(element)) return element;
+    const editable = element.closest('[contenteditable="true"]');
+    return editable instanceof HTMLElement ? editable : null;
+}
+
+function editableTargetAcceptsInput(target: HTMLInputElement | HTMLTextAreaElement | HTMLElement): boolean {
+    if (target instanceof HTMLTextAreaElement || target instanceof HTMLInputElement) {
+        return !target.disabled && !target.readOnly;
+    }
+    return target.isContentEditable;
+}
+
+function isVisibleEditableTarget(target: HTMLInputElement | HTMLTextAreaElement | HTMLElement): boolean {
+    if (!editableTargetAcceptsInput(target)) return false;
+    if (target === document.activeElement) return true;
+    const style = window.getComputedStyle(target);
+    if (style.display === 'none' || style.visibility === 'hidden' || style.visibility === 'collapse') return false;
+    const rect = target.getBoundingClientRect();
+    return rect.width > 0 && rect.height > 0;
+}
+
+function findPreviewInsertTarget(): HTMLInputElement | HTMLTextAreaElement | HTMLElement | null {
+    const activeTarget = editableTargetFromElement(document.activeElement);
+    if (activeTarget && isVisibleEditableTarget(activeTarget)) return activeTarget;
+
+    const selectors = [
+        '#chatInput',
+        'textarea.chat-input',
+        'textarea[data-chat-input="true"]',
+        'textarea[aria-label*="chat" i]',
+        'textarea[placeholder*="message" i]',
+        'textarea[placeholder*="메시지" i]',
+        'textarea[placeholder*="입력" i]',
+        'textarea',
+        'input[type="text"]',
+        'input[type="search"]',
+        'input:not([type])',
+        '[contenteditable="true"]',
+    ];
+    const seen = new Set<Element>();
+    for (const selector of selectors) {
+        for (const element of document.querySelectorAll(selector)) {
+            if (seen.has(element)) continue;
+            seen.add(element);
+            const target = editableTargetFromElement(element);
+            if (target && isVisibleEditableTarget(target)) return target;
+        }
+    }
+    return null;
+}
+
 function insertIntoEditable(target: Element, text: string): boolean {
     if (target instanceof HTMLTextAreaElement || isTextInputElement(target)) {
-        const start = target.selectionStart ?? target.value.length;
-        const end = target.selectionEnd ?? start;
+        if (!editableTargetAcceptsInput(target)) return false;
+        const hasFocus = document.activeElement === target;
+        const start = hasFocus ? (target.selectionStart ?? target.value.length) : target.value.length;
+        const end = hasFocus ? (target.selectionEnd ?? start) : start;
         target.setRangeText(text, start, end, 'end');
         target.dispatchEvent(new InputEvent('input', { bubbles: true, inputType: 'insertText', data: text }));
         target.focus();
@@ -116,17 +172,25 @@ function insertIntoEditable(target: Element, text: string): boolean {
     }
     const editable = target.closest('[contenteditable="true"]');
     if (!(editable instanceof HTMLElement)) return false;
+    if (!editableTargetAcceptsInput(editable)) return false;
     const selection = window.getSelection();
-    if (!selection || selection.rangeCount === 0) return false;
-    const range = selection.getRangeAt(0);
-    if (!editable.contains(range.commonAncestorContainer)) return false;
+    let range: Range | null = null;
+    if (selection && selection.rangeCount > 0) {
+        const selectedRange = selection.getRangeAt(0);
+        if (editable.contains(selectedRange.commonAncestorContainer)) range = selectedRange;
+    }
+    if (!range) {
+        range = document.createRange();
+        range.selectNodeContents(editable);
+        range.collapse(false);
+    }
     range.deleteContents();
     const node = document.createTextNode(text);
     range.insertNode(node);
     range.setStartAfter(node);
     range.setEndAfter(node);
-    selection.removeAllRanges();
-    selection.addRange(range);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
     editable.dispatchEvent(new InputEvent('input', { bubbles: true, inputType: 'insertText', data: text }));
     editable.focus();
     return true;
@@ -150,8 +214,8 @@ export function ensurePreviewInsertTextListener(): void {
             reply(false, 'invalid insert request');
             return;
         }
-        const active = document.activeElement;
-        if (!active || !insertIntoEditable(active, text)) {
+        const target = findPreviewInsertTarget();
+        if (!target || !insertIntoEditable(target, text)) {
             reply(false, 'no editable target');
             return;
         }

package/public/js/render/chart-json.ts

@@ -1,3 +1,5 @@
+import { escapeHtml } from './html.js';
+
 type ChartType = 'bar' | 'line' | 'pie';
 
 export type ChartJsonSpec = {
@@ -17,11 +19,6 @@ function escapeAttr(value: string): string {
     return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
 
-function escapeHtml(value: string): string {
-    return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-}
-
 function clampText(value: unknown, max: number): string {
     const text = typeof value === 'string' ? value.trim() : '';
     return text.length > max ? `${text.slice(0, max - 1)}…` : text;

package/public/js/render/compose-block.ts

@@ -1,3 +1,5 @@
+import { escapeHtml } from './html.js';
+
 type ComposeKind = 'email' | 'message' | 'document' | 'other';
 
 type ComposeVariant = {
@@ -30,11 +32,6 @@ function escapeAttr(value: string): string {
     return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
 
-function escapeHtml(value: string): string {
-    return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-}
-
 function asText(value: unknown, max: number): string {
     const text = typeof value === 'string' ? value.trim() : '';
     return text.length > max ? text.slice(0, max) : text;

package/public/js/render/dataframe.ts

@@ -1,3 +1,5 @@
+import { escapeHtml } from './html.js';
+
 type DataframeType = 'string' | 'number' | 'boolean' | 'date' | 'json';
 
 export type DataframeSpec = {
@@ -30,11 +32,6 @@ function escapeAttr(value: string): string {
     return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
 
-function escapeHtml(value: string): string {
-    return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-}
-
 function clampText(value: unknown, max = MAX_CELL): string {
     let text = '';
     if (value === null || value === undefined) text = '';

package/public/js/render/diff-viewer.ts

@@ -1,11 +1,8 @@
+import { escapeHtml } from './html.js';
+
 const DIFF_PATTERN = /^---\s+\S+\n\+\+\+\s+\S+\n@@\s/m;
 const MAX_LINES = 800;
 
-function escapeHtml(value: string): string {
-    return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-}
-
 export function isUnifiedDiff(text: string): boolean {
     return DIFF_PATTERN.test(text.trim());
 }

package/public/js/render/link-preview.ts

@@ -1,4 +1,5 @@
 import { API_BASE } from '../api.js';
+import { escapeHtml } from './html.js';
 
 type LinkPreviewData = {
     title?: string;
@@ -25,11 +26,6 @@ function escapeAttr(value: string): string {
     return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
 
-function escapeHtml(value: string): string {
-    return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-}
-
 function isPrivateHost(hostname: string): boolean {
     const host = hostname.replace(/^\[|\]$/g, '').toLowerCase();
     return host === 'localhost'

package/public/js/render/markdown.ts

@@ -47,6 +47,20 @@ function renderCodeBlock(text: string, lang?: string): string {
     return `<div class="code-block"><div class="code-header"><span class="code-lang">${langDisplay}</span><button class="code-copy-btn" type="button" aria-label="${escapeHtml(copyLabel)}">${escapeHtml(copyLabel)}</button></div><pre><code class="hljs${lang ? ` language-${escapeHtml(lang)}` : ''}">${highlighted}</code></pre></div>`;
 }
 
+function parseDiagramFileWidgetId(text: string): string {
+    const trimmed = text.trim();
+    if (!trimmed) return '';
+    if (trimmed.startsWith('{')) {
+        try {
+            const parsed = JSON.parse(trimmed) as { id?: unknown };
+            return typeof parsed.id === 'string' ? parsed.id.trim() : '';
+        } catch {
+            return '';
+        }
+    }
+    return trimmed;
+}
+
 function ensureMarked(): boolean {
     if (markedReady) return true;
 
@@ -74,6 +88,14 @@ function ensureMarked(): boolean {
                 <div class="diagram-spinner"></div>
             </div>`;
         }
+        if (normalizedLang === 'diagram-file') {
+            const widgetId = parseDiagramFileWidgetId(text);
+            if (!widgetId) return renderCodeBlock(text, lang);
+            return `<div class="diagram-widget-pending" data-widget-id="${escapeHtml(widgetId)}"
+                role="status" aria-label="Interactive widget loading">
+                <div class="diagram-spinner"></div>
+            </div>`;
+        }
         if (normalizedLang === 'elicitation' || normalizedLang === 'choice-buttons') {
             if (renderContextIsStreaming) return renderCodeBlock(text, lang);
             return renderElicitationPlaceholder(text, normalizedLang);

package/public/js/render/post-render.ts

@@ -20,10 +20,14 @@ export function schedulePostRender(): void {
         postRenderTimer = null;
         postRenderRAF = requestAnimationFrame(() => {
             postRenderRAF = null;
-            renderMermaidBlocks();
-            rehighlightAll();
-            bindDiagramZoom();
             const msgContainer = document.getElementById('chatMessages');
+            // Cheap guards (devlog 260705_frontend_perf M1): these three walk
+            // the whole container; skip when no candidate nodes exist. The
+            // hydrate* calls below stay unconditional — each is already a
+            // scoped selector scan and their call shape is a renderer contract.
+            if (!msgContainer || msgContainer.querySelector('.mermaid-pending, [data-mermaid-code-raw]')) renderMermaidBlocks();
+            if (!msgContainer || msgContainer.querySelector('.code-block pre code, .code-block-wrapper pre code')) rehighlightAll();
+            if (!msgContainer || msgContainer.querySelector('.diagram-zoom-btn, .mermaid-zoom-btn')) bindDiagramZoom();
             if (msgContainer) {
                 hydrateElicitationBlocks(msgContainer);
                 hydrateSearchResultsBlocks(msgContainer);

package/public/js/render/sanitize.ts

@@ -10,6 +10,11 @@ function purifier() {
 // and external url() references (resource loading / cookie exfiltration).
 // Internal fragment refs like url(#gradient) are preserved via negative lookahead.
 function sanitizeCssInStyleTags(html: string): string {
+    // Fast path: no <style> tag → nothing to strip. Avoids a full div
+    // innerHTML parse + serialize round-trip on every markdown render
+    // (devlog 260705_frontend_perf M2). False positives (literal "<style"
+    // in text) just take the slow path harmlessly.
+    if (!/<style/i.test(html)) return html;
     const div = document.createElement('div');
     div.innerHTML = html;
     for (const style of div.querySelectorAll('style')) {
@@ -59,6 +64,7 @@ export function sanitizeHtml(html: string): string {
                    'data-compose-block-kind', 'data-compose-block-spec', 'data-compose-block-hydrated',
                    'data-dataframe-kind', 'data-dataframe-spec', 'data-dataframe-hydrated',
                    'data-chart-json-kind', 'data-chart-json-spec', 'data-chart-json-hydrated',
+                   'data-widget-id',
                    'href', 'xlink:href', 'dominant-baseline'],
     });
     return sanitizeCssInStyleTags(clean);

package/public/js/render/search-results.ts

@@ -1,3 +1,5 @@
+import { escapeHtml } from './html.js';
+
 type RawSearchResult = {
     title?: unknown;
     url?: unknown;
@@ -28,11 +30,6 @@ function escapeAttr(value: string): string {
     return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
 
-function escapeHtml(value: string): string {
-    return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-}
-
 function clampText(value: unknown, max = MAX_TEXT): string {
     const text = typeof value === 'string' ? value.trim().replace(/\s+/g, ' ') : '';
     return text.length > max ? `${text.slice(0, max - 1)}…` : text;

package/public/js/streaming-render.ts

@@ -18,6 +18,17 @@ export interface StreamState {
 const FULL_RENDER_THRESHOLD = 2000;
 const THROTTLE_MS = 80;  // ~12fps — was 32ms (30fps), reduced to avoid blocking input
 
+// Adaptive throttle (devlog 260705_frontend_perf H4): each live render re-parses
+// the FULL accumulated text (marked + sanitize), so per-render cost grows with
+// message length. Stretch the interval as the text grows to keep total work
+// near-linear: 80ms under 2k chars, up to 400ms past ~50k chars.
+const THROTTLE_MAX_MS = 400;
+function throttleMsFor(textLength: number): number {
+    if (textLength <= FULL_RENDER_THRESHOLD) return THROTTLE_MS;
+    const scaled = THROTTLE_MS * (textLength / FULL_RENDER_THRESHOLD);
+    return Math.min(THROTTLE_MAX_MS, Math.round(scaled));
+}
+
 export function createStreamRenderer(el: HTMLElement): StreamState {
     return {
         chunks: [], fullText: '', textDirty: false,
@@ -57,7 +68,7 @@ export function appendChunk(ss: StreamState, chunk: string): void {
             if (ss.isFinalized) return;
             const now = performance.now();
             const text = getFullText(ss);
-            if (text.length < FULL_RENDER_THRESHOLD || now - ss.lastRenderTime > THROTTLE_MS) {
+            if (text.length < FULL_RENDER_THRESHOLD || now - ss.lastRenderTime > throttleMsFor(text.length)) {
                 ss.element.innerHTML = renderMarkdown(text, true) +
                     '<span class="stream-cursor" aria-hidden="true"></span>';
                 ss.lastRenderTime = now;

package/public/js/ui.ts

@@ -494,11 +494,14 @@ export function finalizeAgent(text: string, toolLog?: ToolLogEntry[]): void {
             const div = state.currentAgentDiv;
             clearMermaidTransientState(div);
             div.querySelectorAll('.diagram-widget').forEach(widget => {
-                const encoded = (widget as HTMLElement).dataset['widgetHtml'];
-                if (!encoded) return;
+                const widgetEl = widget as HTMLElement;
+                const encoded = widgetEl.dataset['widgetHtml'];
+                const widgetId = widgetEl.dataset['widgetId'];
+                if (!encoded && !widgetId) return;
                 const pending = document.createElement('div');
                 pending.className = 'diagram-widget-pending';
-                pending.dataset['diagramHtml'] = encoded;
+                if (widgetId) pending.dataset['widgetId'] = widgetId;
+                else if (encoded) pending.dataset['diagramHtml'] = encoded;
                 widget.replaceWith(pending);
             });
             if (durableToolLogJson) {

package/public/js/ws.ts

@@ -35,10 +35,10 @@ function positionShark(roadmap: HTMLElement, shark: HTMLElement, phase: string):
         const dotRect = dot.getBoundingClientRect();
         const nextRect = nextDot.getBoundingClientRect();
         const mid = (dotRect.right + nextRect.left) / 2;
-        shark.style.left = (mid - barRect.left - sharkW / 2) + 'px';
+        shark.style.transform = `translateX(${mid - barRect.left - sharkW / 2}px)`;
     } else {
         const dotRect = dot.getBoundingClientRect();
-        shark.style.left = (dotRect.left - barRect.left + dotRect.width / 2 - sharkW / 2) + 'px';
+        shark.style.transform = `translateX(${dotRect.left - barRect.left + dotRect.width / 2 - sharkW / 2}px)`;
     }
 }
 
@@ -83,6 +83,7 @@ interface WsMessage {
     title?: string;
     isEmployee?: boolean;
     fromQueue?: boolean;
+    external?: boolean;
     reason?: HeartbeatRuntimeState['reason'];
     policy?: HeartbeatRuntimeState['policy'];
     jobId?: string;
@@ -904,6 +905,14 @@ function connectLegacyWebSocket(): void {
 }
 
 function wireEventChannel(): void {
+    subscribe('widget', 'widget_updated', (data) => {
+        const chatId = data['chatId'];
+        const widgetId = data['widgetId'];
+        if (typeof chatId !== 'string' || typeof widgetId !== 'string') return;
+        import('./diagram/iframe-renderer.js')
+            .then(m => m.refreshFileWidget(chatId, widgetId))
+            .catch(err => console.warn('[widget] refresh failed:', (err as Error).message));
+    });
     subscribe('*', null, (data) => {
         const msg = { ...data, type: data['event'] } as unknown as WsMessage;
         handleServerEvent(msg);
@@ -914,28 +923,12 @@ function wireEventChannel(): void {
 }
 
 function handleServerEvent(msg: WsMessage): void {
-    if (msg.type === 'agent_status') {
-        if (!msg.running && isRecentSteer()) return;
-        if (msg.running && isRecentSteer()) clearSteer();
-        if (msg.running !== undefined) {
-            setStatus(msg.running ? 'running' : 'idle');
-        } else {
-            setStatus(msg.status || 'idle');
-        }
-        // Track per-agent phase for badge rendering
-        if (msg.agentId && msg.phase) {
-            agentPhaseState[msg.agentId] = { phase: msg.phase, phaseLabel: msg.phaseLabel || '' };
-            import('./features/employees.js').then(m => m.loadEmployees());
-        }
-    } else if (msg.type === 'bgtask_update') {
-        import('./features/bgtask-badge.js').then(m => m.applyBgtaskUpdate(msg)).catch(() => {});
-    } else if (msg.type === 'queue_update') {
-        updateQueueBadge(msg.pending || 0);
-        if (Array.isArray(msg.queued)) {
-            renderPendingQueue(msg.queued);
-        }
-        syncOrchestrateSnapshot('queue_update').catch(() => { /* snapshot not critical — UI recovers on next event */ });
-    } else if (msg.type === 'agent_tool') {
+    // Hot-path first (devlog 260705_frontend_perf M5): agent_tool/agent_output
+    // arrive many times per second during streaming — they head the chain so
+    // each event pays 1-2 string compares instead of walking cold branches.
+    // Textual order agent_tool < agent_output < agent_retry is a test contract
+    // (web-sse-replay-idempotency slices between those markers).
+    if (msg.type === 'agent_tool') {
         if (isRecentSteer()) return;
         const toolRunId = typeof msg.traceRunId === 'string' && msg.traceRunId ? msg.traceRunId : null;
         const toolSeq = positiveSeq(msg.traceSeq);
@@ -999,6 +992,27 @@ function handleServerEvent(msg: WsMessage): void {
             liveAppliedTextLen = msg.textLen;
         }
         appendAgentText(outputText);
+    } else if (msg.type === 'agent_status') {
+        if (!msg.running && isRecentSteer()) return;
+        if (msg.running && isRecentSteer()) clearSteer();
+        if (msg.running !== undefined) {
+            setStatus(msg.running ? 'running' : 'idle');
+        } else {
+            setStatus(msg.status || 'idle');
+        }
+        // Track per-agent phase for badge rendering
+        if (msg.agentId && msg.phase) {
+            agentPhaseState[msg.agentId] = { phase: msg.phase, phaseLabel: msg.phaseLabel || '' };
+            import('./features/employees.js').then(m => m.loadEmployees());
+        }
+    } else if (msg.type === 'bgtask_update') {
+        import('./features/bgtask-badge.js').then(m => m.applyBgtaskUpdate(msg)).catch(() => {});
+    } else if (msg.type === 'queue_update') {
+        updateQueueBadge(msg.pending || 0);
+        if (Array.isArray(msg.queued)) {
+            renderPendingQueue(msg.queued);
+        }
+        syncOrchestrateSnapshot('queue_update').catch(() => { /* snapshot not critical — UI recovers on next event */ });
     } else if (msg.type === 'agent_retry') {
         const retryDelay = Number(msg.delay ?? 0);
         const retryReasonValue = (msg as WsMessage & { reason?: unknown }).reason;
@@ -1074,7 +1088,7 @@ function handleServerEvent(msg: WsMessage): void {
         markRunFinalized(null); // killed run — drop its replayed stream too
         finalizeAgent('');
         setStatus('steering');
-    } else if (msg.type === 'new_message' && (msg.source === 'telegram' || msg.source === 'discord' || msg.source === 'bgtask' || msg.fromQueue === true)) {
+    } else if (msg.type === 'new_message' && (msg.source === 'telegram' || msg.source === 'discord' || msg.source === 'bgtask' || msg.source === 'cli' || msg.source === 'goal' || msg.external === true || msg.fromQueue === true)) {
         const newMessageRole = msg.role === 'assistant' ? 'agent' : (msg.role || 'user');
         const newMessageContent = msg.content || '';
         const newMessageCli = msg.cli;

package/public/locales/en.json

@@ -801,5 +801,6 @@
     "help.keyboardShortcuts.subcmd.1": "/help — Show full command list",
     "help.keyboardShortcuts.subcmd.2": "/help <command> — Show detailed help for a specific command",
     "help.keyboardShortcuts.subcmd.3": "/commands — Open command palette (alias: /cmd)",
-    "bgtask.title": "Background"
+    "bgtask.title": "Background",
+    "tg.elicitationExpired": "Selection expired. Please reply with text."
 }

package/public/locales/ja.json

@@ -790,5 +790,6 @@
     "help.keyboardShortcuts.subcmd.1": "/help — 全コマンド一覧を表示します",
     "help.keyboardShortcuts.subcmd.2": "/help <command> — 特定コマンドの詳細ヘルプを表示します",
     "help.keyboardShortcuts.subcmd.3": "/commands — コマンドパレットを開きます（エイリアス: /cmd）",
-    "bgtask.title": "バックグラウンド"
+    "bgtask.title": "バックグラウンド",
+    "tg.elicitationExpired": "選択セッションの有効期限が切れました。テキストで返信してください。"
 }

package/public/locales/ko.json

@@ -801,5 +801,6 @@
     "help.keyboardShortcuts.subcmd.1": "/help — 전체 명령어 목록을 표시합니다",
     "help.keyboardShortcuts.subcmd.2": "/help <command> — 특정 명령어의 상세 도움말을 표시합니다",
     "help.keyboardShortcuts.subcmd.3": "/commands — 명령 팔레트를 엽니다 (별칭: /cmd)",
-    "bgtask.title": "백그라운드"
+    "bgtask.title": "백그라운드",
+    "tg.elicitationExpired": "선택 세션이 만료되었습니다. 텍스트로 답해주세요."
 }

package/public/locales/zh.json

@@ -790,5 +790,6 @@
     "help.keyboardShortcuts.subcmd.1": "/help — 显示完整命令列表",
     "help.keyboardShortcuts.subcmd.2": "/help <command> — 显示特定命令的详细帮助",
     "help.keyboardShortcuts.subcmd.3": "/commands — 打开命令面板（别名: /cmd）",
-    "bgtask.title": "后台任务"
+    "bgtask.title": "后台任务",
+    "tg.elicitationExpired": "选择会话已过期，请用文字回复。"
 }

package/public/manager/src/InstancePreview.tsx

@@ -18,10 +18,20 @@ type InstancePreviewProps = {
     onOpenDocFromPreview?: (absolutePath: string) => void;
     onPreviewDroppedFiles?: (files: File[]) => void;
     docPanelCapable?: boolean;
+    previewInsertTextRequest?: PreviewInsertTextRequest | null;
+    onPreviewInsertTextResult?: (id: string, result: PreviewInsertTextResult) => void;
 };
 
 const PREVIEW_IFRAME_SANDBOX = 'allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads';
 
+export type PreviewInsertTextRequest = {
+    id: string;
+    port: number;
+    text: string;
+};
+
+export type PreviewInsertTextResult = { ok: true } | { ok: false; error: string };
+
 type PreviewOpenNotesMessage = {
     type?: unknown;
     path?: unknown;
@@ -240,6 +250,7 @@ function extractDroppedFiles(data: PreviewDroppedFilesMessage | null): File[] {
 export function InstancePreview(props: InstancePreviewProps) {
     const iframeRef = useRef<HTMLIFrameElement | null>(null);
     const loadedSrcRef = useRef<string | null>(null);
+    const handledInsertRequestRef = useRef<string | null>(null);
     const [pathDropStatus, setPathDropStatus] = useState<string | null>(null);
     const [folderDragActive, setFolderDragActive] = useState(false);
     const state = buildPreviewState(
@@ -259,6 +270,30 @@ export function InstancePreview(props: InstancePreviewProps) {
         postPreviewTheme(iframeRef.current, state.src, props.theme);
     }, [props.enabled, props.theme, state.canPreview, state.src]);
 
+    useEffect(() => {
+        const request = props.previewInsertTextRequest;
+        if (!request || handledInsertRequestRef.current === request.id) return;
+        handledInsertRequestRef.current = request.id;
+        const finish = (result: PreviewInsertTextResult): void => {
+            props.onPreviewInsertTextResult?.(request.id, result);
+        };
+        if (!props.instance?.ok || props.instance.port !== request.port) {
+            finish({ ok: false, error: 'selected instance preview is not mounted' });
+            return;
+        }
+        if (!props.enabled || !state.canPreview || !state.src) {
+            finish({ ok: false, error: disabledReason || 'selected instance preview is unavailable' });
+            return;
+        }
+        if (loadedSrcRef.current !== state.src) {
+            finish({ ok: false, error: 'selected instance preview is still loading' });
+            return;
+        }
+        void postPreviewInsertText(iframeRef.current, state.src, request.text)
+            .then(finish)
+            .catch(error => finish({ ok: false, error: (error as Error).message }));
+    }, [disabledReason, props.enabled, props.instance, props.onPreviewInsertTextResult, props.previewInsertTextRequest, state.canPreview, state.src]);
+
     const handleFolderPathDrop = useCallback(async (event: React.DragEvent): Promise<void> => {
         if (!hasFolderPanelDragPayload(event.dataTransfer)) return;
         event.preventDefault();