npm - cli-jaw - Versions diffs - 2.0.4 → 2.0.5 - Mend

cli-jaw 2.0.4 → 2.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (624) hide show

package/public/dist/index.html CHANGED Viewed

@@ -27,12 +27,21 @@
         href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap"
         rel="stylesheet">
     <!-- Vite handles module bundling in dev (HMR) and production (build) -->
-  <script type="module" crossorigin src="/dist/assets/app-DJ8ys0j5.js"></script>
+  <script type="module" crossorigin src="/dist/assets/app-BxsIleo0.js"></script>
   <link rel="stylesheet" crossorigin href="/dist/assets/vendor-render-Bjnw0wQ6.css">
-  <link rel="stylesheet" crossorigin href="/dist/assets/app-CphocJzo.css">
+  <link rel="stylesheet" crossorigin href="/dist/assets/app-CB9n5A77.css">
 </head>
 <body>
+    <script>
+        (function() {
+            try {
+                var s = JSON.parse(localStorage.getItem('sidebarState') || '{}');
+                if (s.left) document.body.classList.add('left-collapsed');
+                if (s.right) document.body.classList.add('right-collapsed');
+            } catch(e) {}
+        })();
+    </script>
     <!-- Left Sidebar -->
     <nav class="sidebar-left" role="navigation" aria-label="Main navigation">
         <button class="sidebar-toggle" id="toggleLeft" title="Collapse" aria-label="Collapse sidebar">◀</button>
@@ -60,9 +69,9 @@
         <!-- CLI Status (moved from Settings tab) -->
         <div>
-            <div class="section-title" data-i18n="sidebar.cliStatus">CLI 상태</div>
-            <div id="cliStatusList" class="mt-1">
-                <div class="text-status">Loading...</div>
+            <div class="section-title cli-status-header" id="cliStatusHeader" data-i18n="sidebar.cliStatus">CLI 상태</div>
+            <div id="cliStatusList" class="mt-1" style="display:none">
+                <div class="text-status">Expand to load CLI status</div>
             </div>
             <div class="flex gap-2 mt-2 items-center">
                 <button class="btn-clear btn-refresh"
@@ -145,9 +154,13 @@
         <div class="drag-overlay" id="dragOverlay" data-i18n="drag.drop"><span data-icon="paperclip"></span> 파일을 여기에 드랍하세요</div>
         <div class="chat-header">
             <span>CLI-JAW ● <span id="headerCli">claude</span></span>
-            <button class="theme-switch" id="toggleTheme" title="Toggle Theme" aria-label="Toggle dark/light mode">
-                <span class="theme-switch-knob"></span>
-            </button>
+            <div class="chat-header-actions">
+                <button class="help-trigger" type="button" data-help-topic="diagrams"
+                    data-i18n-aria="help.diagrams.aria" aria-label="다이어그램 도움말">?</button>
+                <button class="theme-switch" id="toggleTheme" title="Toggle Theme" aria-label="Toggle dark/light mode">
+                    <span class="theme-switch-knob"></span>
+                </button>
+            </div>
         </div>
         <div class="pabc-roadmap" id="pabcRoadmap">
             <div class="shark-runner" id="sharkRunner"></div>
@@ -159,6 +172,8 @@
                 <div class="pabc-brand" id="pabcBrand">PABCD</div>
                 <div class="pabc-tagline">Ultimate Agent Workflow</div>
             </div>
+            <button class="help-trigger" type="button" data-help-topic="orchestration"
+                data-i18n-aria="help.orchestration.aria" aria-label="PABCD 도움말">?</button>
             <div class="pabc-connector" id="pabc-conn-2"></div>
             <div class="pabc-dot future" data-phase="B" id="dot-B">B</div>
             <div class="pabc-connector" id="pabc-conn-3"></div>
@@ -183,7 +198,11 @@
         <div class="pending-queue" id="pendingQueue" aria-live="polite"></div>
         <div class="file-preview" id="filePreview">
             <div class="file-preview-header">
