App.vue

<template>
  <!-- Sidebar -->
  <nav
    ref="sidebarRef"
    class="sidebar"
    :class="{
      docked: appStore.sidebarOpen,
      'sidebar--drawer': isSidebarDrawer,
    }"
    :inert="!appStore.sidebarOpen"
    :aria-hidden="appStore.sidebarOpen ? undefined : 'true'"
    :aria-label="t('chrome.primaryNav')"
    id="sidebar-nav"
  >
    <!-- Brand -->
    <div class="sidebar-brand">
      <div class="sidebar-brand-lockup">
        <img class="sidebar-brand-mark" :src="brandMarkUrl" alt="" aria-hidden="true" />
        <span class="sidebar-brand-text">OpenSquilla</span>
      </div>
      <button
        ref="sidebarDockToggleRef"
        class="sidebar-dock-toggle"
        :aria-label="t('chrome.collapseSidebar')"
        aria-controls="sidebar-nav"
        :aria-expanded="appStore.sidebarOpen"
        :aria-keyshortcuts="sidebarToggleAriaShortcut"
        aria-describedby="sidebar-toggle-tip-expanded"
        data-testid="sidebar-toggle-expanded"
        @click="toggleDock('sidebar-button')"
      >
        <Icon name="sidebar-visible" :size="18" />
        <span
          id="sidebar-toggle-tip-expanded"
          class="sidebar-toggle-tip sidebar-toggle-tip--sidebar"
          role="tooltip"
        >
          <span>{{ t('chrome.toggleSidebar') }}</span>
          <kbd v-if="sidebarToggleHint">{{ sidebarToggleHint }}</kbd>
        </span>
      </button>
    </div>

    <!-- Always-visible flat nav index. Bounded and self-scrolling under a
         short viewport so it never squeezes Recents, which owns the elastic
         space below; every destination stays a labelled text row. -->
    <div class="sidebar-section sidebar-core" role="navigation" :aria-label="t('chrome.controlNav')">
      <!-- New task leads the index: it opens a draft instantly against the
           default agent (no picker to interrupt the flow) and reads as a row
           rather than a boxed button so the sidebar keeps one rhythm. -->
      <button
        class="sidebar-new-session"
        :title="newChatHint ? `${t('chrome.newTaskTitle')} (${newChatHint})` : t('chrome.newTaskTitle')"
        @click="startNewChatInstant"
      >
        <Icon name="plus" :size="16" />
        <span class="sidebar-new-session__label">{{ t('chrome.newTask') }}</span>
        <!-- Badge tracks the configured binding and hides when the shortcut is
             disabled (Settings → Keyboard), so it never advertises a dead key. -->
        <kbd v-if="newChatHint" class="sidebar-kbd" aria-hidden="true">{{ newChatHint }}</kbd>
      </button>
      <!-- Overview / Skills & Channels / Cron, single-sourced from route
           metadata so the rail, mobile drawer, and palette never drift. -->
      <router-link
        v-for="item in workNav"
        :key="item.path"
        :to="item.path"
        class="sidebar-fn-item"
        :class="{ 'is-active': isPrimaryNavActive(item.path) }"
        :aria-current="isPrimaryNavActive(item.path) ? 'page' : undefined"
        @click="handleNavClick"
      >
        <Icon :name="item.icon" :size="16" />
        <span class="sidebar-fn-label">{{ item.title }}</span>
      </router-link>
    </div>

    <SidebarSetupBanner />

    <!-- Recent conversations (kept mounted while the file-tree view is
         active so scroll/selection state survives the swap) -->
    <SidebarConversations
      v-show="sidebarView === 'tasks'"
      :sections="sidebarSections"
      :session-order="sidebarSessionOrder"
      :error="sessionListError"
      :loading="isLoading"
      :loading-more="isLoadingMore"
      :load-more-error="loadMoreError"
      :has-more="hasMore"
      :current-key="sidebarCurrentKey"
      :contract-debug-enabled="contractDebugEnabled"
      :search-hint="commandPaletteHint"
      :can-manage-projects="rpcStore.canManageProjectWorkspaces"
      :can-create-projects="rpcStore.canChooseProject"
      @select="switchToSession"
      @refresh="loadSidebarData"
      @load-more="loadMoreSessions"
      @rename="onRenameSession"
      @delete="onDeleteSession"
      @bulk-delete="onBulkDeleteSessions"
      @reorder="onReorderSidebarSession"
      @session-pin="onPinSidebarSession"
      @new-chat="startNewChatInstant"
      @new-project="openProjectCreator"
      @new-project-task="startProjectTask"
      @project-pin="onProjectPin"
      @project-edit="openProjectEditor"
      @view-workspace-files="viewWorkspaceFiles"
      @project-delete-history="onProjectDeleteHistory"
      @project-remove="onProjectRemove"
      @search="openCommandPalette"
    />

    <!-- Workspace file tree (swaps the conversation list in place) -->
    <SidebarFileTree
      v-if="fileTreeWorkspace"
      :workspace="fileTreeWorkspace"
      @close="closeWorkspaceFiles"
      @preview="onFileTreePreview"
      @attach="onFileTreeAttach"
    />

    <!-- Fixed footer: settings + connection state -->
    <div class="sidebar-foot">
      <button
        type="button"
        class="sidebar-fn-item"
        data-icon="settings"
        @click="openSettings"
      >
        <Icon name="settings" :size="16" />
        <span class="sidebar-fn-label">{{ t('chrome.settings') }}</span>
      </button>
    </div>
  </nav>

  <SidebarResizer
    v-if="appStore.sidebarOpen && isSidebarResizable"
    ref="sidebarResizerRef"
    :enabled="appStore.sidebarOpen && isSidebarResizable"
    :width="sidebarEffectiveWidth"
    :min="SIDEBAR_MIN_WIDTH"
    :max="sidebarDynamicMaximum"
    :preference="appStore.sidebarWidthPreference.width"
    :preference-source="appStore.sidebarWidthPreference.source"
    @resize-start="handleSidebarResizeStart"
    @preview="applySidebarPreview"
    @commit="commitSidebarWidth"
    @reset="resetSidebarWidth"
    @collapse="collapseSidebarFromResize"
    @cancel="applySidebarPreview"
    @resize-end="handleSidebarResizeEnd"
  />

  <!-- Drawer scrim is driven by the same runtime mode as JS focus/Escape logic. -->
  <div
    v-if="appStore.sidebarOpen && isSidebarDrawer"
    class="sidebar-scrim"
    role="presentation"
    aria-hidden="true"
    @click="closeSidebarDrawer"
  />

  <CommandPalette
    v-model:open="commandPaletteOpen"
    :recents="sidebarSections"
    @new-chat="onPaletteNewChat"
    @open-settings="onPaletteOpenSettings"
    @toggle-theme="onPaletteToggleTheme"
    @select-session="onPaletteSelectSession"
  />

  <!-- Main content -->
  <div
    id="app-main"
    class="main"
    :inert="appStore.sidebarOpen && isSidebarDrawer"
    :class="{
      docked: appStore.sidebarOpen,
      'main--sidebar-drawer': isSidebarDrawer,
      'main--sidebar-compact': sidebarLayoutMode === 'compact',
      'main--chat': isChatRoute,
      'main--chat-sidebar-collapsed': isChatRoute && !appStore.sidebarOpen,
      'main--tabbar-hidden': mobileKeyboardOpen,
    }"
  >
    <header ref="topbarRef" class="topbar" :class="{ 'topbar--chat': isChatRoute }">
      <div class="topbar-left">
        <!-- Sidebar toggle — visible when sidebar is collapsed -->
        <button
          v-show="!appStore.sidebarOpen"
          ref="topbarSidebarToggleRef"
          class="sidebar-dock-toggle topbar-toggle"
          :aria-label="t('chrome.expandSidebar')"
          aria-controls="sidebar-nav"
          :aria-expanded="appStore.sidebarOpen"
          :aria-keyshortcuts="sidebarToggleAriaShortcut"
          aria-describedby="sidebar-toggle-tip-collapsed"
          data-testid="sidebar-toggle-collapsed"
          @click="toggleDock('topbar-button')"
        >
          <Icon name="sidebar-hidden" :size="18" />
          <span id="sidebar-toggle-tip-collapsed" class="sidebar-toggle-tip" role="tooltip">
            <span>{{ t('chrome.toggleSidebar') }}</span>
            <kbd v-if="sidebarToggleHint">{{ sidebarToggleHint }}</kbd>
          </span>
        </button>
      </div>
      <!-- App owns the route header and its component tree. Chat only publishes
           reactive state and commands through the typed route-header bridge. -->
      <div
        id="app-route-header"
        class="topbar-route-header"
        data-testid="route-header-host"
      >
        <ChatHeaderActions
          v-if="isChatRoute"
          v-show="chatRouteHeaderVisible"
          ref="chatHeaderActionsRef"
          :title="chatRouteHeaderTitle"
          :copy-state="chatRouteHeaderCopyState"
          :copy-icon="chatRouteHeaderCopyIcon"
          :copy-live-text="chatRouteHeaderCopyLiveText"
          :deliverable-count="chatRouteHeaderDeliverableCount"
          :has-new-deliverable="chatRouteHeaderHasNewDeliverable"
          :share-mode="chatRouteHeaderShareMode"
          :shareable-message-count="chatRouteHeaderShareableMessageCount"
          @open-deliverables="chatRouteHeader.invoke('openDeliverables')"
          @start-share="chatRouteHeader.invoke('startShare')"
          @copy-session-key="chatRouteHeader.invoke('copySessionKey')"
        />
      </div>
      <div
        class="topbar-right"
        :class="{ 'topbar-right--attention': appStore.approvalCount > 0 }"
      >
        <ChatSystemStatus
          v-if="isChatRoute"
          :layout="systemHeaderLayout"
          :connection-state="effectiveConnectionState"
          :connection-label="connectionStateLabel"
          :approval-count="appStore.approvalCount"
          :can-manage-connection="webConfigEnabled"
          @open-connection="openConnectionSettings"
          @open-approval="openBlockedApprovalSession"
          @open-update="openDesktopRuntimeSettings"
        />
        <template v-else>
          <button
            v-if="appStore.approvalCount > 0"
            class="approval-inline"
            @click="openBlockedApprovalSession"
            :title="t('chrome.openBlockedSession')"
          >
            {{ t('chrome.approvalRequired') }}
          </button>
          <button
            v-if="webConfigEnabled"
            type="button"
            class="conn-pill conn-pill--link"
            :class="rpcStore.state"
            :title="t('chrome.connectionTitle', { state: connectionStateLabel })"
            :aria-label="t('chrome.manageConnection')"
            @click="openConnectionSettings"
          >{{ connectionStateLabel }}</button>
          <span v-else class="conn-pill" :class="rpcStore.state">{{ connectionStateLabel }}</span>
          <DesktopUpdateIndicator />
        </template>
        <!-- Opt-in (Settings → Appearance or the command palette); off by
             default so the topbar stays music-free until asked for. -->
        <BgmControl
          v-if="bgmEnabled"
          :presentation="isChatRoute && systemHeaderLayout !== 'wide' ? 'pause-only' : 'full'"
        />
        <LanguageSwitcher />
        <div class="theme-menu-wrap">
          <button
            ref="themeButtonRef"
            class="btn btn--icon btn--ghost"
            :title="t('chrome.theme')"
            :aria-label="t('chrome.theme')"
            aria-haspopup="menu"
            :aria-expanded="themeMenuOpen"
            @click.stop="themeMenuOpen = !themeMenuOpen"
          >
            <Icon :name="themeIconName" :size="16" />
          </button>
          <div
            v-if="themeMenuOpen"
            class="theme-menu"
            role="menu"
            :aria-label="t('chrome.theme')"
            data-chat-topbar-popover="theme"
          >
            <button
              v-for="opt in themeOptions"
              :key="opt.mode"
              type="button"
              class="theme-menu__item"
              role="menuitemradio"
              :aria-checked="appStore.theme === opt.mode"
              @click="pickTheme(opt.mode)"
            >
              <Icon :name="opt.icon" :size="15" />
              <span>{{ opt.labelKey ? t(opt.labelKey) : opt.label }}</span>
              <Icon v-if="appStore.theme === opt.mode" class="theme-menu__check" name="check" :size="14" />
            </button>
            <button
              type="button"
              class="theme-menu__item theme-menu__item--more"
              role="menuitem"
              :title="t('chrome.moreThemesHint')"
              @click="openMoreThemes"
            >
              <Icon name="chevronRight" :size="15" />
              <span>{{ t('chrome.moreThemes') }}</span>
              <Icon v-if="isCustomThemeActive" class="theme-menu__check" name="check" :size="14" />
            </button>
          </div>
        </div>
      </div>
    </header>
    <div class="app-workspace">
      <main
        class="content"
        :class="{ 'content--chat': isChatRoute }"
        :data-skin="skinId || undefined"
        :data-skin-variant="variants || undefined"
        id="content"
      >
        <ErrorBoundary @error-captured="clearChatRouteHeaderAfterError">
          <router-view v-slot="{ Component, route }">
            <!-- out-in: one view in the DOM at a time, so pages never overlap (no
                 double-exposure, and never two composers/textareas mid-swap).
                 Console views are kept-alive, so the entering page is instant —
                 out-in no longer incurs the old remount/fetch "dead gap". -->
            <template v-if="route.meta.routeTransition === 'none'">
              <KeepAlive v-if="route.meta.keepAlive" :max="12">
                <component :is="Component" :key="route.meta.viewKey || route.name" />
              </KeepAlive>
              <component v-else :is="Component" :key="route.meta.viewKey || route.name" />
            </template>
            <Transition v-else name="route-fade" mode="out-in">
              <KeepAlive v-if="route.meta.keepAlive" :max="12">
                <component :is="Component" :key="route.meta.viewKey || route.name" />
              </KeepAlive>
              <component v-else :is="Component" :key="route.meta.viewKey || route.name" />
            </Transition>
          </router-view>
        </ErrorBoundary>
      </main>
      <AppWorkbench
        :enabled="appStore.features.artifactWorkbench === true"
        :workbench-resources-enabled="(
          appStore.features.documentWorkbenchResources === true
          || appStore.features.artifactPromptAnnotations === true
        )"
        :prompt-annotations-enabled="appStore.features.artifactPromptAnnotations === true"
        :route-active="isChatRoute"
        :session-id="currentSessionKey"
        :modal-blocked="workbenchModalBlocked"
      />
      <ArtifactImageLightbox />
    </div>
  </div>

  <!-- Mobile bottom tab bar (<=768px only; hides while the keyboard is up):
       Chat, Sessions, Overview, then More for the flat drawer containing
       Sessions / Overview / Skills & Channels / Cron and Settings. -->
  <nav
    class="mobile-tabbar"
    :class="{ 'is-keyboard-open': mobileKeyboardOpen }"
    :inert="appStore.sidebarOpen && isSidebarDrawer"
    :aria-label="t('chrome.primaryMobile')"
  >
    <router-link
      to="/chat"
      class="mobile-tab"
      :class="{ 'is-active': isNavActive('/chat') }"
      @click="handleNavClick"
    >
      <Icon name="chat" :size="20" />
      <span class="mobile-tab__label">{{ t('nav.chat') }}</span>
    </router-link>
    <router-link
      to="/sessions"
      class="mobile-tab"
      :class="{ 'is-active': isNavActive('/sessions') }"
      @click="handleNavClick"
    >
      <Icon name="sessions" :size="20" />
      <span class="mobile-tab__label">{{ t('nav.sessions') }}</span>
      <span v-if="appStore.approvalCount > 0" class="mobile-tab__badge">{{ appStore.approvalCount }}</span>
    </router-link>
    <router-link
      to="/overview"
      class="mobile-tab"
      :class="{ 'is-active': isOverviewNavActive }"
      @click="handleNavClick"
    >
      <Icon name="home" :size="20" />
      <span class="mobile-tab__label">{{ t('nav.overview') }}</span>
    </router-link>
    <button
      type="button"
      class="mobile-tab"
      :class="{ 'is-active': isMobileMoreActive }"
      @click="openSidebarDrawer"
    >
      <Icon name="menu" :size="20" />
      <span class="mobile-tab__label">{{ t('chrome.more') }}</span>
    </button>
  </nav>

  <ToastHost />

  <ConfirmModal />

  <ProjectWorkspaceCreateDialog
    v-if="rpcStore.canChooseProject"
    :open="projectCreateOpen && !projectCreateConfirming && !projectSourcePickerOpen"
    :name="projectCreateName"
    :source-path="projectCreateSourcePath"
    :busy="projectCreateBusy"
    :source-picking="projectCreateSourcePicking"
    @update:name="projectCreateName = $event"
    @choose-source="chooseProjectSourceDirectory"
    @close="closeProjectCreator"
    @create="createProjectWorkspace"
  />

  <ProjectWorkspacePickerDialog
    v-if="rpcStore.canChooseProject"
    :open="projectCreateOpen && projectSourcePickerOpen"
    :enabled="rpcStore.canChooseProject"
    :session-key="currentSessionKey || 'agent:main:webchat:workspace-picker'"
    :initial-path="projectCreateSourcePath"
    @close="projectSourcePickerOpen = false"
    @choose="onProjectSourcePathChosen"
  />

  <ProjectWorkspaceEditDialog
    v-if="rpcStore.canManageProjectWorkspaces"
    :open="Boolean(editingProject)"
    :initial-name="editingProject?.name || ''"
    :path="editingProject?.path || ''"
    @close="editingProjectId = ''"
    @save="onProjectRename"
  />

  <UpdateBanner />

  <!-- Single app-wide announcer for the pending-approval count. The nav badge
       and topbar pill stay silent (no double-announce); this region carries the
       only spoken update when the count changes. -->
  <p class="app-approval-live" aria-live="polite" role="status">{{ approvalAnnouncement }}</p>
