diff --git a/opensquilla-webui/e2e/goal-mode.spec.ts b/opensquilla-webui/e2e/goal-mode.spec.ts index 53a4cef39d..375ac121cb 100644 --- a/opensquilla-webui/e2e/goal-mode.spec.ts +++ b/opensquilla-webui/e2e/goal-mode.spec.ts @@ -15,6 +15,8 @@ const SESSION_KEY = 'agent:main:webchat:e2e-goal-mode' const SESSION_ID = 'session-e2e-goal-mode' const GOAL_ID = 'goal-e2e-mocked-snapshots' const GOAL_SOURCE_MESSAGE_ID = 'message-goal-source' +const GOAL_TERMINAL_TURN_ID = 'turn-goal-terminal' +const GOAL_TERMINAL_REPLY = 'The synthetic Goal report is complete.' const OBJECTIVE = 'Produce and verify a deterministic release report' const REAL_FIRST_REPLY = 'The release inputs are inspected; final verification still remains.' const REAL_FINAL_REPLY = 'The deterministic release report is complete and verified.' @@ -41,9 +43,11 @@ type GoalFixture = ReturnType type MockGoalGateway = { acceptGoal: () => void + acceptClear: () => void emitGoal: (goal: GoalFixture) => void methods: string[] setParams: Array> + clearParams: Array> } function response(id: string | number | undefined, payload: unknown) { @@ -116,15 +120,22 @@ async function installStableHttpStubs(page: Page): Promise { async function installFakeGoalGateway( page: Page, - options: { sessionRouting?: boolean } = {}, + options: { + sessionRouting?: boolean + goalRemoval?: boolean + history?: Array> + } = {}, ): Promise { const methods: string[] = [] const setParams: Array> = [] + const clearParams: Array> = [] let sendFrame: ((frame: string) => void) | null = null let pendingGoalRequest: { id: string | number | undefined params: Record } | null = null + let pendingClearRequest: { id: string | number | undefined } | null = null + let currentGoal: GoalFixture | null = null let streamSeq = 0 await page.addInitScript(() => { @@ -156,6 +167,7 @@ async function installFakeGoalGateway( methods: [ 'goals.capabilities', 'goals.set', + ...(options.goalRemoval ? ['goals.clear'] : []), ...(options.sessionRouting ? ['sessions.routing.get', 'sessions.routing.set'] : []), @@ -187,10 +199,15 @@ async function installFakeGoalGateway( } return } + if (method === 'goals.clear' && options.goalRemoval) { + clearParams.push(frame.params as Record) + pendingClearRequest = { id: frame.id as string | number | undefined } + return + } const payloads: Record = { 'agents.list': { agents: [] }, - 'chat.history': chatHistoryPayload(), + 'chat.history': chatHistoryPayload(options.history), 'commands.list_for_surface': { commands: [{ name: '/goal', @@ -211,17 +228,18 @@ async function installFakeGoalGateway( executionEnabled: true, maxTurns: 50, runtimeBudgetSeconds: 3_600, - methods: ['goals.set'], + methods: ['goals.set', ...(options.goalRemoval ? ['goals.clear'] : [])], }, 'models.routing.get': { mode: 'direct' }, 'onboarding.status': { audioConfigured: false }, 'sessions.list': { sessions: [], count: 0, ts: 1_800_000_000, has_more: false }, 'sessions.messages.snapshot': sessionMessagesSnapshotPayload(SESSION_KEY, { - current_stream_seq: 0, + current_stream_seq: options.goalRemoval ? streamSeq : 0, }), 'sessions.messages.subscribe': sessionMessagesSubscribePayload(SESSION_KEY, { sessionId: SESSION_ID, epoch: 1, + current_stream_seq: options.goalRemoval ? streamSeq : 0, hydration_complete: false, goal: null, goalSnapshotStreamSeq: null, @@ -230,8 +248,8 @@ async function installFakeGoalGateway( 'sessions.messages.hydrate': sessionMessagesHydratePayload(SESSION_KEY, { sessionId: SESSION_ID, epoch: 1, - goal: null, - goalSnapshotStreamSeq: 0, + goal: options.goalRemoval ? currentGoal : null, + goalSnapshotStreamSeq: options.goalRemoval ? streamSeq : 0, }), 'sessions.routing.get': { sessionKey: SESSION_KEY, @@ -250,12 +268,14 @@ async function installFakeGoalGateway( return { methods, setParams, + clearParams, acceptGoal() { if (!sendFrame || !pendingGoalRequest) { throw new Error('fake Goal gateway has no pending goals.set request') } const { id, params } = pendingGoalRequest pendingGoalRequest = null + currentGoal = goalSnapshot() sendFrame(response(id, { accepted: true, clientRequestId: params.clientRequestId, @@ -265,11 +285,46 @@ async function installFakeGoalGateway( taskId: 'task-goal-first-turn', userMessageId: GOAL_SOURCE_MESSAGE_ID, previousGoalId: null, - goal: goalSnapshot(), + goal: currentGoal, + })) + }, + acceptClear() { + if (!sendFrame || !pendingClearRequest || !currentGoal) { + throw new Error('fake Goal gateway has no pending goals.clear request') + } + const { id } = pendingClearRequest + const previousGoal = currentGoal + pendingClearRequest = null + currentGoal = null + streamSeq += 1 + sendFrame(JSON.stringify({ + type: 'event', + event: 'session.event.goal', + payload: { + session_key: SESSION_KEY, + session_id: SESSION_ID, + epoch: 1, + stream_seq: streamSeq, + event_type: 'cleared', + state_revision: previousGoal.stateRevision + 1, + progress_revision: previousGoal.progressRevision, + previous_goal_id: previousGoal.goalId, + goal: null, + }, + })) + sendFrame(response(id, { + accepted: true, + sessionKey: SESSION_KEY, + sessionId: SESSION_ID, + epoch: 1, + previousGoalId: previousGoal.goalId, + stateRevision: previousGoal.stateRevision + 1, + goal: null, })) }, emitGoal(goal) { if (!sendFrame) throw new Error('fake Goal gateway is not connected') + currentGoal = goal streamSeq += 1 sendFrame(JSON.stringify({ type: 'event', @@ -451,6 +506,162 @@ test('Goal mode renders mocked continuation snapshots without correctness pollin expect(gateway.methods.filter(method => forbiddenGoalMethods.includes(method))).toEqual([]) }) +for (const placement of ['tail fallback', 'inline assistant outcome'] as const) { + test(`Completed Goal removal works from the ${placement}`, async ({ page }) => { + const inline = placement === 'inline assistant outcome' + const history = inline ? [ + { + role: 'user', + text: OBJECTIVE, + id: GOAL_SOURCE_MESSAGE_ID, + message_id: GOAL_SOURCE_MESSAGE_ID, + timestamp: 1_800_000_000, + turn_context: { turn_id: GOAL_TERMINAL_TURN_ID }, + }, + { + role: 'assistant', + text: GOAL_TERMINAL_REPLY, + id: 'message-goal-terminal', + message_id: 'message-goal-terminal', + timestamp: 1_800_000_001, + turn_context: { turn_id: GOAL_TERMINAL_TURN_ID }, + }, + ] : [] + const gateway = await installFakeGoalGateway(page, { goalRemoval: true, history }) + await page.goto(CONTROL_URL + 'chat?session=' + encodeURIComponent(SESSION_KEY)) + await expect(page.locator('.conn-pill.connected')).toBeVisible({ timeout: 10_000 }) + await expect(page.locator('.chat-textarea')).toBeEditable({ timeout: 10_000 }) + if (inline) { + await expect(page.locator('.msg-ai').filter({ hasText: GOAL_TERMINAL_REPLY })) + .toHaveCount(1) + } + + gateway.emitGoal(goalSnapshot()) + const ribbon = page.locator('.goal-ribbon') + await expect(ribbon).toHaveAttribute('data-status', 'active') + + // The model's completion decision arrives before the final task settles. + // Removal belongs to the settled outcome, not this transient ribbon. + gateway.emitGoal(goalSnapshot({ status: 'complete', stateRevision: 2 })) + await expect(ribbon).toHaveAttribute('data-status', 'complete') + await expect(page.locator('.goal-outcome')).toHaveCount(0) + await expect(page.getByRole('button', { name: 'Remove goal', exact: true })).toHaveCount(0) + + gateway.emitGoal(goalSnapshot({ + status: 'complete', + stateRevision: 3, + activeTaskId: null, + executionState: 'idle', + turnsSettled: 1, + terminalTurnId: inline ? GOAL_TERMINAL_TURN_ID : null, + terminalReason: 'complete', + finishedAt: 4_000, + })) + await expect(ribbon).toHaveCount(0) + const outcome = page.locator(inline + ? '.msg-ai .goal-outcome--inline' + : '.goal-outcome:not(.goal-outcome--inline)') + await expect(page.locator('.goal-outcome')).toHaveCount(1) + await expect(outcome).toBeVisible() + const removeButton = outcome.getByRole('button', { name: 'Remove goal', exact: true }) + await expect(removeButton).toBeEnabled() + + // The inline footer also carries message actions. On narrow screens it + // must leave enough room for the complete removal label and touch target. + await page.setViewportSize({ width: 390, height: 844 }) + await expect(removeButton).toBeInViewport() + await expect.poll(async () => removeButton.evaluate(button => { + const bounds = button.getBoundingClientRect() + const label = button.querySelector('span')! + const range = document.createRange() + range.selectNodeContents(label) + return { + fits: bounds.left >= 0 && bounds.right <= window.innerWidth, + touchTarget: bounds.width >= 44 && bounds.height >= 44, + labelLines: range.getClientRects().length, + } + })).toEqual({ fits: true, touchTarget: true, labelLines: 1 }) + + // Exercise keyboard access through the full ChatView confirmation path. + await removeButton.focus() + await page.keyboard.press('Enter') + const dialog = page.getByRole('dialog', { name: 'Remove this goal?' }) + await expect(dialog).toBeVisible() + await dialog.getByRole('button', { name: 'Cancel', exact: true }).click() + await expect(dialog).toHaveCount(0) + await expect(outcome).toBeVisible() + expect(gateway.clearParams).toEqual([]) + + await removeButton.click() + await dialog.getByRole('button', { name: 'Remove goal', exact: true }).click() + await expect.poll(() => gateway.clearParams).toHaveLength(1) + expect(gateway.clearParams[0]).toMatchObject({ + sessionKey: SESSION_KEY, + expectedGoalId: GOAL_ID, + expectedStateRevision: 3, + }) + expect(gateway.clearParams[0]?.clientRequestId).toMatch(/^[0-9a-f-]{36}$/) + await expect(removeButton).toBeDisabled() + + gateway.acceptClear() + await expect(page.locator('.goal-outcome')).toHaveCount(0) + await expect(ribbon).toHaveCount(0) + expect(gateway.methods.filter(method => method === 'goals.clear')).toHaveLength(1) + if (inline) { + await expect(page.locator('.msg-ai').filter({ hasText: GOAL_TERMINAL_REPLY })) + .toHaveCount(1) + } + + // The mock retains the cleared authoritative state across the new socket. + // A fresh hydration must not revive the completed Goal or remove history. + const hydrateCount = gateway.methods.filter(method => method === 'sessions.messages.hydrate').length + await page.reload() + await expect(page.locator('.conn-pill.connected')).toBeVisible({ timeout: 10_000 }) + await expect.poll(() => gateway.methods.filter(method => method === 'sessions.messages.hydrate').length) + .toBeGreaterThan(hydrateCount) + await expect(page.locator('.chat-textarea')).toBeEditable({ timeout: 10_000 }) + await expect(page.locator('.goal-outcome')).toHaveCount(0) + await expect(ribbon).toHaveCount(0) + expect(gateway.clearParams).toHaveLength(1) + if (inline) { + await expect(page.locator('.msg-ai').filter({ hasText: GOAL_TERMINAL_REPLY })) + .toHaveCount(1) + } + }) +} + +test('Completed Goal removal confirmation cannot clear a replacement Goal', async ({ page }) => { + const gateway = await installFakeGoalGateway(page, { goalRemoval: true }) + await page.goto(CONTROL_URL + 'chat?session=' + encodeURIComponent(SESSION_KEY)) + await expect(page.locator('.conn-pill.connected')).toBeVisible({ timeout: 10_000 }) + await expect(page.locator('.chat-textarea')).toBeEditable({ timeout: 10_000 }) + gateway.emitGoal(goalSnapshot({ + status: 'complete', + stateRevision: 3, + activeTaskId: null, + executionState: 'idle', + turnsSettled: 1, + terminalReason: 'complete', + finishedAt: 4_000, + })) + await page.locator('.goal-outcome') + .getByRole('button', { name: 'Remove goal', exact: true }).click() + const dialog = page.getByRole('dialog', { name: 'Remove this goal?' }) + await expect(dialog).toBeVisible() + + const replacementObjective = 'Verify a new synthetic report' + gateway.emitGoal(goalSnapshot({ + goalId: 'goal-e2e-replacement', + objective: replacementObjective, + stateRevision: 1, + })) + await expect(page.locator('.goal-ribbon')).toContainText(replacementObjective) + await dialog.getByRole('button', { name: 'Remove goal', exact: true }).click() + await expect(dialog).toHaveCount(0) + await expect(page.locator('.goal-ribbon')).toContainText(replacementObjective) + expect(gateway.clearParams).toEqual([]) +}) + test('Composer Add menu stays above active Goal progress across responsive layouts', async ({ page }) => { await page.setViewportSize({ width: 1368, height: 546 }) await page.emulateMedia({ colorScheme: 'dark', reducedMotion: 'no-preference' }) diff --git a/opensquilla-webui/src/components/chat/AssistantMessage.vue b/opensquilla-webui/src/components/chat/AssistantMessage.vue index c22dfe0def..b02bbb78a3 100644 --- a/opensquilla-webui/src/components/chat/AssistantMessage.vue +++ b/opensquilla-webui/src/components/chat/AssistantMessage.vue @@ -270,13 +270,20 @@ -
+
Promise resolveWorkspacePreviewResource?: (sessionKey: string, documentId: string) => Promise }>() @@ -566,6 +575,7 @@ const emit = defineEmits<{ planImplementNew: [target: PlanCardActionTarget] planReplan: [target: PlanCardActionTarget] openSession: [sessionKey: string] + goalClear: [goal: GoalSnapshot] }>() // Absolute label is static; only the relative label subscribes to the shared @@ -1347,6 +1357,10 @@ function fmtUsd(value: number): string { margin-top: 0.25rem; } +.msg-ai-footer--goal { + flex-wrap: wrap; +} + .msg-provenance-chip { align-items: center; background: color-mix(in srgb, var(--accent) 8%, var(--bg-surface)); diff --git a/opensquilla-webui/src/components/chat/ChatMessageList.goal-anchors.test.ts b/opensquilla-webui/src/components/chat/ChatMessageList.goal-anchors.test.ts index 3ef1e9a07d..a0d3c85832 100644 --- a/opensquilla-webui/src/components/chat/ChatMessageList.goal-anchors.test.ts +++ b/opensquilla-webui/src/components/chat/ChatMessageList.goal-anchors.test.ts @@ -1,6 +1,6 @@ // @vitest-environment happy-dom -import { afterEach, describe, expect, it } from 'vitest' +import { afterEach, describe, expect, it, vi } from 'vitest' import { createApp, nextTick, type App } from 'vue' import i18n from '@/i18n' import type { GoalSnapshot } from '@/composables/chat/useChatGoals' @@ -102,6 +102,7 @@ async function mountList( text: 'A later ordinary reply.', }), ], + overrides: Record = {}, ) { const host = document.createElement('div') document.body.appendChild(host) @@ -124,6 +125,7 @@ async function mountList( toolSecondaryText: () => '', copyMessage: async () => true, downloadAttachment: async () => true, + ...overrides, }) app.use(i18n) app.mount(host) @@ -159,6 +161,42 @@ describe('ChatMessageList Goal anchors', () => { expect(queued.querySelector('.msg-goal-outcome')).toBeNull() }) + it('forwards removal of the anchored outcome with its Goal identity', async () => { + const goal = completedGoal() + const onGoalClear = vi.fn() + const host = await mountList(goal, undefined, { goalRemovable: true, onGoalClear }) + const buttons = host.querySelectorAll('.msg-goal-outcome button') + + expect(buttons).toHaveLength(1) + expect(buttons[0]?.textContent).toContain('Remove goal') + buttons[0]?.click() + expect(onGoalClear).toHaveBeenCalledExactlyOnceWith(goal) + }) + + it('disables inline removal during a pending Goal mutation', async () => { + const onGoalClear = vi.fn() + const host = await mountList(completedGoal(), undefined, { + goalRemovable: true, + goalBusy: true, + onGoalClear, + }) + const button = host.querySelector('.msg-goal-outcome button') + + expect(button?.disabled).toBe(true) + button?.click() + expect(onGoalClear).not.toHaveBeenCalled() + }) + + it('keeps shared outcomes visible without exposing removal', async () => { + const host = await mountList(completedGoal(), undefined, { + goalRemovable: true, + shareMode: true, + }) + + expect(host.querySelector('.msg-goal-outcome')).not.toBeNull() + expect(host.querySelector('.msg-goal-outcome button')).toBeNull() + }) + it('does not guess anchors when an older backend omits identities', async () => { const host = await mountList(completedGoal({ sourceMessageId: null, diff --git a/opensquilla-webui/src/components/chat/ChatMessageList.vue b/opensquilla-webui/src/components/chat/ChatMessageList.vue index 02494e697e..d7305b71b3 100644 --- a/opensquilla-webui/src/components/chat/ChatMessageList.vue +++ b/opensquilla-webui/src/components/chat/ChatMessageList.vue @@ -92,6 +92,8 @@ :show-turn-outcome="isTurnTip(entry.index)" :goal-outcome="goalOutcomeFor(messages[entry.index], entry.index)" :goal-elapsed="goalElapsed" + :goal-removable="goalRemovable && !shareMode" + :goal-busy="goalBusy" :resolve-session-availability="resolveSessionAvailability" :resolve-workspace-preview-resource="resolveWorkspacePreviewResource" @fork="$emit('forkConversation', forkThroughTurnId(entry.index))" @@ -110,6 +112,7 @@ @plan-implement-current="$emit('planImplementCurrent', $event)" @plan-implement-new="$emit('planImplementNew', $event)" @plan-replan="$emit('planReplan', $event)" + @goal-clear="$emit('goalClear', $event)" /> Promise resolveWorkspacePreviewResource?: (sessionKey: string, documentId: string) => Promise /** Required for long-history virtualization; omitted by legacy embedders. */ @@ -244,6 +249,7 @@ const emit = defineEmits<{ planImplementCurrent: [target: PlanCardActionTarget] planImplementNew: [target: PlanCardActionTarget] planReplan: [target: PlanCardActionTarget] + goalClear: [goal: GoalSnapshot] }>() const VIRTUALIZATION_STORAGE_KEY = 'opensquilla.chat.virtualizeHistory' diff --git a/opensquilla-webui/src/components/chat/GoalOutcomeNotice.test.ts b/opensquilla-webui/src/components/chat/GoalOutcomeNotice.test.ts index 9c04c35f93..b2df463890 100644 --- a/opensquilla-webui/src/components/chat/GoalOutcomeNotice.test.ts +++ b/opensquilla-webui/src/components/chat/GoalOutcomeNotice.test.ts @@ -1,6 +1,6 @@ // @vitest-environment happy-dom -import { afterEach, describe, expect, it } from 'vitest' +import { afterEach, describe, expect, it, vi } from 'vitest' import { createApp, h } from 'vue' import { createI18n } from 'vue-i18n' import type { GoalSnapshot } from '@/composables/chat/useChatGoals' @@ -91,6 +91,45 @@ describe('GoalOutcomeNotice', () => { expect(host.querySelector('button')).toBeNull() }) + it.each([false, true])('emits the settled Goal when removed (inline: %s)', (inline) => { + const goal = completedGoal() + const onClear = vi.fn() + const host = mountNotice({ goal, inline, removable: true, onClear }) + const button = host.querySelector('button')! + + expect(button.textContent).toContain('Remove goal') + expect(button.type).toBe('button') + expect(button.disabled).toBe(false) + button.click() + + expect(onClear).toHaveBeenCalledExactlyOnceWith(goal) + expect(onClear.mock.calls[0]![0]).toBe(goal) + }) + + it('disables removal while a Goal operation is pending', () => { + const onClear = vi.fn() + const host = mountNotice({ removable: true, busy: true, onClear }) + const button = host.querySelector('button')! + + expect(button.disabled).toBe(true) + button.click() + // Synthetic events can bypass a disabled button; the handler must guard too. + button.dispatchEvent(new MouseEvent('click', { bubbles: true })) + + expect(onClear).not.toHaveBeenCalled() + }) + + it.each([ + { activeTaskId: 'task-settling', executionState: 'working' as const }, + { activeTaskId: 'task-settling', executionState: 'idle' as const }, + { executionState: 'queued' as const }, + { status: 'active' as const }, + ])('hides removal before the terminal outcome has settled (%j)', (overrides) => { + const host = mountNotice({ removable: true, goal: completedGoal(overrides) }) + + expect(host.querySelector('button')).toBeNull() + }) + it('omits zero accounting values from the inline achieved label', () => { const host = mountNotice({ inline: true, diff --git a/opensquilla-webui/src/components/chat/GoalOutcomeNotice.vue b/opensquilla-webui/src/components/chat/GoalOutcomeNotice.vue index 100c244bb8..0b7fdd16fe 100644 --- a/opensquilla-webui/src/components/chat/GoalOutcomeNotice.vue +++ b/opensquilla-webui/src/components/chat/GoalOutcomeNotice.vue @@ -18,7 +18,16 @@ {{ metaText }} - +
@@ -26,17 +35,31 @@ import { computed } from 'vue' import { useI18n } from 'vue-i18n' import Icon from '@/components/Icon.vue' -import type { GoalSnapshot } from '@/composables/chat/useChatGoals' +import { goalHasSettledTerminalOutcome, type GoalSnapshot } from '@/composables/chat/useChatGoals' const props = withDefaults(defineProps<{ goal: GoalSnapshot elapsed: string inline?: boolean + removable?: boolean + busy?: boolean }>(), { inline: false, + removable: false, + busy: false, }) +const emit = defineEmits<{ + clear: [goal: GoalSnapshot] +}>() + const { t } = useI18n() +const canRemove = computed(() => props.removable && goalHasSettledTerminalOutcome(props.goal)) + +function clearGoal() { + if (props.busy || !canRemove.value) return + emit('clear', props.goal) +} const titleText = computed(() => { if (!props.inline) return t('chat.goal.completeTitle') @@ -80,6 +103,7 @@ const metaText = computed(() => { } .goal-outcome--inline { display: inline-flex; + flex-wrap: wrap; width: auto; max-width: 100%; margin: 0; @@ -130,6 +154,34 @@ const metaText = computed(() => { text-overflow: ellipsis; white-space: nowrap; } +.goal-outcome__remove { + display: inline-flex; + flex: 0 0 auto; + align-items: center; + justify-content: center; + gap: var(--sp-1, 4px); + min-height: 28px; + padding: var(--sp-1, 4px) var(--sp-2, 8px); + border: 1px solid var(--border); + border-radius: var(--radius-sm); + background: transparent; + color: var(--text-muted, var(--muted)); + font: inherit; + white-space: nowrap; + cursor: pointer; +} +.goal-outcome__remove:hover:not(:disabled) { + color: var(--danger); + background: color-mix(in srgb, var(--danger) 10%, transparent); +} +.goal-outcome__remove:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} +.goal-outcome__remove:disabled { + opacity: 0.5; + cursor: default; +} @media (max-width: 720px) { .goal-outcome { align-items: stretch; @@ -137,6 +189,20 @@ const metaText = computed(() => { } .goal-outcome--inline { display: flex; + flex-direction: row; + align-items: center; + } + .goal-outcome__summary { + flex-wrap: wrap; + } + .goal-outcome__title { + flex-shrink: 1; + white-space: normal; + } + .goal-outcome__remove { + align-self: flex-start; + min-width: 44px; + min-height: 44px; } } diff --git a/opensquilla-webui/src/components/chat/GoalRibbon.test.ts b/opensquilla-webui/src/components/chat/GoalRibbon.test.ts index d0b7528d02..12a4e64397 100644 --- a/opensquilla-webui/src/components/chat/GoalRibbon.test.ts +++ b/opensquilla-webui/src/components/chat/GoalRibbon.test.ts @@ -77,6 +77,10 @@ async function openActions(host: HTMLElement) { await nextTick() } +function openMenu(host: HTMLElement) { + host.querySelector('button[aria-label="Goal actions"]')?.click() +} + afterEach(() => { for (const app of mountedApps.splice(0)) app.unmount() document.body.innerHTML = '' @@ -416,6 +420,34 @@ describe('GoalRibbon', () => { expect(host.querySelector('[aria-haspopup="menu"]')).toBeNull() }) + it('keeps the overflow menu reachable on a settled complete Goal', async () => { + const onClear = vi.fn() + const host = mountRibbon({ + goal: goal({ status: 'complete', activeTaskId: null, executionState: 'idle' }), + onClear, + }) + + expect(host.textContent).not.toContain('Finalizing result') + const trigger = host.querySelector('button[aria-label="Goal actions"]') + expect(trigger).not.toBeNull() + await openActions(host) + const items = [...host.querySelectorAll('[role="menuitem"]')] + expect(items.map(item => item.textContent?.trim())).toEqual(['Edit goal', 'Remove goal']) + items[1]?.click() + expect(onClear).toHaveBeenCalledOnce() + }) + + it('does not reopen the overflow menu when a complete Goal is still settling', async () => { + const host = mountRibbon({ + goal: goal({ status: 'complete', activeTaskId: 'task-1', executionState: 'working' }), + }) + + expect(host.querySelector('button[aria-label="Goal actions"]')).toBeNull() + openMenu(host) + await nextTick() + expect(host.querySelector('[role="menu"]')).toBeNull() + }) + it('uses touch-sized actions on narrow layouts', () => { expect(goalRibbonSource).toContain('min-height: 44px') expect(goalRibbonSource).toContain('min-width: 44px') diff --git a/opensquilla-webui/src/components/chat/GoalRibbon.vue b/opensquilla-webui/src/components/chat/GoalRibbon.vue index 8880082467..0a340eec94 100644 --- a/opensquilla-webui/src/components/chat/GoalRibbon.vue +++ b/opensquilla-webui/src/components/chat/GoalRibbon.vue @@ -78,7 +78,7 @@
@@ -86,7 +86,7 @@ {{ t('chat.goal.finalizing') }}