-                <span class="file-preview-title"><span data-icon="paperclip"></span> Files</span>
+                <div class="file-preview-title-group">
+                    <span class="file-preview-title"><span data-icon="paperclip"></span> Files</span>
+                    <button class="help-trigger" type="button" data-help-topic="attachments"
+                        data-i18n-aria="help.attachments.aria" aria-label="첨부 파일 도움말">?</button>
+                </div>
                 <button class="file-preview-clear" id="filePreviewClear">✕ Clear all</button>
             </div>
             <div class="file-preview-list" id="filePreviewList"></div>
@@ -196,9 +215,14 @@
             <button class="btn-voice" id="btnVoice" data-i18n-title="voice.start" title="음성 녹음"><span data-icon="mic"></span></button>
             <span class="voice-timer" id="voiceTimer" style="display:none">00:00</span>
             <button class="btn-voice-cancel" id="btnVoiceCancel" style="display:none" title="취소">✕</button>
-            <textarea class="chat-input" id="chatInput" rows="1" data-i18n-placeholder="input.placeholder"
-                placeholder="메시지 입력..." aria-label="Chat message input" aria-haspopup="listbox" aria-expanded="false"
-                aria-controls="cmdDropdown" aria-autocomplete="list" aria-activedescendant=""></textarea>
+            <div class="chat-input-shell">
+                <textarea class="chat-input" id="chatInput" rows="1" data-i18n-placeholder="input.placeholder"
+                    placeholder="메시지 입력..." aria-label="Chat message input" aria-haspopup="listbox" aria-expanded="false"
+                    aria-controls="cmdDropdown" aria-autocomplete="list" aria-activedescendant=""></textarea>
+                <button class="help-trigger chat-input-help-trigger" type="button" data-help-topic="chatInput"
+                    data-help-topics="chatInput keyboardShortcuts"
+                    data-i18n-aria="help.chatComposer.aria" aria-label="채팅 입력 및 키보드 단축키 도움말">?</button>
+            </div>
             <button class="btn-send" id="btnSend" aria-label="Send message"><span data-icon="send"></span></button>
         </div>
     </div>

package/public/dist/manager/index.html CHANGED Viewed

@@ -6,9 +6,9 @@
   <link rel="icon" type="image/png" href="/dist/assets/icon-192-CwXPIYF5.png">
   <title>Jaw Manager</title>
   <script src="/manager/theme-boot.js"></script>
-  <script type="module" crossorigin src="/dist/assets/manager-DAe38I94.js"></script>
+  <script type="module" crossorigin src="/dist/assets/manager-B84u-pcn.js"></script>
   <link rel="stylesheet" crossorigin href="/dist/assets/vendor-render-Bjnw0wQ6.css">
-  <link rel="stylesheet" crossorigin href="/dist/assets/manager-fQR46YFa.css">
+  <link rel="stylesheet" crossorigin href="/dist/assets/manager-DMg_sTEP.css">
 </head>
 <body>
   <div id="manager-root"></div>

package/public/index.html CHANGED Viewed

@@ -40,6 +40,15 @@
 </head>
 <body>
+    <script>
+        (function() {
+            try {
+                var s = JSON.parse(localStorage.getItem('sidebarState') || '{}');
+                if (s.left) document.body.classList.add('left-collapsed');
+                if (s.right) document.body.classList.add('right-collapsed');
+            } catch(e) {}
+        })();
+    </script>
     <!-- Left Sidebar -->
     <nav class="sidebar-left" role="navigation" aria-label="Main navigation">
         <button class="sidebar-toggle" id="toggleLeft" title="Collapse" aria-label="Collapse sidebar">◀</button>
@@ -67,9 +76,9 @@
         <!-- CLI Status (moved from Settings tab) -->
         <div>
-            <div class="section-title" data-i18n="sidebar.cliStatus">CLI 상태</div>
-            <div id="cliStatusList" class="mt-1">
-                <div class="text-status">Loading...</div>
+            <div class="section-title cli-status-header" id="cliStatusHeader" data-i18n="sidebar.cliStatus">CLI 상태</div>
+            <div id="cliStatusList" class="mt-1" style="display:none">
+                <div class="text-status">Expand to load CLI status</div>
             </div>
             <div class="flex gap-2 mt-2 items-center">
                 <button class="btn-clear btn-refresh"
@@ -152,9 +161,13 @@
         <div class="drag-overlay" id="dragOverlay" data-i18n="drag.drop"><span data-icon="paperclip"></span> 파일을 여기에 드랍하세요</div>
         <div class="chat-header">
             <span>CLI-JAW ● <span id="headerCli">claude</span></span>
