cli-jaw 2.17.62 → 2.17.63

package/public/js/features/resize-guard.ts

@@ -0,0 +1,39 @@
+// ── Resize Guard ──
+// A viewport-resize burst (manager sidebar drag resizes the iframe, or a window
+// edge drag) reflows every scrollable subtree each frame. Browser scroll
+// anchoring then rewrites scrollTop per frame and content visibly jumps.
+// While a burst is active `body.is-resizing` lets CSS suppress scroll
+// anchoring so the page only reflows.
+
+export const RESIZE_GUARD_SETTLE_MS = 160;
+
+export type ResizeGuardHandlers = {
+    onResizeStart: () => void;
+    onResizeEnd: () => void;
+    settleMs?: number;
+};
+
+export function createResizeGuard({ onResizeStart, onResizeEnd, settleMs = RESIZE_GUARD_SETTLE_MS }: ResizeGuardHandlers): () => void {
+    let active = false;
+    let settleTimer: ReturnType<typeof setTimeout> | undefined;
+    return () => {
+        if (!active) {
+            active = true;
+            onResizeStart();
+        }
+        clearTimeout(settleTimer);
+        settleTimer = setTimeout(() => {
+            active = false;
+            settleTimer = undefined;
+            onResizeEnd();
+        }, settleMs);
+    };
+}
+
+export function initResizeGuard(): void {
+    const notify = createResizeGuard({
+        onResizeStart: () => document.body.classList.add('is-resizing'),
+        onResizeEnd: () => document.body.classList.remove('is-resizing'),
+    });
+    window.addEventListener('resize', notify, { passive: true });
+}

package/public/js/features/settings-cli-status.ts

@@ -5,7 +5,7 @@ import { t } from './i18n.js';
 import { state } from '../state.js';
 import { ICONS } from '../icons.js';
 import { providerIcon, providerLabel } from '../provider-icons.js';
