codexmate 0.0.19 → 0.0.21

package/web-ui/modules/app.methods.navigation.mjs

@@ -0,0 +1,619 @@
+export function createNavigationMethods(options = {}) {
+    const {
+        configModeSet,
+        switchMainTabHelper,
+        loadMoreSessionMessagesHelper
+    } = options;
+
+    return {
+        switchConfigMode(mode) {
+            const normalizedMode = typeof mode === 'string'
+                ? mode.trim().toLowerCase()
+                : '';
+            this.cancelTouchNavIntentReset();
+            if (typeof this.ensureMainTabSwitchState === 'function') {
+                this.ensureMainTabSwitchState().pendingConfigMode = '';
+            }
+            this.configMode = configModeSet.has(normalizedMode) ? normalizedMode : 'codex';
+            if (this.mainTab === 'config') {
+                if (this.configMode === 'claude') {
+                    const expectedMainTab = 'config';
+                    const expectedConfigMode = 'claude';
+                    const refresh = () => {
+                        if (this.mainTab !== expectedMainTab || this.configMode !== expectedConfigMode) {
+                            return;
+                        }
+                        this.refreshClaudeModelContext();
+                    };
+                    if (typeof this.scheduleAfterFrame === 'function') {
+                        this.scheduleAfterFrame(refresh);
+                    } else {
+                        refresh();
+                    }
+                }
+                this.scheduleAfterFrame(() => {
+                    this.clearMainTabSwitchIntent('config');
+                });
+                return;
+            }
+            this.switchMainTab('config');
+        },
+
+        ensureMainTabSwitchState() {
+            if (this.__mainTabSwitchState) {
+                return this.__mainTabSwitchState;
+            }
+            this.__mainTabSwitchState = {
+                intent: '',
+                pendingTarget: '',
+                pendingConfigMode: '',
+                ticket: 0
+            };
+            return this.__mainTabSwitchState;
+        },
+        ensureImmediateNavDomState() {
+            if (typeof document === 'undefined') {
+                return {
+                    navNodes: [],
+                    sessionPanelEl: null
+                };
+            }
+            if (!this.__immediateNavDomState) {
+                this.__immediateNavDomState = {
+                    navNodes: [],
+                    sessionPanelEl: null
+                };
+            }
+            const state = this.__immediateNavDomState;
+            const needsNavRefresh = !Array.isArray(state.navNodes)
+                || !state.navNodes.length
+                || state.navNodes.some((node) => !node || !node.isConnected);
+            if (needsNavRefresh) {
+                state.navNodes = Array.from(document.querySelectorAll('[data-main-tab]'));
+            }
+            if (!state.sessionPanelEl || !state.sessionPanelEl.isConnected) {
+                state.sessionPanelEl = document.getElementById('panel-sessions');
+            }
+            return state;
+        },
+        setMainTabSwitchIntent(tab) {
+            const normalizedTab = typeof tab === 'string'
+                ? tab.trim().toLowerCase()
+                : '';
+            if (!normalizedTab) return;
+            const state = this.ensureMainTabSwitchState();
+            state.intent = normalizedTab;
+        },
+        cancelTouchNavIntentReset() {
+            if (this.__touchNavIntentResetTimer) {
+                clearTimeout(this.__touchNavIntentResetTimer);
+                this.__touchNavIntentResetTimer = null;
+            }
+            this.__touchNavIntentResetToken = 0;
+        },
+        scheduleTouchNavIntentReset(kind, value) {
+            const normalizedKind = typeof kind === 'string' ? kind.trim().toLowerCase() : '';
+            const normalizedValue = typeof value === 'string' ? value.trim().toLowerCase() : '';
+            if (!normalizedKind || !normalizedValue) {
+                return;
+            }
+            const expectedIntent = normalizedKind === 'config' ? 'config' : normalizedValue;
+            this.cancelTouchNavIntentReset();
+            const token = (Number(this.__touchNavIntentResetToken) || 0) + 1;
+            this.__touchNavIntentResetToken = token;
+            this.__touchNavIntentResetTimer = setTimeout(() => {
+                if (this.__touchNavIntentResetToken !== token) {
+                    return;
+                }
+                this.__touchNavIntentResetTimer = null;
+                this.__touchNavIntentResetToken = 0;
+                const liveIntent = String(this.ensureMainTabSwitchState().intent || '').trim().toLowerCase();
+                if (liveIntent !== expectedIntent) {
+                    return;
+                }
+                this.clearMainTabSwitchIntent(expectedIntent);
+            }, 1000);
+        },
+        applyImmediateNavIntent(tab, configMode = '') {
+            if (typeof document === 'undefined') return;
+            const normalizedTab = typeof tab === 'string' ? tab.trim().toLowerCase() : '';
+            if (!normalizedTab) return;
+            const normalizedMode = typeof configMode === 'string' ? configMode.trim().toLowerCase() : '';
+            const domState = this.ensureImmediateNavDomState();
+            const nodes = Array.isArray(domState.navNodes) ? domState.navNodes : [];
+            for (const node of nodes) {
+                if (!node || !node.classList) continue;
+                const nodeTab = String(node.getAttribute('data-main-tab') || '').trim().toLowerCase();
+                const nodeMode = String(node.getAttribute('data-config-mode') || '').trim().toLowerCase();
+                let shouldActivate = nodeTab === normalizedTab;
+                if (shouldActivate && normalizedTab === 'config') {
+                    shouldActivate = nodeMode ? nodeMode === normalizedMode : false;
+                }
+                node.classList.toggle('nav-intent-active', !!shouldActivate);
+                node.classList.toggle('nav-intent-inactive', !shouldActivate);
+            }
+        },
+        clearImmediateNavIntent() {
+            if (typeof document === 'undefined') return;
+            const domState = this.ensureImmediateNavDomState();
+            const nodes = Array.isArray(domState.navNodes) ? domState.navNodes : [];
+            for (const node of nodes) {
+                if (!node || !node.classList) continue;
+                node.classList.remove('nav-intent-active');
+                node.classList.remove('nav-intent-inactive');
+            }
+        },
+        setSessionPanelFastHidden(hidden) {
+            if (typeof document === 'undefined') return;
+            const domState = this.ensureImmediateNavDomState();
+            const panel = domState.sessionPanelEl;
+            if (!panel || !panel.classList) return;
+            panel.classList.toggle('session-panel-fast-hidden', !!hidden);
+        },
+        isSessionPanelFastHidden() {
+            if (typeof document === 'undefined') return false;
+            const domState = this.ensureImmediateNavDomState();
+            const panel = domState.sessionPanelEl;
+            return !!(panel && panel.classList && panel.classList.contains('session-panel-fast-hidden'));
+        },
+        recordPointerNavCommit(kind, value) {
+            const normalizedKind = typeof kind === 'string' ? kind.trim().toLowerCase() : '';
+            const normalizedValue = typeof value === 'string' ? value.trim().toLowerCase() : '';
+            if (!normalizedKind || !normalizedValue) {
+                this.__pointerNavCommitState = null;
+                return;
+            }
+            this.__pointerNavCommitState = {
+                kind: normalizedKind,
+                value: normalizedValue,
+                at: Date.now()
+            };
+        },
+        consumePointerNavCommit(kind, value) {
+            const normalizedKind = typeof kind === 'string' ? kind.trim().toLowerCase() : '';
+            const normalizedValue = typeof value === 'string' ? value.trim().toLowerCase() : '';
+            const state = this.__pointerNavCommitState;
+            this.__pointerNavCommitState = null;
+            if (!state || !normalizedKind || !normalizedValue) {
+                return false;
+            }
+            if (state.kind !== normalizedKind || state.value !== normalizedValue) {
+                return false;
+            }
+            return (Date.now() - Number(state.at || 0)) <= 1000;
+        },
+        onMainTabPointerDown(tab) {
+            const event = arguments.length > 1 ? arguments[1] : null;
+            if (event && typeof event.button === 'number' && event.button !== 0) {
+                return;
+            }
+            const normalizedTab = typeof tab === 'string' ? tab.trim().toLowerCase() : '';
+            if (!normalizedTab) return;
+            this.setMainTabSwitchIntent(normalizedTab);
+            this.applyImmediateNavIntent(normalizedTab);
+            const shouldHideSessionPanel = this.mainTab === 'sessions' && normalizedTab !== 'sessions';
+            this.setSessionPanelFastHidden(shouldHideSessionPanel);
+            const pointerType = event && typeof event.pointerType === 'string'
+                ? event.pointerType.trim().toLowerCase()
+                : '';
+            if (pointerType === 'touch') {
+                this.scheduleTouchNavIntentReset('main', normalizedTab);
+                return;
+            }
+            this.recordPointerNavCommit('main', normalizedTab);
+            this.switchMainTab(normalizedTab);
+        },
+        onConfigTabPointerDown(mode) {
+            const event = arguments.length > 1 ? arguments[1] : null;
+            if (event && typeof event.button === 'number' && event.button !== 0) {
+                return;
+            }
+            const normalizedMode = typeof mode === 'string' ? mode.trim().toLowerCase() : '';
+            if (!normalizedMode) return;
+            this.setMainTabSwitchIntent('config');
+            if (typeof this.ensureMainTabSwitchState === 'function') {
+                this.ensureMainTabSwitchState().pendingConfigMode = normalizedMode;
+            }
+            this.applyImmediateNavIntent('config', normalizedMode);
+            const shouldHideSessionPanel = this.mainTab === 'sessions';
+            this.setSessionPanelFastHidden(shouldHideSessionPanel);
+            const pointerType = event && typeof event.pointerType === 'string'
+                ? event.pointerType.trim().toLowerCase()
+                : '';
+            if (pointerType === 'touch') {
+                this.scheduleTouchNavIntentReset('config', normalizedMode);
+                return;
+            }
+            this.recordPointerNavCommit('config', normalizedMode);
+            this.switchConfigMode(normalizedMode);
+        },
+        onMainTabClick(tab) {
+            const normalizedTab = typeof tab === 'string' ? tab.trim().toLowerCase() : '';
+            if (!normalizedTab) return;
+            if (this.consumePointerNavCommit('main', normalizedTab)) return;
+            this.switchMainTab(normalizedTab);
+        },
+        onConfigTabClick(mode) {
+            const normalizedMode = typeof mode === 'string' ? mode.trim().toLowerCase() : '';
+            if (!normalizedMode) return;
+            if (this.consumePointerNavCommit('config', normalizedMode)) return;
+            this.switchConfigMode(normalizedMode);
+        },
+        clearMainTabSwitchIntent(expectedTab = '') {
+            const state = this.ensureMainTabSwitchState();
+            if (expectedTab && state.intent && state.intent !== expectedTab) {
+                return;
+            }
+            this.cancelTouchNavIntentReset();
+            state.intent = '';
+            state.pendingTarget = '';
+            state.pendingConfigMode = '';
+            this.clearImmediateNavIntent();
+            this.setSessionPanelFastHidden(false);
+        },
+        getMainTabForNav() {
+            const state = this.ensureMainTabSwitchState();
+            return state.intent || this.mainTab;
+        },
+        isMainTabNavActive(tab) {
+            return this.getMainTabForNav() === tab;
+        },
+        isConfigModeNavActive(mode) {
+            if (!this.isMainTabNavActive('config')) {
+                return false;
+            }
+            const state = this.ensureMainTabSwitchState();
+            const pendingMode = typeof state.pendingConfigMode === 'string'
+                ? state.pendingConfigMode.trim().toLowerCase()
+                : '';
+            if (state.intent === 'config' && pendingMode) {
+                return pendingMode === mode;
+            }
+            return this.configMode === mode;
+        },
+        switchMainTab(tab) {
+            const normalizedTab = typeof tab === 'string'
+                ? tab.trim().toLowerCase()
+                : '';
+            const targetTab = normalizedTab || tab;
+            if (!targetTab) return;
+            if (targetTab === 'orchestration' && this.taskOrchestrationTabEnabled !== true) {
+                return this.switchMainTab('config');
+            }
+            this.cancelTouchNavIntentReset();
+            if (targetTab === 'sessions') {
+                this.cancelScheduledSessionTabDeferredTeardown();
+            }
+
+            this.setMainTabSwitchIntent(targetTab);
+            if (targetTab === 'config') {
+                this.applyImmediateNavIntent('config', this.configMode);
+            } else {
+                this.applyImmediateNavIntent(targetTab);
+            }
+
+            const previousTab = this.mainTab;
+            const switchState = this.ensureMainTabSwitchState();
+            if (targetTab !== 'config') {
+                switchState.pendingConfigMode = '';
+            }
+            if (targetTab === previousTab) {
+                switchState.ticket += 1;
+                switchState.pendingTarget = '';
+                if (
+                    targetTab === 'sessions'
+                    && typeof this.prepareSessionTabRender === 'function'
+                    && (!this.sessionListRenderEnabled || !this.sessionPreviewRenderEnabled)
+                ) {
+                    this.prepareSessionTabRender();
+                }
+                this.scheduleAfterFrame(() => {
+                    this.clearMainTabSwitchIntent(normalizedTab);
+                });
+                return;
+            }
+            const isLeavingSessions = previousTab === 'sessions' && targetTab !== 'sessions';
+            const shouldDeferApply = isLeavingSessions;
+            if (isLeavingSessions && !this.isSessionPanelFastHidden()) {
+                this.setSessionPanelFastHidden(true);
+            }
+            if (shouldDeferApply && typeof this.suspendSessionTabRender === 'function') {
+                this.suspendSessionTabRender();
+            }
+            if (!shouldDeferApply) {
+                switchState.ticket += 1;
+                switchState.pendingTarget = '';
+                const result = switchMainTabHelper.call(this, targetTab);
+                this.scheduleAfterFrame(() => {
+                    this.clearMainTabSwitchIntent(normalizedTab);
+                });
+                return result;
+            }
+
+            const ticket = ++switchState.ticket;
+            switchState.pendingTarget = targetTab;
+            this.scheduleAfterFrame(() => {
+                const liveState = this.ensureMainTabSwitchState();
+                if (ticket !== liveState.ticket) return;
+                const pendingTarget = liveState.pendingTarget || targetTab;
+                liveState.pendingTarget = '';
+                switchMainTabHelper.call(this, pendingTarget);
+                this.clearMainTabSwitchIntent(normalizedTab);
+            });
+        },
+
+        scheduleAfterFrame(task) {
+            const callback = typeof task === 'function' ? task : () => {};
+            if (typeof requestAnimationFrame === 'function') {
+                requestAnimationFrame(callback);
+                return;
+            }
+            setTimeout(callback, 16);
+        },
+        scheduleIdleTask(task, timeoutMs = 160) {
+            const callback = typeof task === 'function' ? task : () => {};
+            const timeout = Number.isFinite(timeoutMs)
+                ? Math.max(16, Math.floor(timeoutMs))
+                : 160;
+            if (typeof requestIdleCallback === 'function') {
+                const id = requestIdleCallback(callback, { timeout });
+                return {
+                    type: 'idle',
+                    id
+                };
+            }
+            const id = setTimeout(callback, timeout);
+            return {
+                type: 'timeout',
+                id
+            };
+        },
+        cancelIdleTask(handle) {
+            if (!handle || typeof handle !== 'object') return;
+            const type = handle.type;
+            const id = handle.id;
+            if (type === 'idle') {
+                if (typeof cancelIdleCallback === 'function') {
+                    cancelIdleCallback(id);
+                } else {
+                    clearTimeout(id);
+                }
+                return;
+            }
+            if (type === 'timeout') {
+                clearTimeout(id);
+            }
+        },
+        scheduleSessionTabDeferredTeardown(task) {
+            const callback = typeof task === 'function' ? task : () => {};
+            this.cancelScheduledSessionTabDeferredTeardown();
+            this.__sessionTabDeferredTeardownHandle = this.scheduleIdleTask(() => {
+                this.__sessionTabDeferredTeardownHandle = null;
+                callback();
+            }, 180);
+        },
+        cancelScheduledSessionTabDeferredTeardown() {
+            const handle = this.__sessionTabDeferredTeardownHandle || null;
+            if (!handle) return;
+            this.cancelIdleTask(handle);
+            this.__sessionTabDeferredTeardownHandle = null;
+        },
+
+        setSessionListRef(element) {
+            this.__sessionListRef = element || null;
+            if (this.__sessionListRef && this.mainTab === 'sessions' && this.sessionListRenderEnabled) {
+                this.scheduleSessionListViewportFill();
+            }
+        },
+        getSessionListRenderSource() {
+            return Array.isArray(this.sortedSessionsList) ? this.sortedSessionsList : [];
+        },
+        cancelScheduledSessionListViewportFill() {
+            const handle = this.__sessionListViewportFillHandle || null;
+            if (!handle) return;
+            this.cancelIdleTask(handle);
+            this.__sessionListViewportFillHandle = null;
+        },
+        resetSessionListRender() {
+            this.cancelScheduledSessionListViewportFill();
+            this.sessionListVisibleCount = 0;
+        },
+        expandVisibleSessionList(stepSize, options = {}) {
+            const list = this.getSessionListRenderSource();
+            const total = list.length;
+            if (total <= 0) {
+                this.sessionListVisibleCount = 0;
+                return false;
+            }
+            const rawVisibleCount = Number(this.sessionListVisibleCount);
+            const currentCount = Number.isFinite(rawVisibleCount)
+                ? Math.max(0, Math.floor(rawVisibleCount))
+                : 0;
+            const initialBatchSize = Number.isFinite(this.sessionListInitialBatchSize)
+                ? Math.max(1, Math.floor(this.sessionListInitialBatchSize))
+                : 80;
+            const loadStep = Number.isFinite(stepSize)
+                ? Math.max(0, Math.floor(stepSize))
+                : (Number.isFinite(this.sessionListLoadStep)
+                    ? Math.max(1, Math.floor(this.sessionListLoadStep))
+                    : 120);
+            let nextCount = currentCount > 0
+                ? Math.min(total, currentCount + loadStep)
+                : Math.min(total, initialBatchSize);
+            if (options && options.ensureActive !== false) {
+                const activeKey = this.activeSession ? this.getSessionExportKey(this.activeSession) : '';
+                if (activeKey) {
+                    const activeIndex = list.findIndex((session) => this.getSessionExportKey(session) === activeKey);
+                    if (activeIndex >= 0) {
+                        nextCount = Math.max(nextCount, activeIndex + 1);
+                    }
+                }
+            }
+            nextCount = Math.min(total, nextCount);
+            if (nextCount <= currentCount) {
+                return false;
+            }
+            this.sessionListVisibleCount = nextCount;
+            return true;
+        },
+        scheduleSessionListViewportFill() {
+            this.cancelScheduledSessionListViewportFill();
+            if (this.mainTab !== 'sessions' || !this.sessionListRenderEnabled) {
+                return;
+            }
+            const run = () => {
+                this.__sessionListViewportFillHandle = null;
+                if (this.mainTab !== 'sessions' || !this.sessionListRenderEnabled) {
+                    return;
+                }
+                const list = this.getSessionListRenderSource();
+                const total = list.length;
+                const visibleCount = Number(this.sessionListVisibleCount);
+                const normalizedVisibleCount = Number.isFinite(visibleCount)
+                    ? Math.max(0, Math.floor(visibleCount))
+                    : 0;
+                if (total <= 0 || normalizedVisibleCount >= total) {
+                    return;
+                }
+                const listEl = this.__sessionListRef || null;
+                if (!listEl) {
+                    return;
+                }
+                const clientHeight = Number(listEl.clientHeight) || 0;
+                const scrollHeight = Number(listEl.scrollHeight) || 0;
+                const scrollTop = Number(listEl.scrollTop) || 0;
+                const remaining = Math.max(0, scrollHeight - scrollTop - clientHeight);
+                const shouldGrow = scrollHeight <= (clientHeight + 160) || remaining <= Math.max(160, clientHeight);
+                if (!shouldGrow) {
+                    return;
+                }
+                if (this.expandVisibleSessionList(undefined, { ensureActive: true })) {
+                    this.scheduleSessionListViewportFill();
+                }
+            };
+            this.__sessionListViewportFillHandle = this.scheduleIdleTask(run, 120);
+        },
+        primeSessionListRender() {
+            this.resetSessionListRender();
+            if (this.mainTab !== 'sessions' || !this.sessionListRenderEnabled) {
+                return;
+            }
+            this.expandVisibleSessionList(undefined, { ensureActive: true });
+            this.scheduleSessionListViewportFill();
+        },
+        onSessionListScroll(event) {
+            const nextRef = event && event.currentTarget ? event.currentTarget : this.__sessionListRef;
+            if (nextRef) {
+                this.__sessionListRef = nextRef;
+            }
+            this.scheduleSessionListViewportFill();
+        },
+
+        resetSessionPreviewMessageRender() {
+            this.sessionPreviewVisibleCount = 0;
+            this.invalidateSessionTimelineMeasurementCache();
+        },
+
+        resetSessionDetailPagination() {
+            const initialLimit = Number.isFinite(this.sessionDetailInitialMessageLimit)
+                ? Math.max(1, Math.floor(this.sessionDetailInitialMessageLimit))
+                : 80;
+            this.sessionDetailMessageLimit = initialLimit;
+            this.sessionPreviewPendingVisibleCount = 0;
+        },
+
+        primeSessionPreviewMessageRender() {
+            this.sessionPreviewVisibleCount = 0;
+            this.invalidateSessionTimelineMeasurementCache();
+            if (this.mainTab !== 'sessions' || !this.sessionPreviewRenderEnabled) {
+                return;
+            }
+            const total = Array.isArray(this.activeSessionMessages)
+                ? this.activeSessionMessages.length
+                : 0;
+            if (total <= 0) return;
+            const baseSize = Number.isFinite(this.sessionPreviewInitialBatchSize)
+                ? Math.max(1, Math.floor(this.sessionPreviewInitialBatchSize))
+                : 40;
+            this.sessionPreviewVisibleCount = Math.min(baseSize, total);
+            this.invalidateSessionTimelineMeasurementCache();
+        },
+
+        async loadMoreSessionMessages(stepSize) {
+            return loadMoreSessionMessagesHelper.call(this, stepSize);
+        },
+
+        suspendSessionTabRender() {
+            this.sessionTabRenderTicket += 1;
+            this.sessionListRenderEnabled = false;
+            this.sessionPreviewRenderEnabled = false;
+            this.cancelScheduledSessionListViewportFill();
+            this.cancelSessionTimelineSync();
+            this.sessionTimelineActiveKey = '';
+            this.sessionTimelineLastSyncAt = 0;
+            this.sessionTimelineLastScrollTop = 0;
+            this.sessionTimelineLastAnchorY = 0;
+            this.sessionTimelineLastDirection = 0;
+            this.__sessionListRef = null;
+            this.sessionPreviewScrollEl = null;
+            this.sessionPreviewContainerEl = null;
+            this.sessionPreviewHeaderEl = null;
+        },
+
+        finalizeSessionTabTeardown() {
+            this.resetSessionListRender();
+            this.resetSessionPreviewMessageRender();
+            this.sessionPreviewPendingVisibleCount = 0;
+            this.clearSessionTimelineRefs();
+        },
+
+        teardownSessionTabRender() {
+            this.suspendSessionTabRender();
+            this.finalizeSessionTabTeardown();
+        },
+
+        prepareSessionTabRender() {
+            const ticket = ++this.sessionTabRenderTicket;
+            this.sessionListRenderEnabled = false;
+            this.sessionPreviewRenderEnabled = false;
+            this.resetSessionListRender();
+            this.resetSessionPreviewMessageRender();
+
+            this.scheduleAfterFrame(() => {
+                if (ticket !== this.sessionTabRenderTicket || this.mainTab !== 'sessions') {
+                    return;
+                }
+                this.sessionListRenderEnabled = true;
+                this.primeSessionListRender();
+
+                this.scheduleAfterFrame(() => {
+                    if (ticket !== this.sessionTabRenderTicket || this.mainTab !== 'sessions') {
+                        return;
+                    }
+                    this.sessionPreviewRenderEnabled = true;
+                    this.$nextTick(() => {
+                        if (ticket !== this.sessionTabRenderTicket || this.mainTab !== 'sessions') {
+                            return;
+                        }
+                        this.primeSessionPreviewMessageRender();
+                        this.updateSessionTimelineOffset();
+                        if (!this.sessionTimelineEnabled) {
+                            return;
+                        }
+                        const syncTask = () => {
+                            if (ticket !== this.sessionTabRenderTicket || this.mainTab !== 'sessions') {
+                                return;
+                            }
+                            this.scheduleSessionTimelineSync();
+                        };
+                        if (typeof this.scheduleAfterFrame === 'function') {
+                            this.scheduleAfterFrame(syncTask);
+                            return;
+                        }
+                        syncTask();
+                    });
+                });
+            });
+        }
+    };
+}