-            <button class="theme-switch" id="toggleTheme" title="Toggle Theme" aria-label="Toggle dark/light mode">
-                <span class="theme-switch-knob"></span>
-            </button>
+            <div class="chat-header-actions">
+                <button class="help-trigger" type="button" data-help-topic="diagrams"
+                    data-i18n-aria="help.diagrams.aria" aria-label="다이어그램 도움말">?</button>
+                <button class="theme-switch" id="toggleTheme" title="Toggle Theme" aria-label="Toggle dark/light mode">
+                    <span class="theme-switch-knob"></span>
+                </button>
+            </div>
         </div>
         <div class="pabc-roadmap" id="pabcRoadmap">
             <div class="shark-runner" id="sharkRunner"></div>
@@ -166,6 +179,8 @@
                 <div class="pabc-brand" id="pabcBrand">PABCD</div>
                 <div class="pabc-tagline">Ultimate Agent Workflow</div>
             </div>
+            <button class="help-trigger" type="button" data-help-topic="orchestration"
+                data-i18n-aria="help.orchestration.aria" aria-label="PABCD 도움말">?</button>
             <div class="pabc-connector" id="pabc-conn-2"></div>
             <div class="pabc-dot future" data-phase="B" id="dot-B">B</div>
             <div class="pabc-connector" id="pabc-conn-3"></div>
@@ -190,7 +205,11 @@
         <div class="pending-queue" id="pendingQueue" aria-live="polite"></div>
         <div class="file-preview" id="filePreview">
             <div class="file-preview-header">
-                <span class="file-preview-title"><span data-icon="paperclip"></span> Files</span>
+                <div class="file-preview-title-group">
+                    <span class="file-preview-title"><span data-icon="paperclip"></span> Files</span>
+                    <button class="help-trigger" type="button" data-help-topic="attachments"
+                        data-i18n-aria="help.attachments.aria" aria-label="첨부 파일 도움말">?</button>
+                </div>
                 <button class="file-preview-clear" id="filePreviewClear">✕ Clear all</button>
             </div>
             <div class="file-preview-list" id="filePreviewList"></div>
@@ -203,9 +222,14 @@
             <button class="btn-voice" id="btnVoice" data-i18n-title="voice.start" title="음성 녹음"><span data-icon="mic"></span></button>
             <span class="voice-timer" id="voiceTimer" style="display:none">00:00</span>
             <button class="btn-voice-cancel" id="btnVoiceCancel" style="display:none" title="취소">✕</button>
-            <textarea class="chat-input" id="chatInput" rows="1" data-i18n-placeholder="input.placeholder"
-                placeholder="메시지 입력..." aria-label="Chat message input" aria-haspopup="listbox" aria-expanded="false"
-                aria-controls="cmdDropdown" aria-autocomplete="list" aria-activedescendant=""></textarea>
+            <div class="chat-input-shell">
+                <textarea class="chat-input" id="chatInput" rows="1" data-i18n-placeholder="input.placeholder"
+                    placeholder="메시지 입력..." aria-label="Chat message input" aria-haspopup="listbox" aria-expanded="false"
+                    aria-controls="cmdDropdown" aria-autocomplete="list" aria-activedescendant=""></textarea>
+                <button class="help-trigger chat-input-help-trigger" type="button" data-help-topic="chatInput"
+                    data-help-topics="chatInput keyboardShortcuts"
+                    data-i18n-aria="help.chatComposer.aria" aria-label="채팅 입력 및 키보드 단축키 도움말">?</button>
+            </div>
             <button class="btn-send" id="btnSend" aria-label="Send message"><span data-icon="send"></span></button>
         </div>
     </div>

package/public/js/features/chat-messages.ts ADDED Viewed