-import { describeCliProbe, describeNativeStartFailure, resolveQuotaWindowDisplay, type CliStatusInfo, type QuotaEntry } from './settings-types.js';
+import { describeCliProbe, describeNativeStartFailure, hasUsableCliStatus, isCliStatusUsable, resolveQuotaWindowDisplay, type CliStatusInfo, type QuotaEntry } from './settings-types.js';
 import {
     buildAccountParts,
     normalizeQuotaWindowLabel,
@@ -34,6 +34,7 @@ let cliStatusLoadInFlight: Promise<void> | null = null;
 let cliStatusRefreshFeedbackTimer: number | null = null;
 
 const CLI_STATUS_COLLAPSED_KEY = 'cliStatusCollapsed';
+const CLI_STATUS_UNDETECTED_EXPANDED_KEY = 'cliStatusUndetectedExpanded';
 
 export function isEmbeddedPreviewFrame(): boolean {
     try {
@@ -53,6 +54,16 @@ function saveCliStatusCollapsed(collapsed: boolean): void {
     catch { /* ignore */ }
 }
 
+function readCliStatusUndetectedExpanded(): boolean {
+    try { return localStorage.getItem(CLI_STATUS_UNDETECTED_EXPANDED_KEY) === 'true'; }
+    catch { return false; }
+}
+
+function saveCliStatusUndetectedExpanded(expanded: boolean): void {
+    try { localStorage.setItem(CLI_STATUS_UNDETECTED_EXPANDED_KEY, expanded ? 'true' : 'false'); }
+    catch { /* ignore */ }
+}
+
 function formatCliStatusRefreshTime(date: Date): string {
     return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
 }
@@ -295,7 +306,8 @@ function renderCliStatus(data: { cliStatus: Record<string, CliStatusInfo> | null
         copilot: { install: 'npm i -g copilot', auth: t('cli.copilot.authHint') },
     };
 
-    let html = '';
+    const usableCards: string[] = [];
+    const undetectedCards: string[] = [];
 
     if (!cliStatus || typeof cliStatus !== 'object') {
         if (el) el.innerHTML = '<div style="color:var(--text-dim);font-size:11px">Failed to load CLI status</div>';
@@ -431,7 +443,7 @@ function renderCliStatus(data: { cliStatus: Record<string, CliStatusInfo> | null
             ? `<div role="alert" style="font-size:10px;color:var(--warning);margin:2px 0 0 16px">${escapeHtml(startFailure.message)}</div>`
             : '';
 
-        html += `
+        const cardHtml = `
             <div class="settings-group" style="margin-bottom:6px;padding:8px 10px">
                 <div class="cli-status-row" style="display:flex;align-items:center">
                     <span class="cli-dot ${dotClass}"></span>
@@ -445,24 +457,32 @@ function renderCliStatus(data: { cliStatus: Record<string, CliStatusInfo> | null
                 ${windowsHtml}
             </div>
         `;
+        (isCliStatusUsable(info, q) ? usableCards : undetectedCards).push(cardHtml);
+    }
+
+    let html = usableCards.join('');
+    if (undetectedCards.length) {
+        // Collapsed by default: CLIs needing install/auth stop crowding the
+        // working list, but stay one click away in the same order.
+        const undetectedExpanded = readCliStatusUndetectedExpanded();
+        html += `
+            <div class="cli-undetected-group">
+                <button type="button" id="cliUndetectedToggle" class="cli-status-header cli-undetected-toggle${undetectedExpanded ? ' expanded' : ''}"
+                    aria-expanded="${undetectedExpanded}" aria-controls="cliUndetectedList">
+                    ${escapeHtml(t('cli.undetectedGroup', { count: undetectedCards.length }))}
+                </button>
+                <div id="cliUndetectedList"${undetectedExpanded ? '' : ' style="display:none"'}>${undetectedCards.join('')}</div>
+            </div>
+        `;
     }
 
     if (el) el.innerHTML = html;
 
-    const allEntries = Object.entries(cliStatus);
-    // While probes are failing we cannot tell ready from unready, so the
-    // "no ready CLI" alarm would be exactly the false alarm #277 reports —
-    // the runtime worked the whole time.
-    const anyProbeUnavailable = allEntries.some(([, info]) => {
-        const state = describeCliProbe(info);
-        return state === 'probe-failing' || state === 'unknown';
-    });
-    const hasReadyCli = allEntries.some(([name, info]) => {
-        if (describeCliProbe(info) !== 'ready') return false;
-        const q = quota?.[name];
-        return !q || q.authenticated !== false;
-    });
-    if (!hasReadyCli && !anyProbeUnavailable && allEntries.length > 0 && el) {
+    const allEntries = Object.entries(cliStatus).filter(([name]) => !SIDEBAR_HIDDEN_CLIS.has(name));
+    // The alarm shares the partition's usable rule: a stale-but-preserved row
+    // or an unsettled probe is last-known-good, not evidence of absence —
+    // otherwise it false-alarms through every re-check window (#277).
+    if (allEntries.length > 0 && !hasUsableCliStatus(allEntries, quota) && el) {
         el.insertAdjacentHTML('afterbegin',
             `<div style="padding:8px 10px;margin-bottom:8px;background:var(--warning-dim);border:1px solid var(--warning);border-radius:6px;font-size:11px;color:var(--warning)">
                 ${ICONS.warning} ${t('cli.noReadyCli')}
@@ -470,6 +490,18 @@ function renderCliStatus(data: { cliStatus: Record<string, CliStatusInfo> | null
         );
     }
 
+    const undetectedToggle = document.getElementById('cliUndetectedToggle');
+    if (undetectedToggle) {
+        undetectedToggle.addEventListener('click', () => {
+            const expanded = undetectedToggle.getAttribute('aria-expanded') !== 'true';
+            undetectedToggle.setAttribute('aria-expanded', String(expanded));
+            undetectedToggle.classList.toggle('expanded', expanded);
+            const list = document.getElementById('cliUndetectedList');
+            if (list) list.style.display = expanded ? 'block' : 'none';
+            saveCliStatusUndetectedExpanded(expanded);
+        });
+    }
+
     const kcBtn = document.getElementById('copilotKeychainBtn');
     if (kcBtn) {
         kcBtn.addEventListener('click', async () => {

package/public/js/features/settings-types.ts

@@ -3,7 +3,7 @@
 import type { RuntimeTransport } from '../../../src/shared/runtime-contract.js';
 import type { PresentationMode } from '../../../src/shared/presentation.js';
 
-export interface PerCliConfig { provider?: string; model?: string; effort?: string; transport?: RuntimeTransport; fastMode?: boolean; contextWindow?: boolean; contextWindowSize?: number; contextCompactLimit?: number; }
+export interface PerCliConfig { provider?: string; model?: string; effort?: string; transport?: RuntimeTransport; fastMode?: boolean; }
 export interface TelegramConfig { enabled?: boolean; token?: string; allowedChatIds?: number[]; forwardAll?: boolean; mentionOnly?: boolean; }
 export interface DiscordConfig { enabled?: boolean; token?: string; guildId?: string; channelIds?: string[]; forwardAll?: boolean; allowBots?: boolean; mentionOnly?: boolean; }
 // Slack needs TWO distinctly-scoped tokens: the bot token drives the Web API,
@@ -93,6 +93,44 @@ export function describeCliProbe(info: CliStatusInfo): 'checking' | 'unknown' |
     return info.available === true && info.capabilityReady !== false ? 'ready' : 'unavailable';
 }
 
+/**
+ * Sidebar partition: a card stays in the top group only while current or
+ * preserved evidence says the CLI is usable — installed, capability-ready and
+ * authenticated. `unavailable`/`capability-failed` rows demote, and a `ready`
+ * or `stale` row demotes only on concrete evidence (missing binary/capability
+ * or `authenticated === false` from either the status probe or the quota
+ * reader). Indeterminate probe states (checking/unknown, or failing with no
+ * prior snapshot) are not proof of absence, and a stale row is last-known-good — a previously working
+ * CLI keeps its place until a fresh probe says otherwise.
+ */
+export function isCliStatusUsable(info: CliStatusInfo, quota: QuotaEntry | null | undefined): boolean {
+    const probe = describeCliProbe(info);
+    if (probe === 'checking' || probe === 'unknown') return true;
+    if (probe === 'probe-failing') {
+        // A failing probe overlays the last successful snapshot; its concrete
+        // install/auth facts still hold, only a cold (null) row is unknown.
+        if (info.available == null) return true;
+        return info.available === true && info.capabilityReady !== false && info.authenticated !== false;
+    }
+    if (probe === 'unavailable' || probe === 'capability-failed') return false;
+    if (info.available !== true || info.capabilityReady === false) return false;
+    return info.authenticated !== false && quota?.authenticated !== false;
+}
+
+/**
+ * "Any usable CLI" rule the sidebar banner shares with the partition: true
+ * while at least one row reads usable under {@link isCliStatusUsable}. An
+ * alarm gated on this cannot false-fire through the stale re-check window or
+ * the initial probe pass — those rows count as usable, not as evidence of
+ * absence (#277).
+ */
+export function hasUsableCliStatus(entries: Iterable<readonly [string, CliStatusInfo]>, quota: Record<string, QuotaEntry> | null | undefined): boolean {
+    for (const [name, info] of entries) {
+        if (isCliStatusUsable(info, quota?.[name])) return true;
+    }
+    return false;
+}
+
 export type CliProbeAvailabilityPresentation = {
     kind: 'checking' | 'unknown' | 'failing' | 'none';
     message: string | null;

package/public/js/features/skill-mentions.ts

@@ -0,0 +1,143 @@
+// ── Inline `$skill` mentions ──
+// Typing `$` anywhere in the composer lists the active skills; picking one
+// inserts `$<id> ` at the caret. The server expands the mention when the
+// message runs (src/core/skill-mentions.ts); the chat keeps the typed text.
+import { state } from '../state.js';
+import { fetchWithLocale } from './i18n.js';
+import { escapeHtml } from '../render.js';
+import { isDropdownOpen as isSlashDropdownOpen } from './slash-commands.js';
+import { findSkillMentionToken, rankSkillMentions, skillMentionKey, type SkillMentionToken } from '../../../src/shared/skill-mention.js';
+
+interface ApiSkill { id: string; mention?: string | undefined; description?: string | undefined; enabled?: boolean | undefined }
+/** `name` carries the server-computed mention word so skillMentionKey() returns it. */
+interface MentionSkill { id: string; name: string; description?: string | undefined }
+
+let filtered: MentionSkill[] = [];
+let selectedIdx = 0;
+let isOpen = false;
+let token: SkillMentionToken | null = null;
+let loading: Promise<void> | null = null;
+/** Bumped by every update() and close(): an older async update never renders. */
+let updateSeq = 0;
+
+const dropdown = (): HTMLElement | null => document.getElementById('skillMentionDropdown');
+const input = (): HTMLTextAreaElement | null => document.getElementById('chatInput') as HTMLTextAreaElement | null;
+
+function activeSkills(): MentionSkill[] {
+    return (state.allSkills as ApiSkill[])
+        .filter(skill => skill && skill.enabled && typeof skill.id === 'string')
+        .map(skill => ({ id: skill.id, name: skill.mention || skill.id, description: skill.description }));
+}
+
+/** The skills panel owns `state.allSkills`; load it once if that panel never opened. */
+function ensureSkillsLoaded(): Promise<void> {
+    if ((state.allSkills as unknown[]).length) return Promise.resolve();
+    loading ??= fetchWithLocale('/api/skills')
+        .then(res => res.json())
+        .then((list: unknown) => {
+            if (Array.isArray(list) && !(state.allSkills as unknown[]).length) state.allSkills = list;
+        })
+        .catch(() => { /* popup stays closed; sending does not depend on it */ })
+        .finally(() => { loading = null; });
+    return loading;
+}
+
+/** The `/` list fades for 150ms after it closes; clear it so the two never stack. */
+function hideFadingSlashList(): void {
+    const slash = document.getElementById('cmdDropdown');
+    if (!slash) return;
+    slash.classList.remove('visible');
+    slash.style.display = 'none';
+}
+
+function render(): void {
+    const el = dropdown();
+    const inp = input();
+    if (!el || !inp) return;
+    hideFadingSlashList();
+    el.innerHTML = filtered.map((skill, i) => `<div class="cmd-item${i === selectedIdx ? ' selected' : ''}"
+            role="option" id="skill-mention-item-${i}" aria-selected="${i === selectedIdx}" data-index="${i}">
+            <span class="cmd-name">$${escapeHtml(skillMentionKey(skill))}</span>
+            <span class="cmd-desc">${escapeHtml(skill.description || '')}</span>
+        </div>`).join('');
+    el.style.display = 'block';
+    requestAnimationFrame(() => el.classList.add('visible'));
+    isOpen = true;
+    inp.setAttribute('aria-controls', 'skillMentionDropdown');
+    inp.setAttribute('aria-expanded', 'true');
+    inp.setAttribute('aria-activedescendant', `skill-mention-item-${selectedIdx}`);
+    el.querySelector('.selected')?.scrollIntoView({ block: 'nearest' });
+}
+
+export function close(): void {
+    updateSeq++; // also cancels an update() still awaiting the skill list
+    if (!isOpen) return;
+    isOpen = false; filtered = []; selectedIdx = 0; token = null;
+    const el = dropdown();
+    if (el) { el.classList.remove('visible'); el.style.display = 'none'; el.innerHTML = ''; }
+    const inp = input();
+    if (!inp) return;
+    // The textarea points back at the `/` list either way; if that list just
+    // opened on the same frame it owns expanded/activedescendant, so leave those.
+    inp.setAttribute('aria-controls', 'cmdDropdown');
+    if (!isSlashDropdownOpen()) {
+        inp.setAttribute('aria-expanded', 'false');
+        inp.setAttribute('aria-activedescendant', '');
+    }
+}
+
+export async function update(inp: HTMLTextAreaElement | null): Promise<void> {
+    const seq = ++updateSeq;
+    if (!inp || isSlashDropdownOpen() || inp.selectionStart !== inp.selectionEnd) { close(); return; }
+    if (!findSkillMentionToken(inp.value, inp.selectionStart ?? inp.value.length)) { close(); return; }
+    await ensureSkillsLoaded();
+    if (seq !== updateSeq) return; // a newer keystroke, a close() or a send owns the popup now
+    // Re-read after the await: the text or caret may have moved while the list loaded.
+    const next = findSkillMentionToken(inp.value, inp.selectionStart ?? inp.value.length);
+    if (!next || isSlashDropdownOpen()) { close(); return; }
+    const ranked = rankSkillMentions(activeSkills(), next.query);
+    if (!ranked.length) { close(); return; }
+    token = next; filtered = ranked; selectedIdx = 0;
+    render();
+}
+
+function applySelection(): void {
+    const skill = filtered[selectedIdx];
+    const inp = input();
+    const at = token;
+    close();
+    if (!skill || !inp || !at) return;
+    const caret = inp.selectionStart ?? inp.value.length;
+    const inserted = `$${skillMentionKey(skill)} `;
+    inp.value = inp.value.slice(0, at.start) + inserted + inp.value.slice(caret);
+    const pos = at.start + inserted.length;
+    inp.focus();
+    inp.selectionStart = inp.selectionEnd = pos;
+    inp.dispatchEvent(new Event('input', { bubbles: true })); // auto-resize + draft listeners
+}
+
+export function handleKeydown(e: KeyboardEvent): boolean {
+    if (!isOpen) return false;
+    if (e.isComposing) return false;
+    if (e.key === 'ArrowDown') { e.preventDefault(); selectedIdx = Math.min(filtered.length - 1, selectedIdx + 1); render(); return true; }
+    if (e.key === 'ArrowUp') { e.preventDefault(); selectedIdx = Math.max(0, selectedIdx - 1); render(); return true; }
+    if (e.key === 'Tab' || (e.key === 'Enter' && !e.shiftKey)) { e.preventDefault(); applySelection(); return true; }
+    if (e.key === 'Escape') { e.preventDefault(); close(); return true; }
+    return false; // caret keys fall through; the keyup listener re-evaluates the token
+}
+
+export function handleClick(e: Event): void {
+    const item = (e.target as HTMLElement).closest('.cmd-item') as HTMLElement | null;
+    if (!item) return;
+    const idx = Number.parseInt(item.dataset['index'] || '-1', 10);
+    if (Number.isNaN(idx) || idx < 0 || idx >= filtered.length) return;
+    selectedIdx = idx;
+    applySelection();
+}
+
+export function handleOutsideClick(e: Event): void {
+    if (!isOpen) return;
+    const el = dropdown();
+    // Same test as the `/` list: clicks in the textarea are caret moves, re-evaluated by update().
+    if (el && !el.contains(e.target as Node) && e.target !== input()) close();
+}

package/public/js/main.ts

@@ -45,6 +45,10 @@ import {
     loadCommands, update as updateSlashDropdown, handleKeydown as handleSlashKeydown,
     handleClick as handleSlashClick, handleOutsideClick as handleSlashOutsideClick,
 } from './features/slash-commands.js';
+import {
+    update as updateSkillMentions, handleKeydown as handleSkillMentionKeydown,
+    handleClick as handleSkillMentionClick, handleOutsideClick as handleSkillMentionOutsideClick,
+} from './features/skill-mentions.js';
 import { toggleSkill, filterSkills, searchSkills } from './features/skills.js';
 import {
     loadSettings, setPerm, onCliChange,
@@ -77,6 +81,7 @@ import { loadCliRegistry } from './constants.js';
 import { initAppName } from './features/appname.js';
 import { initAvatar } from './features/avatar.js';
 import { initSidebar, toggleLeft, toggleRight } from './features/sidebar.js';
+import { initResizeGuard } from './features/resize-guard.js';
 import { initTheme } from './features/theme.js';
 import { initPreviewShortcutBridge } from './features/preview-shortcut-bridge.js';
 import { ensurePreviewCapabilityListener, ensurePreviewInsertTextListener } from './preview-parent-origin.js';
@@ -117,6 +122,7 @@ function isVoiceRecordingShortcut(e: KeyboardEvent): boolean {
 document.getElementById('btnSend')?.addEventListener('click', () => { void sendMessage('button'); });
 const chatInput = document.getElementById('chatInput') as HTMLTextAreaElement | null;
 chatInput?.addEventListener('keydown', (e) => {
+    if (handleSkillMentionKeydown(e as KeyboardEvent)) return;
     if (handleSlashKeydown(e as KeyboardEvent)) return;
     handleKey(e as KeyboardEvent);
 });
@@ -126,6 +132,7 @@ chatInput?.addEventListener('input', (e) => {
     if (slashInputRaf) cancelAnimationFrame(slashInputRaf);
     slashInputRaf = requestAnimationFrame(() => {
         updateSlashDropdown((e.target as HTMLTextAreaElement)?.value || '');
+        void updateSkillMentions(e.target as HTMLTextAreaElement | null);
         slashInputRaf = 0;
     });
 });
@@ -134,6 +141,13 @@ chatInput?.addEventListener('cmd-execute', () => {
 });
 document.getElementById('cmdDropdown')?.addEventListener('click', handleSlashClick);
 document.addEventListener('click', handleSlashOutsideClick);
+document.getElementById('skillMentionDropdown')?.addEventListener('click', handleSkillMentionClick);
+document.addEventListener('click', handleSkillMentionOutsideClick);
+// Caret moves without typing (click, arrows, Home/End) re-evaluate the `$` token under the caret.
+chatInput?.addEventListener('click', () => { void updateSkillMentions(chatInput); });
+chatInput?.addEventListener('keyup', (e) => {
+    if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes((e as KeyboardEvent).key)) void updateSkillMentions(chatInput);
+});
 initPendingQueue();
 initBgtaskBadge();
 document.getElementById('filePreviewClear')?.addEventListener('click', clearAttachedFiles);
@@ -462,6 +476,7 @@ async function bootstrap(): Promise<void> {
     if (isCliStatusExpanded()) loadCliStatus();
     // loadMessages() is handled by ws.js onopen (clear + reload)
     initSidebar();
+    initResizeGuard();
     loadEmployees();
     initHeartbeatBadge();
     void refreshMemorySidebar();

package/public/js/virtual-scroll.ts

@@ -14,6 +14,8 @@ const THRESHOLD = 1;
 const EST_HEIGHT = 80;
 const OVERSCAN = 5;
 const BOTTOM_THRESHOLD = 80;
+/** Quiet period after the last width change before a resize drag counts as done. */
+const RESIZE_SETTLE_MS = 160;
 
 export type RestoreReason =
     | 'pageshow'
@@ -45,6 +47,13 @@ interface ScrollAnchor {
     el: HTMLElement;
     top: number;
 }
+/** Where the reader was when a resize drag began. Captured once per drag so
+ *  per-frame corrections never inherit the previous frame's drift. */
+interface ResizePin {
+    follow: boolean;
+    anchor: { index: number; top: number } | null;
+    settleTimer: number;
+}
 
 function readMeasuredHeight(el: MeasurableVirtualElement): number {
     const height = Math.ceil(el.getBoundingClientRect().height);
@@ -84,6 +93,7 @@ export class VirtualScroll {
     private itemGap = 0;
     private restorePassTimers = new Set<number>();
     private shouldFollowAfterRestore: RestoreFollowPredicate = () => true;
+    private resizePin: ResizePin | null = null;
 
     onLazyRender: LazyRenderCallback | null = null;
     onPostRender: ((viewport: HTMLElement) => void) | null = null;
@@ -182,6 +192,56 @@ export class VirtualScroll {
         this.renderItems();
     }
 
+    /** Width-driven re-measure that keeps the reader's place for a whole drag.
+     *  Follow intent and the anchor are read once, at the first frame: later
+     *  frames see scroll events caused by the reflow itself, and TanStack's own
+     *  item measurements land a frame after ours, so re-reading either would
+     *  compound the drift this exists to remove. */
+    private invalidateLayoutPinned(): void {
+        if (!this.virtualizer) return;
+        let pin = this.resizePin;
+        if (!pin) {
+            const follow = this.shouldFollowAfterRestore();
+            pin = { follow, anchor: follow ? null : this.captureIndexAnchor(), settleTimer: 0 };
+            this.resizePin = pin;
+        }
+        window.clearTimeout(pin.settleTimer);
+        this.invalidateLayout();
+        this.applyResizePin(pin);
+        const settling = pin;
+        settling.settleTimer = window.setTimeout(() => {
+            requestAnimationFrame(() => {
+                if (this.resizePin !== settling) return;
+                this.resizePin = null;
+                if (this.virtualizer) this.applyResizePin(settling);
+            });
+        }, RESIZE_SETTLE_MS);
+    }
+
+    private applyResizePin(pin: ResizePin): void {
+        if (pin.follow) {
+            this.scrollToBottom();
+            return;
+        }
+        if (!pin.anchor) return;
+        const el = this.mounted.get(pin.anchor.index);
+        if (!el?.isConnected) return;
+        const delta = el.getBoundingClientRect().top - pin.anchor.top;
+        if (Number.isFinite(delta) && delta !== 0) this.container.scrollTop += delta;
+    }
+
+    private captureIndexAnchor(): ResizePin['anchor'] {
+        const el = this.firstVisibleMountedItem();
+        if (!el) return null;
+        const index = Number(el.dataset['vsIdx'] ?? '-1');
+        return index >= 0 ? { index, top: el.getBoundingClientRect().top } : null;
+    }
+
+    private clearResizePin(): void {
+        if (this.resizePin) window.clearTimeout(this.resizePin.settleTimer);
+        this.resizePin = null;
+    }
+
     /** Bulk-load items. Call AFTER registering onLazyRender/onPostRender. */
     setItems(
         items: VirtualItem[],
@@ -483,11 +543,16 @@ export class VirtualScroll {
         // TanStack's ResizeObserver watches individual items, but not the
         // container width — a window resize doesn't trigger item RO callbacks
         // because items are position:absolute (width from left:0 + right:0).
+        // Re-measuring alone leaves scrollTop wherever the height deltas put it,
+        // so a drag (Manager sidebar, window edge) drifts a few px per frame
+        // until chat-scroll reads the gap as "user scrolled up" and stops
+        // following. Re-pin every pass: bottom while following, else the first
+        // visible row's on-screen top.
         let resizeRaf = 0;
         const scheduleInvalidateLayout = () => {
             cancelAnimationFrame(resizeRaf);
             resizeRaf = requestAnimationFrame(() => {
-                this.invalidateLayout();
+                this.invalidateLayoutPinned();
             });
         };
         const onResize = () => scheduleInvalidateLayout();
@@ -495,6 +560,7 @@ export class VirtualScroll {
         cleanupFns.push(() => {
             window.removeEventListener('resize', onResize);
             cancelAnimationFrame(resizeRaf);
+            this.clearResizePin();
         });
 
         if (typeof ResizeObserver !== 'undefined') {

package/public/locales/en.json

@@ -317,9 +317,11 @@
   "cli.showMore": "More ▸",
   "cli.authRequired": "Install / auth required",
   "cli.notAuthenticated": "Auth required — run command below",
+  "cli.undetectedGroup": "Needs install or sign-in ({count})",
   "drag.drop": "Drop files here",
   "status.responding": "Responding",
   "aria.cmdList": "Command list",
+  "aria.skillMentionList": "Skill list",
   "btn.attach": "Attach file",
   "input.placeholder": "Type a message...",
   "queue.pendingTitle": "Pending",

package/public/locales/ja.json

@@ -306,9 +306,11 @@
   "cli.showMore": "もっと見る ▸",
   "cli.authRequired": "インストール/認証が必要です",
   "cli.notAuthenticated": "認証が必要です — 下のコマンドを実行してください",
+  "cli.undetectedGroup": "インストール・ログインが必要 ({count})",
   "drag.drop": "ここにファイルをドロップ",
   "status.responding": "応答中",
   "aria.cmdList": "コマンド一覧",
+  "aria.skillMentionList": "スキル一覧",
   "btn.attach": "ファイルを添付",
   "input.placeholder": "メッセージを入力...",
   "queue.pendingTitle": "待機中",

package/public/locales/ko.json

@@ -317,9 +317,11 @@
   "cli.showMore": "더 보기 ▸",
   "cli.authRequired": "설치 / 인증 필요",
   "cli.notAuthenticated": "인증 필요 — 아래 명령어 실행",
+  "cli.undetectedGroup": "설치·로그인 필요 ({count})",
   "drag.drop": "파일을 여기에 드랍하세요",
   "status.responding": "응답 중",
   "aria.cmdList": "커맨드 목록",
+  "aria.skillMentionList": "스킬 목록",
   "btn.attach": "파일 첨부",
   "input.placeholder": "메시지 입력...",
   "queue.pendingTitle": "대기 중",

package/public/locales/zh.json

@@ -306,9 +306,11 @@
   "cli.showMore": "更多 ▸",
   "cli.authRequired": "需要安装/认证",
   "cli.notAuthenticated": "需要认证 — 请运行下面的命令",
+  "cli.undetectedGroup": "需要安装或登录 ({count})",
   "drag.drop": "将文件拖到这里",
   "status.responding": "正在回复",
   "aria.cmdList": "命令列表",
+  "aria.skillMentionList": "技能列表",
   "btn.attach": "附加文件",
   "input.placeholder": "输入消息...",
   "queue.pendingTitle": "待处理",

package/public/manager/src/AppChrome.tsx

@@ -22,6 +22,7 @@ import { useWindowFullscreen } from './hooks/useWindowFullscreen';
 import type { useDashboardView } from './hooks/useDashboardView';
 import type { DashboardDetailTab, DashboardInstance, DashboardNotesAuthoringMode, DashboardNotesGraphSettings, DashboardNotesViewMode, DashboardScanResult, DashboardShortcutAction, ManagerEvent, NoteMetadata } from './types';
 import { createManagerCaptureKeydownHandler } from './manager-shortcut-runner';
+import { normalizeManagerShortcutKeymap } from './manager-shortcuts';
 
 type AppChromeProps = {
     view: ReturnType<typeof useDashboardView>;
@@ -158,6 +159,7 @@ export function AppChrome(props: AppChromeProps) {
                         dashboardSettingsUi={props.dashboardSettingsUi} titleSupport={props.titleSupport} onDashboardSettingsPatch={props.handleDashboardSettingsPatch}
                         viewMode={props.view.viewMode} onViewModeChange={props.view.setViewMode}
                         port={Number(window.location.port) || 3457} workingDir={props.view.rightFolderRootPath || ''}
+                        codeNewSessionShortcut={normalizeManagerShortcutKeymap(props.view.dashboardShortcutKeymap).newCodeSession}
                         query={props.query} onQueryChange={props.setQuery} onSelectInstance={props.handleSelectInstance} />
                 )}
                 activityHeight={props.view.activityDockCollapsed ? 48 : props.view.activityDockHeight}

package/public/manager/src/InstancePreview.tsx

@@ -281,7 +281,7 @@ export function InstancePreview(props: InstancePreviewProps) {
         // Keep the dedicated preview origin as the default. The legacy `/i`
         // path is only a fallback because root-relative `/api` and `/ws`
         // requests must keep targeting the managed instance.
-        { theme: props.theme },
+        { theme: props.theme, desktop: isElectron() },
     );
     const disabledReason = props.instance?.ok
         ? 'Preview is off. Turn it on from the header to mount the iframe.'

package/public/manager/src/SidebarRailRouter.tsx

@@ -176,6 +176,8 @@ type Props = {
     onViewModeChange: (mode: DashboardViewMode) => void;
     port: number;
     workingDir: string;
+    /** Resolved `newCodeSession` chord, shown as the sidebar button's hint. */
+    codeNewSessionShortcut?: string;
     query: string;
     onQueryChange: (value: string) => void;
     onSelectInstance: (instance: DashboardInstance) => void;
@@ -607,7 +609,7 @@ export function SidebarRailRouter(props: Props) {
                         {props.viewMode === 'code' && props.sidebarMode === 'instances' ? (
                             <WorkspaceSurface active>
                                 <Suspense fallback={<div style={{ padding: '24px', color: 'var(--text-dim)', fontSize: '13px' }}>Loading Code workspace...</div>}>
-                                    <CodeCanvas port={props.port} workingDir={codeWorkingDir} onWorkingDirChange={handleCodeWorkingDirChange} onOpenLocalFile={handleRightPreviewFile} />
+                                    <CodeCanvas port={props.port} workingDir={codeWorkingDir} onWorkingDirChange={handleCodeWorkingDirChange} onOpenLocalFile={handleRightPreviewFile} newSessionShortcut={props.codeNewSessionShortcut} />
                                 </Suspense>
                             </WorkspaceSurface>
                         ) : null}