fix: keep AI funding panel handoffs in one modal history entry

This commit is contained in:
archipelago
2026-10-08 13:21:04 -04:00
parent 84f3bd22c7
commit 79437d73e8
5 changed files with 26 additions and 7 deletions
@@ -1,5 +1,5 @@
<template>
<BaseModal :show="show && !funding" title="Connect your AI" max-width="max-w-xl" @close="close">
<BaseModal :manage-history="false" :show="show && !funding" title="Connect your AI" max-width="max-w-xl" @close="close">
<p class="text-sm text-white/60 mb-4">Choose how your assistant connects. API keys stay on this node and never enter your chat.</p>
<p v-if="loading" role="status" class="text-sm text-white/60 mb-3">Checking this node…</p>
<p v-if="error" role="alert" class="text-sm text-amber-200 mb-3">{{ error }}</p>
@@ -28,12 +28,13 @@
<button v-if="status?.local_ready" class="glass-button rounded-lg px-4 py-2 text-sm text-white mt-4 w-full" @click="useLocal">Use local AI</button>
<p class="text-xs text-white/40 mt-4">Your draft stays in place when you close this window.</p>
</BaseModal>
<ReceiveBitcoinModal :show="show && funding && !scanning" initial-method="ecash" @close="finishFunding" @received="finishFunding" @scan="scanning = true" />
<ReceiveBitcoinModal :manage-history="false" :show="show && funding && !scanning" initial-method="ecash" @close="finishFunding" @received="finishFunding" @scan="scanning = true" />
<WalletScanModal :show="show && scanning" @close="finishScan" @sent="finishScan" />
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useModalHistory } from '@/composables/useModalHistory'
import { rpcClient } from '@/api/rpc-client'
import BaseModal from './BaseModal.vue'
import ReceiveBitcoinModal from './ReceiveBitcoinModal.vue'
@@ -52,6 +53,8 @@ interface ProviderStatus {
const props = defineProps<{ show: boolean }>()
const emit = defineEmits<{ close: []; configured: [provider: Choice | 'auto' | 'local', model?: string] }>()
const choices: { id: Choice; label: string }[] = [{ id: 'routstr', label: 'Routstr · sats' }, { id: 'claude', label: 'Claude API' }, { id: 'openai', label: 'OpenAI API' }]
// Keep one browser Back entry while switching between connection, funding and scan.
useModalHistory(computed(() => props.show), close)
const mode = ref<Choice | null>('routstr')
const key = ref('')
const model = ref('')
+4 -1
View File
@@ -62,10 +62,13 @@ const props = withDefaults(defineProps<{
maxWidth?: string
zIndex?: string
contentClass?: string
/** A parent flow may own one history entry across several modal panels. */
manageHistory?: boolean
}>(), {
maxWidth: 'max-w-md',
zIndex: 'z-[3000]',
contentClass: '',
manageHistory: true,
})
const emit = defineEmits<{
@@ -109,7 +112,7 @@ useBodyScrollLock(computed(() => props.show))
// Browser/mouse/gesture Back closes the modal instead of navigating the
// router out from under it — the native-app behaviour kiosk and mobile
// browsers expect (the companion webview already provides it natively).
useModalHistory(computed(() => props.show), close)
useModalHistory(computed(() => props.show && props.manageHistory), close)
</script>
<style scoped>
@@ -1,5 +1,5 @@
<template>
<BaseModal :show="show && !receiveSuccess" :title="t('web5.receiveBitcoinTitle')" max-width="max-w-2xl" content-class="max-h-[90vh] overflow-y-auto" @close="close">
<BaseModal :manage-history="manageHistory !== false" :show="show && !receiveSuccess" :title="t('web5.receiveBitcoinTitle')" max-width="max-w-2xl" content-class="max-h-[90vh] overflow-y-auto" @close="close">
<!-- Method tabs -->
<div class="flex gap-1 mb-4 p-1 bg-white/5 rounded-lg">
<button
@@ -111,6 +111,7 @@
<!-- Completion is deliberately its own modal, matching the Lightning
payment moment. It is not an inline status inside the receive form. -->
<BaseModal
:manage-history="manageHistory !== false"
:show="show && !!receiveSuccess"
title="Payment received"
max-width="max-w-2xl"
@@ -147,6 +148,7 @@ const lightning = useLightningRequired()
const props = defineProps<{
show: boolean
manageHistory?: boolean
initialMethod?: 'lightning' | 'onchain' | 'ecash' | 'ark'
/** Optional info banner shown on the on-chain tab (e.g. Zeus channel limits) */
note?: string
@@ -6,7 +6,7 @@ import WalletScanModal from '../WalletScanModal.vue'
import { rpcClient } from '@/api/rpc-client'
vi.mock('@/api/rpc-client', () => ({ rpcClient: { call: vi.fn() } }))
vi.mock('../WalletScanModal.vue', () => ({ default: { props: ['show'], template: '<div />' } }))
vi.mock('../ReceiveBitcoinModal.vue', () => ({ default: { props: ['show', 'initialMethod'], template: '<div />' } }))
vi.mock('../ReceiveBitcoinModal.vue', () => ({ default: { props: ['show', 'initialMethod', 'manageHistory'], template: '<div />' } }))
vi.mock('@/views/settings/RoutstrBudgetSection.vue', () => ({ default: { template: '<div />' } }))
const state = () => ({ schema: 1, settings: { provider: 'auto', openai_model: '' }, claude_configured: false, openai_configured: false, local_ready: false, routstr_remaining_sats: 0 })
function mountModal() { return mount(AIConnectionModal, { props: { show: false }, global: { stubs: { BaseModal: { props: ['show'], template: '<div v-if="show"><slot /></div>' } } } }) }
@@ -19,7 +19,7 @@ describe('AI connection setup', () => {
expect(button(w, 'Top up with ecash').exists()).toBe(true)
expect(vi.mocked(rpcClient.call).mock.calls.every(([r]) => !['assistant.budget-set', 'system.settings.set'].includes(r.method))).toBe(true)
await button(w, 'Top up with ecash').trigger('click')
expect(w.findComponent(ReceiveBitcoinModal).props()).toMatchObject({ show: true, initialMethod: 'ecash' })
expect(w.findComponent(ReceiveBitcoinModal).props()).toMatchObject({ show: true, initialMethod: 'ecash', manageHistory: false })
w.findComponent(ReceiveBitcoinModal).vm.$emit('scan'); await flushPromises()
expect(w.findComponent(WalletScanModal).props('show')).toBe(true)
expect(w.findComponent(ReceiveBitcoinModal).props('show')).toBe(false)
@@ -1,9 +1,20 @@
import { afterEach, describe, expect, it } from 'vitest'
import { afterEach, describe, expect, it, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import { createRouter, createMemoryHistory } from 'vue-router'
import BaseModal from '../BaseModal.vue'
describe('BaseModal', () => {
it('lets a parent flow own history while panels change', async () => {
const push = vi.spyOn(window.history, 'pushState')
const back = vi.spyOn(window.history, 'back')
const wrapper = mount(BaseModal, { props: { show: false, title: 'Panel', manageHistory: false } })
await wrapper.setProps({ show: true })
await wrapper.setProps({ show: false })
expect(push).not.toHaveBeenCalled()
expect(back).not.toHaveBeenCalled()
wrapper.unmount(); push.mockRestore(); back.mockRestore()
})
afterEach(() => {
document.body.style.overflow = ''
})