@@ -0,0 +1,132 @@
+import { renderMarkdown, escapeHtml, sanitizeHtml, stripOrchestration, linkifyFilePaths } from '../render.js';
+import { renderMermaidBlocks } from '../render.js';
+import { generateId } from '../uuid.js';
+import { state } from '../state.js';
+import { getVirtualScroll, VS_THRESHOLD } from '../virtual-scroll.js';
+import { activateWidgets } from '../diagram/iframe-renderer.js';
+import { getAppName } from './appname.js';
+import { getAgentAvatarMarkup, getUserAvatarMarkup } from './avatar.js';
+import { t } from './i18n.js';
+import { renderMessageActionsHtml } from './message-actions.js';
+import { normalizeAgentToolBlocks } from './process-block-dom.js';
+import { scrollToBottom } from './chat-scroll.js';
+function getAgentIcon(_cli?: string | null): string {
+    return getAgentAvatarMarkup();
+}
+export function showSkeleton(): void {
+    const container = document.getElementById('chatMessages');
+    if (!container || container.querySelector('.skeleton-msg')) return;
+    if (state.currentAgentDiv && state.currentAgentDiv.isConnected) return;
+    hideEmptyState();
+    const skel = document.createElement('div');
+    skel.className = 'skeleton-msg';
+    skel.innerHTML = '<div class="skeleton-line"></div><div class="skeleton-line"></div><div class="skeleton-line"></div>';
+    container.appendChild(skel);
+    scrollToBottom();
+}
+export function removeSkeleton(): void {
+    document.querySelectorAll('.skeleton-msg').forEach(el => el.remove());
+}
+export function hideEmptyState(): void {
+    document.getElementById('emptyState')?.classList.remove('visible');
+}
+export function showEmptyState(): void {
+    const container = document.getElementById('chatMessages');
+    if (container && container.children.length === 0) {
+        document.getElementById('emptyState')?.classList.add('visible');
+    }
+}
+export function addSystemMsg(text: string, extraClass?: string, type?: string): void {
+    const container = document.getElementById('chatMessages');
+    if (!container) return;
+    const vs = getVirtualScroll();
+    hideEmptyState();
+    const div = document.createElement('div');
+    const typeClass = type ? ` msg-type-${type}` : '';
+    div.className = 'msg msg-system' + typeClass + (extraClass ? ' ' + extraClass : '');
+    div.innerHTML = sanitizeHtml(text);
+    if (vs.active) {
+        vs.appendLiveItem(div);
+    } else {
+        container.appendChild(div);
+    }
+    scrollToBottom();
+}
+export function formatUserPrompt(text: string): string {
+    const multiMatch = text.match(/^\[(?:사용자가 파일 (\d+)개를 보냈습니다|User sent (\d+) files)\]/);
+    if (multiMatch) {
+        const count = multiMatch[1] || multiMatch[2];
+        const userMsgMatch = text.match(/(?:사용자 메시지|User message): (.+)$/s);
+        const userMsg = userMsgMatch ? ' ' + userMsgMatch[1].trim() : '';
+        return `📎 [${count} files]${userMsg}`;
+    }
+    const fileMatch = text.match(/^\[(?:사용자가 파일을 보냈습니다|User sent a file): ([^\]]+)\]/);
+    if (fileMatch) {
+        const fileName = fileMatch[1].split('/').pop() || fileMatch[1];
+        const voiceMatch = text.match(/🎤\s*(.{0,80})/);
+        const voicePart = voiceMatch ? `${t('chat.voice.label')} ` : '';
+        const userMsgMatch = text.match(/(?:사용자 메시지|User message): (.+)$/s);
+        const userMsg = userMsgMatch ? ' ' + userMsgMatch[1].trim() : '';
+        return `${voicePart}📎 [${fileName}]${userMsg}`;
+    }
+    return text;
+}
+export function addMessage(role: string, text: string, cli?: string | null): HTMLDivElement {
+    const container = document.getElementById('chatMessages');
+    const vs = getVirtualScroll();
+    hideEmptyState();
+    removeSkeleton();
+    const displayText = role === 'user' ? formatUserPrompt(text) : text;
+    const rendered = renderMarkdown(displayText);
+    const label = escapeHtml(role === 'user' ? t('msg.you') : getAppName());
+    const div = document.createElement('div');
+    const turnIndex = container ? container.querySelectorAll('.msg').length : null;
+    const messageId = generateId();
+    div.setAttribute('data-message-role', role);
+    div.setAttribute('data-message-id', messageId);
+    if (turnIndex !== null) div.setAttribute('data-turn-index', String(turnIndex));
+    const port = Number(window.location.port);
+    if (Number.isFinite(port) && port > 0) div.setAttribute('data-instance-id', `port:${port}`);
+    const actions = renderMessageActionsHtml();
+    if (role === 'agent') {
+        div.className = 'msg msg-agent';
+        div.innerHTML = `<div class="agent-icon" aria-hidden="true">${getAgentIcon(cli)}</div><div class="agent-body"><div class="msg-content">${rendered}</div>${actions}</div>`;
+    } else {
+        div.className = `msg msg-${role}`;
+        div.innerHTML = `<div class="user-body"><div class="msg-label">${label}</div><div class="msg-content">${rendered}</div>${actions}</div><div class="user-icon" aria-hidden="true">${getUserAvatarMarkup()}</div>`;
+    }
+    const contentEl = div.querySelector('.msg-content');
+    if (contentEl) contentEl.setAttribute('data-raw', stripOrchestration(text));
+    const isStreamingPlaceholder = role === 'agent' && !text;
+    if (vs.active && !isStreamingPlaceholder) {
+        if (div.classList.contains('msg-agent')) normalizeAgentToolBlocks(div);
+        vs.appendLiveItem(div);
+    } else {
+        container?.appendChild(div);
+        activateWidgets(div);
+        if (!vs.active && !isStreamingPlaceholder && container) {
+            const msgCount = container.querySelectorAll('.msg').length;
+            if (msgCount >= VS_THRESHOLD) {
+                container.querySelectorAll('.msg').forEach(el => {
+                    if (el.classList.contains('msg-agent')) normalizeAgentToolBlocks(el as HTMLElement);
+                    vs.addItem(generateId(), el.outerHTML);
+                });
+                vs.onPostRender = (viewport: HTMLElement) => {
+                    activateWidgets(viewport);
+                    linkifyFilePaths(viewport);
+                    void renderMermaidBlocks(viewport, { immediate: true });
+                };
+            }
+        }
+    }
+    scrollToBottom(role === 'user');
+    return div;
+}