</template>

<script setup lang="ts">
import { computed, inject, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { routeTitle } from './router'
import { getPlatform } from '@/platform'
import { useAppStore, type ThemeMode, type PendingApproval } from './stores/app'
import { useRpcStore } from './stores/rpc'
import { SESSION_DIRECTORY_KEY } from './modules/sessionDirectory'
import { SESSION_DIRECTORY_CHANGES_KEY } from './modules/sessionDirectoryChanges'
import { SESSION_LIFECYCLE_KEY } from './modules/sessionLifecycle'
import { APPROVAL_CENTER_KEY, type ApprovalEvent, type ApprovalItem, type ApprovalSubscription } from './modules/approvalCenter'
import {
  arrangeSidebarSections,
  useSessions,
  type SessionItem,
  type SidebarSection,
  type SidebarSectionRow,
} from './composables/useSessions'
import Icon from './components/Icon.vue'
import ErrorBoundary from './components/ErrorBoundary.vue'
import ToastHost from './components/ToastHost.vue'
import ConfirmModal from './components/ConfirmModal.vue'
import ProjectWorkspaceCreateDialog from './components/ProjectWorkspaceCreateDialog.vue'
import ProjectWorkspaceEditDialog from './components/ProjectWorkspaceEditDialog.vue'
import ProjectWorkspacePickerDialog from './components/ProjectWorkspacePickerDialog.vue'
import UpdateBanner from './components/UpdateBanner.vue'
import DesktopUpdateIndicator from './components/DesktopUpdateIndicator.vue'
import ChatSystemStatus from './components/chat/ChatSystemStatus.vue'
import ChatHeaderActions from './components/chat/ChatHeaderActions.vue'
import SidebarConversations from './components/SidebarConversations.vue'
import SidebarFileTree from './components/SidebarFileTree.vue'
import type { FileTreeWorkspace } from './stores/fileTree'
import { useWorkbenchStore } from './workbench/store'
import { createWorkspaceFileWorkbenchItem } from './workbench/workspaceFileItems'
import { requestWorkspaceFileAttach } from './workbench/workspaceFileAttachEvent'
import SidebarSetupBanner from './components/SidebarSetupBanner.vue'
import SidebarResizer from './components/SidebarResizer.vue'
import CommandPalette from './components/CommandPalette.vue'
import LanguageSwitcher from './components/LanguageSwitcher.vue'
import BgmControl from './components/BgmControl.vue'
import ArtifactImageLightbox from './components/chat/ArtifactImageLightbox.vue'
import AppWorkbench from './components/workbench/AppWorkbench.vue'
import { useBgm } from './composables/useBgm'
import { useDesktopUpdate } from './composables/useDesktopUpdate'
import { useSidebarLayout } from './composables/useSidebarLayout'
import { useSystemHeaderLayout } from './composables/useSystemHeaderLayout'
import { useDocumentEvent } from './composables/useDocumentEvent'
import { hasOpenDialogLayer, useDialogLayer } from './composables/useDialogA11y'
import {
  provideChatTopbarPopoverCoordinator,
  useChatTopbarPopoverCoordination,
} from './composables/useChatTopbarPopoverCoordinator'
import { provideArtifactImageLightbox } from './composables/chat/useArtifactImageLightbox'
import {
  provideChatRouteHeaderBridge,
  type ChatRouteHeaderHostHandle,
} from './composables/chat/useChatRouteHeaderBridge'
import { useAgentOptions } from './composables/useAgentOptions'
import { useSessionTaskAttention } from './composables/useSessionTaskAttention'
import { useToasts } from './composables/useToasts'
import { useConfirm } from './composables/useConfirm'
import { useProjectWorkspaces } from './composables/useProjectWorkspaces'
import { useFreshTaskDraft } from './composables/useFreshTaskDraft'
import { useNavigation } from './app/useNavigation'
import { useSurfaceSkin } from './themes/useSurfaceSkin'
import { themePickerOptions, getManifest } from './themes/registry'
import { normalizeAgentId } from './utils/chat/sessionKeys'
import { effectiveChatConnectionState } from './utils/chat/chatConnectionState'
import { reminderToastPreview } from './utils/cron/notifications'
import { installSessionNavigationDiagConsole, recordSessionNavigationDiag } from './utils/chat/sessionNavigationDiag'
import { isMacPlatform } from './utils/browser'
import { useShortcutsStore } from './stores/shortcuts'
import { bindingMatches, formatBinding } from './utils/keychord'
import { SIDEBAR_MIN_WIDTH, type SidebarWidthPreference } from './utils/sidebarLayout'
import { sidebarSessionOrderKeys } from './utils/sidebarDisplayProjection'
import {
  dispatchLocalSessionsDeleted,
  localSessionsDeletedDetail,
  LOCAL_SESSIONS_DELETED_EVENT,
} from './utils/sessionSync'
import { activeTaskWasDeletedWithProjectHistory } from './utils/projectHistory'
import { createCoalescedRefresh } from './utils/coalescedRefresh'
import {
  optionalSessionRpcAllowed,
  optionalSessionRpcCallOptions,
} from './composables/chat/sessionBootstrapAdmission'
import { markCronFinishNotified } from './utils/cron/notifications'
import {
  buildChatSessionTitles,
  isSensibleChatTitle,
  provideChatSessionTitles,
} from './composables/chat/useChatSessionTitles'

const appStore = useAppStore()
const rpcStore = useRpcStore()
const injectedSessionDirectory = inject(SESSION_DIRECTORY_KEY)
if (!injectedSessionDirectory) throw new Error('SessionDirectory was not provided')
const sessionDirectory = injectedSessionDirectory
const injectedSessionDirectoryChanges = inject(SESSION_DIRECTORY_CHANGES_KEY)
if (!injectedSessionDirectoryChanges) throw new Error('SessionDirectoryChanges was not provided')
const sessionDirectoryChanges = injectedSessionDirectoryChanges
const injectedSessionLifecycle = inject(SESSION_LIFECYCLE_KEY)
if (!injectedSessionLifecycle) throw new Error('SessionLifecycle was not provided')
const sessionLifecycle = injectedSessionLifecycle
const injectedApprovalCenter = inject(APPROVAL_CENTER_KEY)
if (!injectedApprovalCenter) throw new Error('ApprovalCenter was not provided')
const approvalCenter = injectedApprovalCenter
const workbenchStore = useWorkbenchStore()
const shortcutsStore = useShortcutsStore()
const artifactImageLightbox = provideArtifactImageLightbox()
const { t } = useI18n()
const $route = useRoute()
// Every transient control in the global topbar shares one active owner. The
// controls render on chat and non-chat routes, so route-scoped coordination
// would allow sibling menus such as Language and Theme to overlap.
const isChatRoute = computed(() => $route.path === '/chat' || $route.path === '/chat/new')
const topbarPopoverCoordinationEnabled = ref(true)
const topbarPopoverCoordinator = provideChatTopbarPopoverCoordinator(
  topbarPopoverCoordinationEnabled,
)
const chatRouteHeader = provideChatRouteHeaderBridge()
const {
  visible: chatRouteHeaderVisible,
  title: chatRouteHeaderTitle,
  copyState: chatRouteHeaderCopyState,
  copyIcon: chatRouteHeaderCopyIcon,
  copyLiveText: chatRouteHeaderCopyLiveText,
  deliverableCount: chatRouteHeaderDeliverableCount,
  hasNewDeliverable: chatRouteHeaderHasNewDeliverable,
  shareMode: chatRouteHeaderShareMode,
  shareableMessageCount: chatRouteHeaderShareableMessageCount,
} = chatRouteHeader.model
const chatHeaderActionsRef = ref<ChatRouteHeaderHostHandle | null>(null)
watch(chatHeaderActionsRef, host => chatRouteHeader.setHost(host), { flush: 'sync' })
watch(isChatRoute, active => {
  if (!active) chatRouteHeader.clear()
}, { flush: 'sync' })

function clearChatRouteHeaderAfterError() {
  chatRouteHeader.clear()
}
const sidebarRef = ref<HTMLElement | null>(null)
const sidebarDockToggleRef = ref<HTMLButtonElement | null>(null)
const topbarSidebarToggleRef = ref<HTMLButtonElement | null>(null)
const topbarRef = ref<HTMLElement | null>(null)
type SidebarResizerHandle = { cancel: () => boolean }
const sidebarResizerRef = ref<SidebarResizerHandle | null>(null)

const {
  mode: sidebarLayoutMode,
  dynamicMax: sidebarDynamicMaximum,
  effectiveWidth: sidebarEffectiveWidth,
} = useSidebarLayout()
const isSidebarDrawer = computed(() => sidebarLayoutMode.value === 'drawer')
const isSidebarResizable = computed(() => sidebarLayoutMode.value === 'resizable')
const sidebarResizeActive = ref(false)

function setSidebarCssWidth(width: number) {
  if (!Number.isFinite(width)) return
  document.getElementById('app')?.style.setProperty('--sidebar-width', `${Math.round(width)}px`)
}

// Persisted/pre-set changes are infrequent. Pointer previews bypass App's
// reactive tree and write the same root custom property directly once per rAF.
watch(sidebarEffectiveWidth, width => {
  if (!sidebarResizeActive.value) setSidebarCssWidth(width)
}, { immediate: true })

const APP_SESSION_SYNC_SOURCE = 'app-sidebar'

// Localized connection-state label for the topbar pill and its tooltip. The
// store state ('connected' | 'connecting' | 'disconnected') is a stable key, not
// display text; CSS uppercases the result (a no-op for CJK scripts).
const effectiveConnectionState = computed(() => effectiveChatConnectionState(
  rpcStore.state,
  appStore.chatLivePhase,
  isChatRoute.value,
))
const connectionStateLabel = computed(() => t(
  `chrome.connectionState.${effectiveConnectionState.value}`,
))
const router = useRouter()

// afterEach only fires on navigation, so a same-route language switch needs an
// explicit re-localize of the tab title.
watch(() => appStore.locale, () => {
  document.title = `${routeTitle($route)} — OpenSquilla`
})
const {
  allSessions,
  sessionListError,
  isLoading,
  isLoadingMore,
  loadMoreError,
  hasMore,
  loadSessions,
  loadMoreSessions,
} = useSessions(sessionDirectory)
const { bottomRoutes, workNav } = useNavigation()
// Axis-B: the active expressive skin for the routed content area (meta.skin).
const { skinId, variants } = useSurfaceSkin()
const { pushToast } = useToasts()
const { confirm } = useConfirm()
const projectWorkspaces = useProjectWorkspaces()
const freshTaskDraft = useFreshTaskDraft()
const projectCreateOpen = ref(false)
const projectCreateName = ref('')
const projectCreateSourcePath = ref('')
const projectCreateBusy = ref(false)
const projectCreateSourcePicking = ref(false)
const projectCreateConfirming = ref(false)
const projectSourcePickerOpen = ref(false)
const editingProjectId = ref('')
const editingProject = computed(() =>
  editingProjectId.value
    ? projectWorkspaces.byId.value.get(editingProjectId.value) || null
    : null,
)
watch(
  () => rpcStore.canManageProjectWorkspaces,
  allowed => {
    if (allowed) {
      scheduleSessionRefresh()
      return
    }
    projectCreateOpen.value = false
    projectCreateName.value = ''
    projectCreateSourcePath.value = ''
    projectCreateBusy.value = false
    projectCreateSourcePicking.value = false
    projectCreateConfirming.value = false
    projectSourcePickerOpen.value = false
    editingProjectId.value = ''
  },
)
// Feature-gated topbar music control; the singleton `enabled` ref is written by
// Settings → Appearance and the command palette.
const { enabled: bgmEnabled } = useBgm()
const desktopUpdate = useDesktopUpdate()
const webConfigEnabled = getPlatform().capabilities.hasWebConfig

interface AppCronRunFinishedPayload {
  jobId?: string
  jobName?: string
  payloadKind?: string
  runId?: string
  sessionKey?: string
  summary?: string
  success?: boolean
}

let unsubscribeCronFinished: (() => void) | null = null

function handleCronRunFinished(payload: unknown) {
  if (!payload || typeof payload !== 'object') return
  const event = payload as AppCronRunFinishedPayload
  const runId = typeof event.runId === 'string' ? event.runId : ''
  const jobName = event.jobName?.trim() || t('cronSkills.jobs.unnamedTask')
  markCronFinishNotified(runId)
  if (event.success === false) {
    pushToast(t('cronSkills.jobs.toastBackgroundFailed', { name: jobName }), {
      tone: 'danger',
      duration: 9_000,
    })
    return
  }
  const reminder = event.payloadKind === 'reminder'
    ? reminderToastPreview(event.summary)
    : ''
  if (reminder) {
    const sessionKey = event.sessionKey?.trim() || ''
    pushToast(t('cronSkills.jobs.toastBackgroundReminder', {
      name: jobName,
      reminder,
    }), {
      tone: 'ok',
      duration: 10_000,
      action: sessionKey
        ? {
            label: t('cronSkills.jobs.toastViewReminder'),
            onClick: () => switchToSession(sessionKey, 'cron.reminder_toast'),
          }
        : undefined,
    })
    return
  }
  pushToast(t('cronSkills.jobs.toastBackgroundComplete', { name: jobName }), {
    tone: 'ok',
    duration: 7_000,
  })
}

installSessionNavigationDiagConsole()

// Shared agents.list state + fetch (singleton) for sidebar session metadata.
const { agents, loadAgents } = useAgentOptions(optionalSessionRpcCallOptions)
const mobileKeyboardOpen = ref(false)
const commandPaletteOpen = ref(false)
const localChatSessions = ref<Record<string, { effectiveAgentId: string; title: string; updatedAt: number }>>({})
// Pending optimistic renames, keyed by session key; cleared after the next list
// reload returns the backend's canonical title.
const renameOverrides = ref<Record<string, string>>({})

const chatSessionTitles = computed(() => (
  buildChatSessionTitles(allSessions.value, renameOverrides.value)
))
provideChatSessionTitles(chatSessionTitles)

const brandMarkUrl = computed(() => {
  if (import.meta.env.DEV) return '/opensquilla-mark.png'
  const base = document.getElementById('opensquilla-data')?.dataset.basePath || '/control'
  return `${base.replace(/\/$/, '')}/static/dist/opensquilla-mark.png`
})

// Display chords track the configurable bindings so the rail hint, the New chat
// badge, and the palette never drift from what the handler actually honours. A
// disabled shortcut yields an empty hint (the New chat badge then hides).
const isMac = isMacPlatform()
const commandPaletteHint = computed(() =>
  formatBinding(shortcutsStore.effectiveBinding('command-palette'), isMac))
const newChatHint = computed(() =>
  formatBinding(shortcutsStore.effectiveBinding('new-chat'), isMac))
const sidebarToggleBinding = computed(() => shortcutsStore.effectiveBinding('toggle-sidebar'))
const sidebarToggleHint = computed(() => formatBinding(sidebarToggleBinding.value, isMac))
const sidebarToggleAriaShortcut = computed(() => {
  const binding = sidebarToggleBinding.value
  if (!binding) return undefined
  const parts: string[] = []
  if (binding.primary) parts.push(isMac ? 'Meta' : 'Control')
  if (binding.alt) parts.push('Alt')
  if (binding.shift) parts.push('Shift')
  parts.push(binding.key.length === 1 ? binding.key.toUpperCase() : binding.key)
  return parts.join('+')
})

const themeIconName = computed(() => {
  if (appStore.theme === 'system') return 'monitor'
  const active = getManifest(appStore.resolvedTheme)
  return active?.icon ?? (appStore.resolvedTheme === 'dark' ? 'moon' : 'sun')
})

const themeMenuOpen = ref(false)
useChatTopbarPopoverCoordination(
  'theme',
  themeMenuOpen,
  topbarPopoverCoordinator,
)
const themeMenuIsTopmost = useDialogLayer(themeMenuOpen)
const themeButtonRef = ref<HTMLButtonElement | null>(null)

// The compact topbar menu deliberately lists only the basic modes (Light / Dark
// / System). Custom value themes live in Settings → Appearance, reached via the
// "More themes…" action below — see themePickerOptions({ scope }) in registry.ts.
const themeOptions = themePickerOptions({ scope: 'basic' })

// A custom value theme (chosen in Settings) is active but not shown in the basic
// topbar menu; mark "More themes…" instead of leaving no selection indicator.
const isCustomThemeActive = computed(
  () => !themeOptions.some((o) => o.mode === appStore.theme),
)

function pickTheme(mode: ThemeMode) {
  appStore.setTheme(mode)
  themeMenuOpen.value = false
  themeButtonRef.value?.focus()
}

// "More themes…": the full theme list lives in Settings → Appearance. Close the
// menu and deep-link straight to that section.
function openMoreThemes() {
  themeMenuOpen.value = false
  handleNavClick()
  router.push('/settings/interface')
}

useDocumentEvent('click', (e) => {
  if (!themeMenuOpen.value) return
  const wrap = themeButtonRef.value?.closest('.theme-menu-wrap')
  if (wrap && e.target instanceof Node && !wrap.contains(e.target)) {
    themeMenuOpen.value = false
  }
})

// Current session key from ChatView via URL
const currentSessionKey = computed(() => {
  return ($route.query.session as string) || ''
})
const sessionTaskAttention = useSessionTaskAttention()

function currentSessionIsVisible(): boolean {
  return (
    $route.path === '/chat'
    && document.visibilityState === 'visible'
    && document.hasFocus()
  )
}

function markCurrentSessionReadIfVisible() {
  const sessionKey = currentSessionKey.value
  if (sessionKey && currentSessionIsVisible()) {
    sessionTaskAttention.markRead(sessionKey)
  }
}

watch(currentSessionKey, markCurrentSessionReadIfVisible, {
  flush: 'sync',
  immediate: true,
})

// Chat layout applies to both the session view and the draft route.
const systemHeaderPressureCount = computed(() => (
  Number(effectiveConnectionState.value !== 'connected')
  + Number(appStore.approvalCount > 0)
  + Number(desktopUpdate.visible.value)
  + Number(bgmEnabled.value)
))
const systemHeaderLayout = useSystemHeaderLayout({
  target: topbarRef,
  active: isChatRoute,
  pressureCount: systemHeaderPressureCount,
})
const activeProjectDraftId = computed(() =>
  $route.path === '/chat/new' ? String($route.query.project || '') : '',
)
const activeProjectDraftKey = computed(() => {
  const workspaceId = activeProjectDraftId.value
  if (!workspaceId) return ''
  const request = freshTaskDraft.request.value
  const requestId = request?.workspaceId === workspaceId ? request.id : 0
  return `draft:project:${workspaceId}:${requestId}`
})
const sidebarCurrentKey = computed(() =>
  currentSessionKey.value || activeProjectDraftKey.value,
)

watch(
  [
    currentSessionKey,
    isChatRoute,
    () => artifactImageLightbox.request.value?.sessionKey || '',
  ],
  ([sessionKey, chatRouteActive]) => {
    const request = artifactImageLightbox.request.value
    if (request && (!chatRouteActive || request.sessionKey !== sessionKey)) {
      artifactImageLightbox.close()
    }
  },
  { flush: 'sync' },
)

// The Settings overlay (route-mounted dialog) is open on these routes. It owns
// its own Escape/focus, so App-level keyboard shortcuts defer to it. Both web
// and desktop mount the same overlay now (webConfigEnabled is true on both).
const settingsOverlayOpen = computed(() =>
  webConfigEnabled && ($route.name === 'settings' || $route.name === 'settings-section'))
const workbenchModalBlocked = computed(() =>
  commandPaletteOpen.value
  || themeMenuOpen.value
  || settingsOverlayOpen.value
  || (appStore.sidebarOpen && isSidebarDrawer.value))

const contractDebugEnabled = computed(() => appStore.features.contractDebug === true)

function isNavActive(path: string): boolean {
  if (path === '/chat') return isChatRoute.value
  return $route.path === path
}

// Overview owns the Status/Usage hub plus its diagnostic Logs route, while
// Skills fronts the Skills/Channels hub. Keep those active families disjoint so
// diagnostic routes never light an unrelated primary destination.
const OVERVIEW_NAV_PATHS = new Set(['/overview', '/usage', '/logs'])
const SKILLS_CHANNELS_HUB_PATHS = new Set(['/skills', '/channels'])
const MOBILE_MORE_PATHS = new Set(['/skills', '/channels', '/cron'])
const isOverviewNavActive = computed(() => OVERVIEW_NAV_PATHS.has($route.path))
const isSkillsChannelsHubActive = computed(() => SKILLS_CHANNELS_HUB_PATHS.has($route.path))
const isMobileMoreActive = computed(() =>
  appStore.sidebarOpen || MOBILE_MORE_PATHS.has($route.path))

function isPrimaryNavActive(path: string): boolean {
  if (path === '/usage') return isOverviewNavActive.value
  if (path === '/skills') return isSkillsChannelsHubActive.value
  return isNavActive(path)
}

function agentDisplayName(agentId: string): string {
  const agent = agents.value.find(a => a.id === agentId)
  return agent?.name || (agentId === 'main' ? 'Main Agent' : agentId)
}

// Raw session keys (agent:…:…) and bare UUIDs must never render in the sidebar.
function sidebarConversationTitle(item: SessionItem): string {
  for (const candidate of [item.title, item.subtitle, item.groupLabel]) {
    const text = String(candidate || '').trim()
    if (isSensibleChatTitle(text)) return text
  }
  return t('shared.sidebar.untitledTask')
}

// A draft / current-session row the backend list does not yet carry. The
// sidebar arranger reads only a handful of fields off the SessionItem, so a
// synthetic chat row carries canonical defaults for the remaining fields.
function syntheticChatSession(
  key: string,
  effectiveAgentId: string,
  title: string,
  updatedAt: number,
  project?: {
    id: string
    name: string
    path: string
    provisional?: boolean
  },
): SessionItem {
  return {
    key,
    title,
    subtitle: '',
    groupLabel: normalizeAgentId(effectiveAgentId),
    workspace: project?.path,
    workspaceId: project?.id,
    workspaceLabel: project?.name,
    workspaceDisplayPath: project?.path,
    effectiveAgentId,
    sessionKind: 'chat',
    surface: 'webchat',
    conversationKind: 'direct',
    status: 'idle',
    runStatus: 'idle',
    runLabel: 'Idle',
    messageCount: null,
    updatedAt,
    model: '',
    parent: null,
    provisional: project?.provisional,
    forkedFromParent: false,
    hasContractGaps: false,
  }
}

function optimisticProjectForSession(key: string) {
  const workspaceId = freshTaskDraft.materializedWorkspaceBySession.value[key]
  return workspaceId ? projectWorkspaces.byId.value.get(workspaceId) || null : null
}

function withOptimisticProjectBinding(item: SessionItem): SessionItem {
  if (item.workspaceId) return item
  const project = optimisticProjectForSession(item.key)
  if (!project) return item
  return {
    ...item,
    workspace: project.path,
    workspaceId: project.id,
    workspaceLabel: project.name,
    workspaceDisplayPath: project.path,
  }
}

// Sessions to arrange into the sidebar: the backend list plus the local draft
// and the current chat session when the list does not carry them yet (both
// injected as Chats so a brand-new conversation appears immediately).
const sidebarSessionItems = computed((): SessionItem[] => {
  const items: SessionItem[] = []
  const seen = new Set<string>()
  for (const item of allSessions.value) {
    if (!item.key || item.key === 'unknown') continue
    seen.add(item.key)
    items.push(withOptimisticProjectBinding(item))
  }
  for (const [key, local] of Object.entries(localChatSessions.value)) {
    if (seen.has(key)) continue
    seen.add(key)
    const project = optimisticProjectForSession(key) || undefined
    items.push(syntheticChatSession(
      key,
      local.effectiveAgentId,
      local.title || t('chrome.newChat'),
      local.updatedAt,
      project,
    ))
  }
  const draftWorkspaceId = activeProjectDraftId.value
  const draftKey = activeProjectDraftKey.value
  const draftProject = draftWorkspaceId
    ? projectWorkspaces.byId.value.get(draftWorkspaceId)
    : null
  if (draftKey && draftProject && !seen.has(draftKey)) {
    seen.add(draftKey)
    items.push(syntheticChatSession(
      draftKey,
      'main',
      t('chrome.newTask'),
      Date.now(),
      {
        id: draftProject.id,
        name: draftProject.name,
        path: draftProject.path,
        provisional: true,
      },
    ))
  }
  const current = currentSessionKey.value
  if (current && !seen.has(current)) {
    const currentAgentId = normalizeAgentId(current.split(':')[1] || 'main')
    const project = optimisticProjectForSession(current) || undefined
    items.push(syntheticChatSession(
      current,
      currentAgentId,
      t('shared.sidebar.currentTask'),
      Date.now(),
      project,
    ))
  }
  return items
})

watch(allSessions, sessions => {
  for (const item of sessions) {
    if (!item.key || !item.workspaceId) continue
    freshTaskDraft.confirmMaterializedProjectTask(item.key, item.workspaceId)
  }
})

const SIDEBAR_SESSION_ORDER_KEY = 'opensquilla-sidebar-session-order-v1'
const SIDEBAR_PINNED_SESSIONS_KEY = 'opensquilla-sidebar-pinned-sessions-v1'

function readStoredSessionKeys(storageKey: string): string[] {
  try {
    const parsed = JSON.parse(localStorage.getItem(storageKey) || '[]')
    if (!Array.isArray(parsed)) return []
    return [...new Set(parsed.filter((key): key is string => typeof key === 'string' && key.length > 0))]
      .slice(0, 1000)
  } catch {
    return []
  }
}

function writeStoredSessionKeys(storageKey: string, keys: readonly string[]) {
  try {
    localStorage.setItem(storageKey, JSON.stringify(keys))
  } catch {
    // Storage can be unavailable in restricted browser contexts.
  }
}

const sidebarSessionOrder = ref<string[]>(readStoredSessionKeys(SIDEBAR_SESSION_ORDER_KEY))
const sidebarPinnedSessionKeys = ref<string[]>(readStoredSessionKeys(SIDEBAR_PINNED_SESSIONS_KEY))

// Collapsible family sections (Chats / Channels / Automations). Row titles and
// agent names are resolved here so the raw-session-id scrub and the display-name
// lookup stay in App.vue; subagents indent under their parent via the helper.
const sidebarSections = computed((): SidebarSection[] => {
  const byKey = new Map(sidebarSessionItems.value.map(item => [item.key, item]))
  return arrangeSidebarSections(
    sidebarSessionItems.value,
    rpcStore.canManageProjectWorkspaces && projectWorkspaces.hasLoaded.value
      ? projectWorkspaces.workspaces.value
      : undefined,
    sidebarSessionOrder.value,
    sidebarPinnedSessionKeys.value,
  ).map(section => ({
    ...section,
    rows: section.rows.map((row): SidebarSectionRow => {
      if (row.rowKind !== 'session') return { ...row, agentName: '' }
      const source = byKey.get(row.key)
      const title = renameOverrides.value[row.key]
        || (source ? sidebarConversationTitle(source) : row.title)
      return {
        ...row,
        title,
        agentName: agentDisplayName(normalizeAgentId(row.effectiveAgentId)),
        taskAttention: sessionTaskAttention.attentionFor(row.key, row.runStatus),
      }
    }),
  }))
})

function onReorderSidebarSession(payload: {
  draggedKey: string
  targetKey: string
  position: 'before' | 'after'
}) {
  const orderedKeys = sidebarSessionOrderKeys(
    sidebarSections.value,
    sidebarSessionOrder.value,
  )
  const from = orderedKeys.indexOf(payload.draggedKey)
  if (from < 0 || !orderedKeys.includes(payload.targetKey) || payload.draggedKey === payload.targetKey) return

  orderedKeys.splice(from, 1)
  const target = orderedKeys.indexOf(payload.targetKey)
  orderedKeys.splice(payload.position === 'after' ? target + 1 : target, 0, payload.draggedKey)
  sidebarSessionOrder.value = orderedKeys
  writeStoredSessionKeys(SIDEBAR_SESSION_ORDER_KEY, orderedKeys)
}

function onPinSidebarSession(payload: { key: string; pinned: boolean }) {
  const pinned = new Set(sidebarPinnedSessionKeys.value)
  if (payload.pinned) pinned.add(payload.key)
  else pinned.delete(payload.key)
  sidebarPinnedSessionKeys.value = [...pinned]
  writeStoredSessionKeys(SIDEBAR_PINNED_SESSIONS_KEY, sidebarPinnedSessionKeys.value)

  if (!payload.pinned) return
  const currentOrder = sidebarSessionOrderKeys(
    sidebarSections.value,
    sidebarSessionOrder.value,
  )
    .filter(key => key !== payload.key)
  currentOrder.unshift(payload.key)
  sidebarSessionOrder.value = currentOrder
  writeStoredSessionKeys(SIDEBAR_SESSION_ORDER_KEY, currentOrder)
}

let appAutomaticRpcMounted = false
let appAutomaticRpcStarted = false

// Hide the bottom tab bar while the on-screen keyboard owns the bottom edge.
// A visual-viewport shrink well beyond browser-chrome changes (>140px) is the
// simplest cross-platform signal; per-input focus tracking was considered and
// dropped as fragile. When the heuristic misses, the bar just stays visible.
function syncMobileKeyboard() {
  const viewport = window.visualViewport
  if (!viewport) return
  mobileKeyboardOpen.value = window.innerWidth <= 768 && window.innerHeight - viewport.height > 140
}

type SidebarToggleSource = 'sidebar-button' | 'topbar-button' | 'shortcut'

function toggleDock(source: SidebarToggleSource) {
  sidebarResizerRef.value?.cancel()
  const wasOpen = appStore.sidebarOpen
  const focusWasInsideSidebar = Boolean(
    sidebarRef.value && document.activeElement && sidebarRef.value.contains(document.activeElement),
  )
  const focusWasOnResizer = document.activeElement instanceof HTMLElement
    && document.activeElement.matches('.sidebar-resizer')
  appStore.toggleSidebar()
  if (!wasOpen && (source === 'topbar-button' || isSidebarDrawer.value)) {
    void nextTick(() => sidebarDockToggleRef.value?.focus())
  } else if (wasOpen && (source === 'sidebar-button' || focusWasInsideSidebar || focusWasOnResizer)) {
    void nextTick(() => topbarSidebarToggleRef.value?.focus())
  }
}

function handleNavClick() {
  if (isSidebarDrawer.value && appStore.sidebarOpen) {
    closeSidebarDrawer()
  }
}

function openSidebarDrawer() {
  if (appStore.sidebarOpen) return
  toggleDock('topbar-button')
}

function closeSidebarDrawer() {
  if (!appStore.sidebarOpen || !isSidebarDrawer.value) return
  sidebarResizerRef.value?.cancel()
  appStore.setSidebarOpen(false)
  void nextTick(() => topbarSidebarToggleRef.value?.focus())
}

function handleSidebarResizeStart() {
  sidebarResizeActive.value = true
}

function applySidebarPreview(width: number) {
  setSidebarCssWidth(width)
}

function commitSidebarWidth(width: number) {
  const preference: SidebarWidthPreference = {
    version: 1,
    width,
    source: 'custom',
  }
  appStore.setSidebarWidthPreference(preference)
}

function resetSidebarWidth() {
  appStore.resetSidebarWidthPreference()
}

function collapseSidebarFromResize() {
  appStore.setSidebarOpen(false)
  // The collapse gesture never overwrites the saved preference. Reset the root
  // variable now so the next explicit open restores that preference immediately.
  setSidebarCssWidth(sidebarEffectiveWidth.value)
  void nextTick(() => topbarSidebarToggleRef.value?.focus())
}

function handleSidebarResizeEnd() {
  sidebarResizeActive.value = false
  setSidebarCssWidth(sidebarEffectiveWidth.value)
}

// Layout mode is a single state machine shared with Settings. Entering a drawer
// force-closes the persistent dock; returning to desktop intentionally leaves it
// closed until the user reopens it. Compact mode keeps the current open state.
watch(sidebarLayoutMode, (nextMode, previousMode) => {
  const focusWasOnResizer = document.activeElement instanceof HTMLElement
    && document.activeElement.matches('.sidebar-resizer')
  sidebarResizerRef.value?.cancel()
  sidebarResizeActive.value = false
  setSidebarCssWidth(sidebarEffectiveWidth.value)

  if (nextMode === 'drawer' && appStore.sidebarOpen) {
    const focusWasInsideSidebar = Boolean(
      sidebarRef.value && document.activeElement && sidebarRef.value.contains(document.activeElement),
    )
    appStore.setSidebarOpen(false)
    if (focusWasOnResizer || focusWasInsideSidebar) {
      void nextTick(() => topbarSidebarToggleRef.value?.focus())
    }
  } else if (previousMode === 'resizable' && focusWasOnResizer) {
    void nextTick(() => sidebarDockToggleRef.value?.focus())
  }
}, { immediate: true })

watch(sidebarDynamicMaximum, () => {
  if (!sidebarResizeActive.value) return
  sidebarResizerRef.value?.cancel()
  sidebarResizeActive.value = false
  setSidebarCssWidth(sidebarEffectiveWidth.value)
})

// Primary new-chat path: ordinary tasks always start against the default Agent.
// Explicit custom-Agent launches still receive their Agent-scoped session key
// from advanced Agent administration.
function openDefaultDraft() {
  freshTaskDraft.requestFreshTask('main')
  return router.push({ path: '/chat/new', query: { agent: 'main' } })
}

function startNewChatInstant() {
  handleNavClick()
  void openDefaultDraft()
}

function startProjectTask(workspaceId: string) {
  if (!workspaceId || !rpcStore.canManageProjectWorkspaces) return
  handleNavClick()
  freshTaskDraft.requestFreshTask('main', workspaceId)
  void router.push({
    path: '/chat/new',
    query: { agent: 'main', project: workspaceId },
  })
}

// ---- Workspace file-tree sidebar view -----------------------------------
// The sidebar swaps its body between the task/conversation list and the
// file tree of a project workspace. The list component is kept mounted
// (v-show) so scroll position and selection state survive the swap.
const fileTreeWorkspace = ref<FileTreeWorkspace | null>(null)
const sidebarView = computed<'tasks' | 'files'>(() =>
  fileTreeWorkspace.value ? 'files' : 'tasks',
)

function viewWorkspaceFiles(workspaceId: string) {
  const item = projectWorkspaces.byId.value.get(workspaceId)
  if (!item || !item.available) return
  handleNavClick()
  fileTreeWorkspace.value = { id: item.id, name: item.name, path: item.path }
}

function closeWorkspaceFiles() {
  fileTreeWorkspace.value = null
}

function onFileTreePreview(payload: { workspace: FileTreeWorkspace; path: string }) {
  const item = createWorkspaceFileWorkbenchItem({
    workspaceId: payload.workspace.id,
    workspaceName: payload.workspace.name,
    workspacePath: payload.workspace.path,
    path: payload.path,
  })
  workbenchStore.openItem(item)
  workbenchStore.setExpanded(true)
}

function onFileTreeAttach(payload: {
  workspace: FileTreeWorkspace
  path: string
  name: string
  size?: number
}) {
  // The visible ChatView owns the composer attachment channel; it listens for
  // this event and stages the file through the normal upload pipeline.
  requestWorkspaceFileAttach({
    workspaceId: payload.workspace.id,
    workspacePath: payload.workspace.path,
    path: payload.path,
    name: payload.name,
    size: payload.size,
  })
}

function projectNameFromPath(path: string): string {
  const normalized = path.trim().replace(/[\\/]+$/, '')
  return normalized.split(/[\\/]/).pop() || normalized
}

function resetProjectCreator() {
  projectCreateOpen.value = false
  projectCreateName.value = ''
  projectCreateSourcePath.value = ''
  projectCreateBusy.value = false
  projectCreateSourcePicking.value = false
  projectCreateConfirming.value = false
  projectSourcePickerOpen.value = false
}

function openProjectCreator() {
  if (!rpcStore.canChooseProject) return
  projectCreateName.value = ''
  projectCreateSourcePath.value = ''
  projectCreateBusy.value = false
  projectCreateSourcePicking.value = false
  projectCreateConfirming.value = false
  projectSourcePickerOpen.value = false
  projectCreateOpen.value = true
}

function closeProjectCreator() {
  if (projectCreateBusy.value) return
  resetProjectCreator()
}

function onProjectPathChosen(path: string) {
  if (!projectCreateOpen.value || !rpcStore.canChooseProject) return
  projectCreateSourcePath.value = path
  if (!projectCreateName.value.trim()) {
    projectCreateName.value = projectNameFromPath(path)
  }
}

function onProjectSourcePathChosen(path: string) {
  projectSourcePickerOpen.value = false
  onProjectPathChosen(path)
}

async function chooseProjectSourceDirectory() {
  if (
    !projectCreateOpen.value
    || !rpcStore.canChooseProject
    || projectCreateBusy.value
    || projectCreateSourcePicking.value
    || projectSourcePickerOpen.value
  ) return

  const nativePicker = getPlatform().files.chooseProjectDirectory
  if (typeof nativePicker !== 'function') {
    projectSourcePickerOpen.value = true
    return
  }

  projectCreateSourcePicking.value = true
  try {
    const choice = await nativePicker()
    const selected = String(choice?.path || '').trim()
    if (selected) onProjectPathChosen(selected)
  } catch (err) {
    pushToast(t('workspaces.directoryPickerFailed', { error: errorMessage(err) }), {
      tone: 'danger',
    })
  } finally {
    projectCreateSourcePicking.value = false
  }
}

async function createProjectWorkspace(payload: { name: string; path: string }) {
  if (
    !projectCreateOpen.value
    || !rpcStore.canChooseProject
    || projectCreateBusy.value
    || projectCreateSourcePicking.value
    || projectSourcePickerOpen.value
  ) return
  const name = payload.name.trim()
  const path = payload.path.trim()
  if (!name || !path) return
  projectCreateConfirming.value = true
  await nextTick()
  const trusted = await confirm({
    title: t('workspaces.trustTitle'),
    body: t('workspaces.trustBody', { path }),
    primaryLabel: t('workspaces.trustConfirm'),
    primaryClass: 'btn--primary',
  })
  if (!trusted) {
    projectCreateConfirming.value = false
    return
  }
  projectCreateBusy.value = true
  const existingWorkspaceIds = new Set(
    projectWorkspaces.workspaces.value.map(workspace => workspace.id),
  )
  try {
    const workspace = await projectWorkspaces.openWorkspace(path)
    if (!workspace) throw new Error('Gateway returned an empty project.')
    const alreadyExists = existingWorkspaceIds.has(workspace.id)
    const renamedExisting = alreadyExists && workspace.name !== name
    if (workspace.name !== name) {
      await projectWorkspaces.renameWorkspace(workspace.id, name)
    }
    resetProjectCreator()
    if (alreadyExists) {
      pushToast(t(
        renamedExisting
          ? 'workspaces.projectExistingRenamed'
          : 'workspaces.projectAlreadyExists',
        { name },
      ), { tone: 'info' })
    } else {
      pushToast(t('workspaces.projectCreated', { name }), { tone: 'ok' })
    }
  } catch (err) {
    projectCreateBusy.value = false
    projectCreateConfirming.value = false
    pushToast(t('workspaces.createProjectFailed', { error: errorMessage(err) }), { tone: 'danger' })
  }
}

async function onProjectPin(payload: { workspaceId: string; pinned: boolean }) {
  if (!rpcStore.canManageProjectWorkspaces) return
  try {
    await projectWorkspaces.setPinned(payload.workspaceId, payload.pinned)
  } catch (err) {
    pushToast(t('workspaces.updateFailed', { error: errorMessage(err) }), { tone: 'danger' })
  }
}

function openProjectEditor(workspaceId: string) {
  if (!rpcStore.canManageProjectWorkspaces) return
  editingProjectId.value = workspaceId
}

async function onProjectRename(name: string) {
  if (!rpcStore.canManageProjectWorkspaces) return
  const workspaceId = editingProjectId.value
  if (!workspaceId) return
  try {
    await projectWorkspaces.renameWorkspace(workspaceId, name)
    editingProjectId.value = ''
  } catch (err) {
    pushToast(t('workspaces.updateFailed', { error: errorMessage(err) }), { tone: 'danger' })
  }
}

async function onProjectDeleteHistory(workspaceId: string) {
  if (!rpcStore.canManageProjectWorkspaces) return
  try {
    const result = await projectWorkspaces.deleteWorkspaceHistory(workspaceId)
    const leaveDeletedTask = activeTaskWasDeletedWithProjectHistory({
      workspaceId,
      currentSessionKey: currentSessionKey.value,
      sessions: allSessions.value,
      deletedSessionKeys: result.deletedSessionKeys,
    })
    sessionTaskAttention.removeMany(result.deletedSessionKeys)
    await loadSessions()
    if (leaveDeletedTask) void openDefaultDraft()
    pushToast(t('workspaces.historyDeleted'), { tone: 'ok' })
  } catch (err) {
    pushToast(t('workspaces.deleteHistoryFailed', { error: errorMessage(err) }), { tone: 'danger' })
  }
}

async function onProjectRemove(workspaceId: string) {
  if (!rpcStore.canManageProjectWorkspaces) return
  const project = projectWorkspaces.byId.value.get(workspaceId)
  if (!project) return
  let affectedCronJobs = 0
  try {
    const jobs = await rpcStore.call<Array<{ workspaceId?: string }>>(
      'cron.list',
      {},
    )
    affectedCronJobs = (jobs || []).filter(
      job => job.workspaceId === workspaceId,
    ).length
  } catch {
    // The backend still enforces the pause atomically during removal.
  }
  const approved = await confirm({
    title: t('workspaces.removeTitle'),
    body: affectedCronJobs > 0
      ? t('workspaces.removeBodyWithCronJobs', {
          name: project.name,
          count: affectedCronJobs,
        })
      : t('workspaces.removeBody', { name: project.name }),
    primaryLabel: t('workspaces.removeConfirm'),
  })
  if (!approved) return
  try {
    await projectWorkspaces.removeWorkspace(workspaceId)
    if (editingProjectId.value === workspaceId) editingProjectId.value = ''
    if (
      $route.path === '/chat/new'
      && String($route.query.project || '') === workspaceId
    ) {
      freshTaskDraft.requestFreshTask('main')
      await router.replace({ path: '/chat/new', query: { agent: 'main' } })
    }
  } catch (err) {
    pushToast(t('workspaces.removeFailed', { error: errorMessage(err) }), { tone: 'danger' })
  }
}

// Command palette: ⌘K / Ctrl+K and the rail "Search / Go to…" row both open it.
// Its action commands route back through the existing handlers so behaviour stays
// single-sourced (new chat opens a draft, Settings reuses the footer path).
function openCommandPalette() {
  handleNavClick()
  commandPaletteOpen.value = true
}

function onPaletteNewChat() {
  startNewChatInstant()
}

function onPaletteOpenSettings() {
  openSettings()
}

function onPaletteToggleTheme() {
  // Cycle the appearance mode through the same registry-driven order as the
  // topbar picker (every selectable value theme + system), so the palette
  // never resets a custom theme back to 'light'.
  appStore.cycleTheme()
}

function onPaletteSelectSession(key: string) {
  switchToSession(key, 'command_palette.select_session')
}

function switchToSession(key: string, source = 'app.switchToSession') {
  if (!key) return
  sessionTaskAttention.markRead(key)
  recordSessionNavigationDiag(source, {
    from: currentSessionKey.value,
    to: key,
  })
  router.push({ path: '/chat', query: { session: key } })
}

// Optimistic rename: show the new title immediately, then persist through the
// SessionLifecycle seam and reload so the backend's canonical title wins. The
// override clears once the reload lands.
async function onRenameSession({ key, title }: { key: string; title: string }) {
  const next = title.trim()
  if (!key || !next) return
  renameOverrides.value = { ...renameOverrides.value, [key]: next }
  const local = localChatSessions.value[key]
  if (local) localChatSessions.value[key] = { ...local, title: next }
  try {
    await sessionLifecycle.rename({ key, title: next })
    pushToast('Session renamed', { tone: 'ok' })
  } catch (err: unknown) {
    console.warn('[App] session rename error:', errorMessage(err))
    pushToast('Failed to rename session', { tone: 'danger' })
  } finally {
    await loadSessions()
    const { [key]: _dropped, ...rest } = renameOverrides.value
    renameOverrides.value = rest
  }
}

function removeLocalSessions(keys: Set<string>) {
  if (keys.size === 0) return
  let next = localChatSessions.value
  let changed = false
  for (const key of keys) {
    if (!next[key]) continue
    const { [key]: _dropped, ...rest } = next
    next = rest
    changed = true
  }
  if (changed) localChatSessions.value = next
}

function handleLocalSessionsDeleted(event: Event) {
  const detail = localSessionsDeletedDetail(event)
  if (!detail || detail.source === APP_SESSION_SYNC_SOURCE) return
  const deleted = new Set(detail.keys)
  removeLocalSessions(deleted)
  sessionTaskAttention.removeMany(deleted)
  appStore.removePendingApprovalsForSessions(deleted)
  scheduleSessionRefresh()
}

async function deleteSessions(keys: string[]) {
  const uniqueKeys = [...new Set(keys.map(key => key.trim()).filter(Boolean))]
  if (uniqueKeys.length === 0) return null
  try {
    return await sessionLifecycle.remove(uniqueKeys)
  } catch (err: unknown) {
    console.warn('[App] session deletion error:', errorMessage(err))
    return null
  }
}

// Delete sessions, then refresh the list. If the open session was deleted, drop
// into a fresh draft so the view does not linger on a session that no longer exists.
async function onBulkDeleteSessions(keys: string[]) {
  const uniqueKeys = [...new Set(keys.map(key => key.trim()).filter(Boolean))]
  if (uniqueKeys.length === 0) return
  const currentKey = currentSessionKey.value
  const wasCurrentDeleted = !!currentKey && uniqueKeys.includes(currentKey)
  const result = await deleteSessions(uniqueKeys)
  const deleted = new Set(result?.deleted || [])
  if (!result || deleted.size === 0) {
    console.warn('[App] session deletion reported failure:', result?.errors)
    pushToast(t('shared.sidebar.bulkDeleteFailed'), { tone: 'danger' })
    return
  }
  removeLocalSessions(deleted)
  sessionTaskAttention.removeMany(deleted)
  appStore.removePendingApprovalsForSessions(deleted)
  dispatchLocalSessionsDeleted(deleted, APP_SESSION_SYNC_SOURCE)
  const failedCount = Math.max(0, uniqueKeys.length - deleted.size)
  pushToast(t('shared.sidebar.bulkDeleteDone', { count: deleted.size }), { tone: 'ok' })
  if (failedCount > 0 || (result.errors?.length || 0) > 0) {
    console.warn('[App] session deletion partial failure:', result.errors)
    pushToast(t('shared.sidebar.bulkDeletePartial', { count: failedCount || result.errors?.length || 0 }), { tone: 'danger' })
  }
  await loadSessions()
  if (wasCurrentDeleted && deleted.has(currentKey)) {
    void openDefaultDraft()
  }
}

async function onDeleteSession(key: string) {
  if (!key) return
  const wasCurrent = key === currentSessionKey.value
  const result = await deleteSessions([key])
  if (!result?.deleted?.includes(key)) {
    console.warn('[App] session deletion reported failure:', result?.errors)
    pushToast('Failed to delete session', { tone: 'danger' })
    return
  }
  pushToast('Session deleted', { tone: 'ok' })
  const deleted = new Set([key])
  removeLocalSessions(deleted)
  sessionTaskAttention.removeMany(deleted)
  appStore.removePendingApprovalsForSessions(deleted)
  dispatchLocalSessionsDeleted(deleted, APP_SESSION_SYNC_SOURCE)
  await loadSessions()
  if (wasCurrent) {
    void openDefaultDraft()
  }
}

// Topbar approval pill: jump straight to the blocked session's chat so the
// in-thread card can be answered. The live `pendingApprovals` list (kept fresh
// by the push subscription + reconnect seed) is the source of truth — no
// re-fetch — and the oldest pending session is the deterministic target. With
// no routable session, fall back to the Sessions page.
function openBlockedApprovalSession() {
  const oldest = appStore.oldestPendingWithSession
  if (oldest?.sessionKey) {
    appStore.requestApprovalFocus(oldest)
    switchToSession(oldest.sessionKey, 'approval.openBlockedSession')
    return
  }
  // No session attached to the pending approval: land on Sessions, whose
  // attention strip shows the pending count (the /approvals page is retired).
  router.push('/sessions')
}

// Footer settings row. Both platforms mount the same `/settings` overlay now, so
// a single push covers both. bottomRoutes is honored first to keep any future
// bottom-nav destination authoritative, falling back to the shared overlay.
function openSettings() {
  handleNavClick()
  router.push(bottomRoutes.value[0]?.path ?? '/settings')
}

// Topbar connection pill (web): jump straight to the Connection section so the
// gateway link can be inspected or re-pointed.
function openConnectionSettings() {
  router.push('/settings/gateway#connection')
}

// Compact chat headers hand off to the complete Desktop update workflow rather
// than recreating update actions inside the status summary.
function openDesktopRuntimeSettings() {
  router.push('/settings/gateway#runtime')
}

function scheduleSessionRefresh() {
  sidebarRefresh.schedule()
}

function flushScheduledSidebarRefresh() {
  sidebarRefresh.flush()
}

async function performSidebarLoad(): Promise<void> {
  const requests: Promise<unknown>[] = [loadSessions()]
  if (
    rpcStore.canManageProjectWorkspaces
    && optionalSessionRpcAllowed.value
  ) {
    requests.push(
      projectWorkspaces.loadWorkspaces(optionalSessionRpcCallOptions),
    )
  }
  await Promise.allSettled(requests)
}

const sidebarRefresh = createCoalescedRefresh({
  run: performSidebarLoad,
  allowed: () => appAutomaticRpcMounted && optionalSessionRpcAllowed.value,
  delayMs: 150,
})

function loadSidebarData(): Promise<void> {
  return sidebarRefresh.load()
}

function refreshSidebarDataWhenAdmitted(): void | Promise<void> {
  if (!optionalSessionRpcAllowed.value) {
    sidebarRefresh.defer()
    return
  }
  return loadSidebarData()
}

const sessionDirectoryChangesSubscription = sessionDirectoryChanges.subscribe(change => {
  scheduleSessionRefresh()
  sessionTaskAttention.handleSessionDirectoryChange(change, {
    currentSessionKey: currentSessionKey.value,
    currentSessionVisible: currentSessionIsVisible(),
  })
})

function subscribeCronEventsWhenAdmitted() {
  if (
    !appAutomaticRpcMounted
    || !optionalSessionRpcAllowed.value
    || !rpcStore.isConnected
  ) return
  void rpcStore.call('cron.subscribe', {}).catch(() => undefined)
}

function resumeAutomaticAppRpc() {
  if (!appAutomaticRpcMounted || !optionalSessionRpcAllowed.value) return
  subscribeCronEventsWhenAdmitted()
  void sessionDirectoryChanges.resume()
  if (!appAutomaticRpcStarted) {
    appAutomaticRpcStarted = true
    void loadAgents()
    void loadSidebarData()
  }
  flushScheduledSidebarRefresh()
}

watch(optionalSessionRpcAllowed, admitted => {
  if (admitted) resumeAutomaticAppRpc()
}, { flush: 'sync' })

watch(
  () => rpcStore.state,
  state => {
    if (state !== 'connected') return
    subscribeCronEventsWhenAdmitted()
    if (!appAutomaticRpcMounted || !optionalSessionRpcAllowed.value) return
    // The event stream is live-only. Rebind the logical lease and refresh a
    // complete directory snapshot after every physical reconnect so events
    // missed during the gap cannot leave the sidebar stale.
    void sessionDirectoryChanges.resume().then(() => {
      if (appAutomaticRpcStarted) void refreshSidebarDataWhenAdmitted()
    })
  },
)

function handleKeydown(e: KeyboardEvent) {
  // Chord bindings carry the primary modifier as Cmd on Apple platforms and Ctrl
  // elsewhere — and require the other modifier to be absent — so we never match
  // macOS' Ctrl+K (emacs kill-to-end-of-line inside text fields). preventDefault
  // runs BEFORE any early return so the browser never sees the chord: on
  // Chrome/Edge/Firefox (Win/Linux) Ctrl+K focuses the omnibox/search, and in
  // Firefox-mac Cmd+K focuses the search bar. Swallowing it unconditionally also
  // lets the shortcut fire from inside the composer textarea, where the cursor
  // usually sits.
  //
  // Configurable chord shortcuts, consulted from the shortcuts store so the
  // Keyboard settings section is the single source of truth. effectiveBinding
  // returns null for a disabled shortcut, so bindingMatches skips it. New chat
  // is checked first because the palette's no-shift binding would otherwise also
  // match a Shift+K press under a looser guard. preventDefault still runs before
  // the settingsOverlay guard so the browser never sees the chord.
  const paletteBinding = shortcutsStore.effectiveBinding('command-palette')
  const newChatBinding = shortcutsStore.effectiveBinding('new-chat')
  const toggleSidebarBinding = shortcutsStore.effectiveBinding('toggle-sidebar')
  if (bindingMatches(e, toggleSidebarBinding, isMac)) {
    e.preventDefault()
    if (e.repeat || settingsOverlayOpen.value) return
    toggleDock('shortcut')
    return
  }
  if (bindingMatches(e, newChatBinding, isMac)) {
    e.preventDefault()
    if (settingsOverlayOpen.value) return
    startNewChatInstant()
    return
  }
  if (bindingMatches(e, paletteBinding, isMac)) {
    e.preventDefault()
    if (settingsOverlayOpen.value) return
    // Toggle so a second press closes it; the palette owns Escape/focus while open.
    commandPaletteOpen.value = !commandPaletteOpen.value
    return
  }

  // Skip App's fallbacks when a handler that runs BEFORE this one already
  // consumed the key: the composer textarea (@keydown, target phase) and any
  // earlier-registered document listener (e.g. ChatView). Overlays (drawers,
  // modals) attach their document listeners on open — AFTER this one — so they
  // run later and are covered separately by the shared dialog-layer guard.
  if (e.defaultPrevented) return

  if (e.key === 'Escape' && themeMenuOpen.value && themeMenuIsTopmost.value) {
    e.preventDefault()
    themeMenuOpen.value = false
    themeButtonRef.value?.focus()
    return
  }
  // Child topbar controls and routed dialogs install their Escape handlers
  // after App's listener. Let the current dialog-stack owner handle the key
  // instead of pre-emptively collapsing the mobile sidebar beneath it.
  if (e.key === 'Escape' && hasOpenDialogLayer()) return
  // Escape dismisses the sidebar only as the mobile slide-over. On desktop the
  // sidebar is a persistent dock toggled by its own button, so it must never
  // collapse as a side effect of an Escape meant for an overlay opened on top of
  // it. The shared dialog-layer guard above handles that ordering collision;
  // this branch remains mobile-only because desktop uses a persistent dock.
  if (e.key === 'Escape' && appStore.sidebarOpen && !settingsOverlayOpen.value && isSidebarDrawer.value) {
    closeSidebarDrawer()
  }
}

function errorMessage(err: unknown): string {
  return err instanceof Error ? err.message : String(err)
}

// ---------------------------------------------------------------------------
// App-wide approval awareness
//
// A view-local snapshot is not enough; a tool that blocks a background/queued
// turn must surface the badge from any view. The
// gateway pushes `<namespace>.approval.requested|resolved` the moment a run
// blocks or a decision lands, so we keep `pendingApprovals`/`approvalCount`
// live here, seeded once on (re)connect to recover requests that predate the
// socket (e.g. a reload while one is already pending).
// ---------------------------------------------------------------------------

const approvalSubscriptions: ApprovalSubscription[] = []

function approvalItemToPending(item: ApprovalItem): PendingApproval | null {
  const approvalId = item.id.trim()
  if (!approvalId) return null
  return {
    approvalId,
    sessionKey: item.sessionKey,
    tool: item.toolName || 'Unknown tool',
    command: item.command,
  }
}

// Seed the live list from the snapshot so the count is correct after a reload
// while a request is already pending. The
// snapshot is ordered oldest-first, which the deep-link relies on.
async function seedPendingApprovals() {
  try {
    const snapshot = await approvalCenter.snapshot()
    const items = snapshot.pending
      .map(approvalItemToPending)
      .filter((item): item is PendingApproval => item !== null)
    appStore.setPendingApprovals(items)
  } catch (err) {
    console.warn('[App] approvals seed failed:', errorMessage(err))
  }
}

function onApprovalEvent(event: ApprovalEvent) {
  if (event.kind === 'resolved') {
    appStore.removePendingApproval(event.approvalId)
    return
  }
  if (event.approval) {
    const item = approvalItemToPending(event.approval)
    if (item) appStore.upsertPendingApproval(item)
  }
}

// Reconnect re-seeds the list (recovers approvals that arrived while the socket
// was down); the push events keep it live thereafter.
function onApprovalAvailability(state: 'available' | 'recovering' | 'unavailable') {
  if (state !== 'available') {
    appStore.setPendingApprovals([])
    return
  }
  void seedPendingApprovals()
}

function subscribeApprovals() {
  approvalSubscriptions.push(
    approvalCenter.subscribe(onApprovalEvent),
    approvalCenter.subscribeAvailability(onApprovalAvailability),
  )
}

function unsubscribeApprovals() {
  approvalSubscriptions.splice(0).forEach(subscription => subscription.close())
  approvalCenter.dispose()
}

// ---------------------------------------------------------------------------
// Tab-title + screen-reader badge for the pending count
// ---------------------------------------------------------------------------

const BASE_TITLE = document.title

const approvalAnnouncement = ref('')

let titleDebounce: ReturnType<typeof setTimeout> | null = null

function applyTitleBadge(count: number) {
  document.title = count > 0 ? `(${count}) ${BASE_TITLE}` : BASE_TITLE
}

// Debounce so a burst of count changes does not thrash the tab title.
watch(() => appStore.approvalCount, count => {
  approvalAnnouncement.value = count > 0 ? `${count} approvals pending` : ''
  if (titleDebounce) clearTimeout(titleDebounce)
  titleDebounce = setTimeout(() => {
    titleDebounce = null
    applyTitleBadge(count)
  }, 500)
})

useDocumentEvent('keydown', handleKeydown)

onMounted(() => {
  appAutomaticRpcMounted = true
  window.visualViewport?.addEventListener('resize', syncMobileKeyboard)
  window.addEventListener(LOCAL_SESSIONS_DELETED_EVENT, handleLocalSessionsDeleted)
  window.addEventListener('focus', markCurrentSessionReadIfVisible)
  document.addEventListener('visibilitychange', markCurrentSessionReadIfVisible)
  resumeAutomaticAppRpc()
  // Keep the approval badge/count live app-wide, not just on the Approvals page.
  subscribeApprovals()
  unsubscribeCronFinished = rpcStore.on('cron.run.finished', handleCronRunFinished)
  // Seed now in case an approval was pending before mount. Availability events
  // re-seed after reconnects and clear stale data while transport recovers.
  void seedPendingApprovals()
})

onUnmounted(() => {
  appAutomaticRpcMounted = false
  sidebarRefresh.dispose()
  window.removeEventListener(LOCAL_SESSIONS_DELETED_EVENT, handleLocalSessionsDeleted)
  window.removeEventListener('focus', markCurrentSessionReadIfVisible)
  document.removeEventListener('visibilitychange', markCurrentSessionReadIfVisible)
  sessionDirectoryChangesSubscription.close()
  sessionDirectoryChanges.dispose()
  unsubscribeApprovals()
  unsubscribeCronFinished?.()
  unsubscribeCronFinished = null
  void rpcStore.call('cron.unsubscribe', {}).catch(() => undefined)
  if (titleDebounce) {
    clearTimeout(titleDebounce)
    titleDebounce = null
  }
  document.title = BASE_TITLE
  window.visualViewport?.removeEventListener('resize', syncMobileKeyboard)
})

</script>

<style scoped>
.app-workspace {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
}

/* Topbar connection pill as a button (web): inherits the base .conn-pill look
   and state colors, adds button reset + an affordance that it is clickable. */
.conn-pill--link {
  cursor: pointer;
  font-family: inherit;
}
.conn-pill--link:hover {
  filter: brightness(1.08);
}
.conn-pill--link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
}

/* Off-screen but screen-reader-reachable announcer for the approval count. */
.app-approval-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
</style>