package/public/js/features/chat-scroll.ts ADDED Viewed

@@ -0,0 +1,226 @@
+import { getVirtualScroll, type RestoreReason } from '../virtual-scroll.js';
+let scrollRAF: number | null = null;
+let userNearBottom = true;
+type ScrollIntent = 'unknown' | 'following' | 'pinnedAway';
+let scrollIntent: ScrollIntent = 'unknown';
+let scrollTrackingBound = false;
+const SCROLL_BOTTOM_THRESHOLD = 80; // px
+const RESTORE_INDICATOR_SETTLE_MS = 1100;
+let chatRestoreIndicatorHideTimer: number | null = null;
+const chatRestorePassTimers = new Set<number>();
+const chatRestorePassRafs = new Set<number>();
+export function canFollowAfterRestore(): boolean {
+    return scrollIntent !== 'pinnedAway';
+}
+export function markFollowingBottom(): void {
+    userNearBottom = true;
+    scrollIntent = 'following';
+}
+function updateScrollIntentFromDistance(dist: number): void {
+    userNearBottom = dist < SCROLL_BOTTOM_THRESHOLD;
+    scrollIntent = userNearBottom ? 'following' : 'pinnedAway';
+    if (scrollIntent === 'pinnedAway') cancelPendingChatRestorePasses();
+}
+function cancelPendingChatRestorePasses(): void {
+    for (const timer of chatRestorePassTimers) window.clearTimeout(timer);
+    chatRestorePassTimers.clear();
+    for (const raf of chatRestorePassRafs) cancelAnimationFrame(raf);
+    chatRestorePassRafs.clear();
+}
+function requestChatRestoreFrame(callback: () => void): void {
+    const raf = requestAnimationFrame(() => {
+        chatRestorePassRafs.delete(raf);
+        callback();
+    });
+    chatRestorePassRafs.add(raf);
+}
+function trackChatRestoreTimer(timer: number): void {
+    chatRestorePassTimers.add(timer);
+}
+function scheduleChatRestoreTimer(callback: () => void, delayMs: number): void {
+    const timer = window.setTimeout(() => {
+        chatRestorePassTimers.delete(timer);
+        callback();
+    }, delayMs);
+    trackChatRestoreTimer(timer);
+}
+export function ensureScrollTracking(): void {
+    getVirtualScroll().setRestoreFollowPredicate(canFollowAfterRestore);
+    window.__jawProcessBlockLayoutMutation = (anchor, mutate) => {
+        const vs = getVirtualScroll();
+        if (vs.active) {
+            vs.preserveScrollDuringMutation(anchor, mutate);
+            return;
+        }
+        mutate();
+    };
+    if (scrollTrackingBound) return;
+    const c = document.getElementById('chatMessages');
+    if (!c) return;
+    scrollTrackingBound = true;
+    c.addEventListener('scroll', () => {
+        const dist = c.scrollHeight - c.scrollTop - c.clientHeight;
+        updateScrollIntentFromDistance(dist);
+    }, { passive: true });
+}
+export function isChatNearBottom(): boolean {
+    ensureScrollTracking();
+    const c = document.getElementById('chatMessages');
+    if (!c) return userNearBottom;
+    const vs = getVirtualScroll();
+    if (vs.active) return vs.isNearBottom(SCROLL_BOTTOM_THRESHOLD);
+    const dist = c.scrollHeight - c.scrollTop - c.clientHeight;
+    return dist < SCROLL_BOTTOM_THRESHOLD;
+}
+export function reconcileChatBottomAfterLayout(shouldFollow = isChatNearBottom()): void {
+    ensureScrollTracking();
+    if (!shouldFollow) return;
+    markFollowingBottom();
+    const vs = getVirtualScroll();
+    if (vs.active) {
+        vs.reconcileBottomAfterLayout('reconnect', true);
+        return;
+    }
+    requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+            const c = document.getElementById('chatMessages');
+            if (c) c.scrollTop = c.scrollHeight;
+        });
+    });
+}
+export function showChatRestoreIndicator(reason: string): void {
+    if (chatRestoreIndicatorHideTimer !== null) {
+        window.clearTimeout(chatRestoreIndicatorHideTimer);
+        chatRestoreIndicatorHideTimer = null;
+    }
+    const host = document.querySelector('.chat-area') as HTMLElement | null;
+    if (!host) return;
+    let indicator = host.querySelector('[data-restore-indicator="true"]') as HTMLElement | null;
+    if (!indicator) {
+        indicator = document.createElement('div');
+        indicator.className = 'chat-restore-indicator';
+        indicator.setAttribute('data-restore-indicator', 'true');
+        indicator.setAttribute('role', 'status');
+        indicator.setAttribute('aria-live', 'polite');
+        indicator.innerHTML = '<span class="chat-restore-dot"></span><span class="chat-restore-text">Restoring</span>';
+        host.appendChild(indicator);
+    }
+    indicator.dataset['restoreReason'] = reason;
+}
+export function hideChatRestoreIndicator(): void {
+    if (chatRestoreIndicatorHideTimer !== null) {
+        window.clearTimeout(chatRestoreIndicatorHideTimer);
+        chatRestoreIndicatorHideTimer = null;
+    }
+    document.querySelectorAll('[data-restore-indicator="true"]').forEach(el => el.remove());
+}
+export function hideChatRestoreIndicatorAfterSettle(delayMs = RESTORE_INDICATOR_SETTLE_MS): void {
+    if (chatRestoreIndicatorHideTimer !== null) {
+        window.clearTimeout(chatRestoreIndicatorHideTimer);
+    }
+    chatRestoreIndicatorHideTimer = window.setTimeout(() => {
+        chatRestoreIndicatorHideTimer = null;
+        hideChatRestoreIndicator();
+    }, delayMs);
+}
+export function reconcileChatBottomAfterRestore(reason: string): void {
+    showChatRestoreIndicator(reason);
+    hideChatRestoreIndicatorAfterSettle();
+    ensureScrollTracking();
+    const vs = getVirtualScroll();
+    if (vs.active) {
+        vs.reconcileAfterRestore(reason as RestoreReason, canFollowAfterRestore);
+        return;
+    }
+    if (!canFollowAfterRestore()) return;
+    const scrollIfFollowing = () => {
+        if (!canFollowAfterRestore()) {
+            cancelPendingChatRestorePasses();
+            return;
+        }
+        const c = document.getElementById('chatMessages');
+        if (c) {
+            c.scrollTop = c.scrollHeight;
+            markFollowingBottom();
+        }
+    };
+    const runRestorePass = () => {
+        if (!canFollowAfterRestore()) {
+            cancelPendingChatRestorePasses();
+            return;
+        }
+        requestChatRestoreFrame(scrollIfFollowing);
+    };
+    runRestorePass();
+    requestChatRestoreFrame(runRestorePass);
+    requestChatRestoreFrame(() => requestChatRestoreFrame(runRestorePass));
+    scheduleChatRestoreTimer(runRestorePass, 250);
+    scheduleChatRestoreTimer(runRestorePass, 1000);
+    void document.fonts?.ready.then(runRestorePass);
+}
+export function settleChatBottomAfterInitialLoad(): void {
+    ensureScrollTracking();
+    markFollowingBottom();
+    const vs = getVirtualScroll();
+    if (vs.active) {
+        vs.reconcileAfterRestore('manual', canFollowAfterRestore);
+        return;
+    }
+    const scrollIfFollowing = () => {
+        if (!canFollowAfterRestore()) {
+            cancelPendingChatRestorePasses();
+            return;
+        }
+        const c = document.getElementById('chatMessages');
+        if (c) {
+            c.scrollTop = c.scrollHeight;
+            markFollowingBottom();
+        }
+    };
+    const runSettlePass = () => {
+        if (!canFollowAfterRestore()) {
+            cancelPendingChatRestorePasses();
+            return;
+        }
+        requestChatRestoreFrame(scrollIfFollowing);
+    };
+    runSettlePass();
+    requestChatRestoreFrame(runSettlePass);
+    requestChatRestoreFrame(() => requestChatRestoreFrame(runSettlePass));
+    scheduleChatRestoreTimer(runSettlePass, 250);
+    scheduleChatRestoreTimer(runSettlePass, 1000);
+    void document.fonts?.ready.then(runSettlePass);
+}
+export function scrollToBottom(force = false): void {
+    ensureScrollTracking();
+    if (!force && !userNearBottom) return;
+    if (force) markFollowingBottom();
+    const vs = getVirtualScroll();
+    if (vs.active) {
+        vs.scrollToBottom();
+        return;
+    }
+    if (scrollRAF) return;
+    scrollRAF = requestAnimationFrame(() => {
+        scrollRAF = null;
+        const c = document.getElementById('chatMessages');
+        if (c) c.scrollTop = c.scrollHeight;
+    });
+}

package/public/js/features/employees.ts CHANGED Viewed

@@ -7,6 +7,7 @@ import { getAgentPhase } from '../ws.js';
 import { t } from './i18n.js';
 import { api, apiJson, apiFire } from '../api.js';
 import { ICONS } from '../icons.js';
+import { isRightOpen } from './sidebar.js';
 interface Employee {
     id: string;
@@ -57,7 +58,9 @@ function getDefaultEmployeeModel(cli: string, models: string[]): string {
     return models[0] || 'default';
 }
-export async function loadEmployees(): Promise<void> {
+export async function loadEmployees(force = false): Promise<void> {
+    if (!force && !isRightOpen()) return;
     const data = await api<Employee[]>('/api/employees');
     state.employees = data || [];
     renderEmployees();

package/public/js/features/help-content.ts CHANGED Viewed

@@ -15,7 +15,12 @@ export type HelpTopicId =
     | 'mcp'
     | 'memory'
     | 'stt'
-    | 'promptTemplates';
+    | 'promptTemplates'
+    | 'chatInput'
+    | 'orchestration'
+    | 'attachments'
+    | 'diagrams'
+    | 'keyboardShortcuts';
 export interface HelpTopic {
     titleKey: string;
@@ -44,6 +49,11 @@ export const HELP_TOPICS: Record<HelpTopicId, HelpTopic> = {
     memory: topic('memory', 2, 1, 2),
     stt: topic('stt', 2, 1, 1),
     promptTemplates: topic('promptTemplates', 2, 1, 1),
+    chatInput: topic('chatInput', 3, 2, 2),
+    orchestration: topic('orchestration', 3, 2, 2),
+    attachments: topic('attachments', 3, 2, 2),
+    diagrams: topic('diagrams', 3, 2, 2),
+    keyboardShortcuts: topic('keyboardShortcuts', 3, 2, 2, 3, 2),
 };
 export function isHelpTopicId(value: string | null | undefined): value is HelpTopicId {