From 7ab56b0ddbde314dc739ae90a6f4c55ea20700bf Mon Sep 17 00:00:00 2001
From: kingxiao630 <320199328+kingxiao630@users.noreply.github.com>
Date: Wed, 2 Sep 2026 13:30:45 +0800
Subject: [PATCH 1/2] fix(chat): keep the overflow menu reachable on settled
 complete Goals

A completed Goal hid both the lifecycle action and the overflow menu, so goals.clear had no entry point and the completed ribbon stayed on screen forever. Suppress interactions only while the final task is still settling; once idle, restore the Edit/Remove menu so owners can clear the completed Goal.

Refs #1447
---
 .../src/components/chat/GoalRibbon.test.ts    | 32 +++++++++++++++++++
 .../src/components/chat/GoalRibbon.vue        | 19 ++++++++---
 2 files changed, 47 insertions(+), 4 deletions(-)

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<HTMLButtonElement>('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<HTMLButtonElement>('button[aria-label="Goal actions"]')
+    expect(trigger).not.toBeNull()
+    await openActions(host)
+    const items = [...host.querySelectorAll<HTMLButtonElement>('[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 @@
       </div>
       <span v-if="!editing" ref="actionsRef" class="goal-ribbon__actions">
         <span
-          v-if="goal.status === 'complete'"
+          v-if="goal.status === 'complete' && !completeSettled"
           class="goal-ribbon__finalizing"
           role="status"
         >
@@ -86,7 +86,7 @@
           {{ t('chat.goal.finalizing') }}
         </span>
         <button
-          v-else
+          v-else-if="goal.status !== 'complete'"
           type="button"
           class="goal-ribbon__primary"
           :disabled="busy"
@@ -98,7 +98,7 @@
           {{ lifecycleLabel }}
         </button>
         <button
-          v-if="goal.status !== 'complete'"
+          v-if="completeMenuAvailable"
           ref="menuTrigger"
           type="button"
           class="goal-ribbon__menu-trigger"
@@ -210,6 +210,17 @@ const goalHasUnsettledTask = computed(() => (
   props.goal.activeTaskId !== null || props.goal.executionState !== 'idle'
 ))
 
+// A completed Goal only suppresses interactions while its final task is still
+// settling. Once idle, the overflow menu stays reachable so owners can edit
+// the objective or clear the completed Goal instead of the notice sticking
+// to the conversation forever (issue 1447).
+const completeSettled = computed(() => (
+  props.goal.status === 'complete' && !goalHasUnsettledTask.value
+))
+const completeMenuAvailable = computed(() => (
+  props.goal.status !== 'complete' || completeSettled.value
+))
+
 const lifecycleAction = computed<LifecycleAction>(() => {
   if (props.connectionTakeoverAvailable) return 'takeover'
   return props.goal.status === 'active' ? 'pause' : 'resume'
@@ -373,7 +384,7 @@ function focusMenuItem(position: 'first' | 'last') {
 }
 
 function openMenu(position: 'first' | 'last' = 'first') {
-  if (props.busy || props.goal.status === 'complete') return
+  if (props.busy || !completeMenuAvailable.value) return
   menuOpen.value = true
   void nextTick(() => focusMenuItem(position))
 }

From c6ab57bf4d1987339bc8f3fe41faa5e8c7e26e21 Mon Sep 17 00:00:00 2001
From: Open-Squilla <275096992+Open-Squilla@users.noreply.github.com>
Date: Thu, 17 Sep 2026 05:55:26 +0800
Subject: [PATCH 2/2] Expose removal on completed Goal outcomes

---
 opensquilla-webui/e2e/goal-mode.spec.ts       | 225 +++++++++++++++++-
 .../src/components/chat/AssistantMessage.vue  |  16 +-
 .../chat/ChatMessageList.goal-anchors.test.ts |  40 +++-
 .../src/components/chat/ChatMessageList.vue   |   6 +
 .../components/chat/GoalOutcomeNotice.test.ts |  41 +++-
 .../src/components/chat/GoalOutcomeNotice.vue |  70 +++++-
 .../src/views/ChatView.goal-outcome.test.ts   |   6 +-
 opensquilla-webui/src/views/ChatView.vue      |  21 +-
 8 files changed, 408 insertions(+), 17 deletions(-)

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<typeof goalSnapshot>
 
 type MockGoalGateway = {
   acceptGoal: () => void
+  acceptClear: () => void
   emitGoal: (goal: GoalFixture) => void
   methods: string[]
   setParams: Array<Record<string, unknown>>
+  clearParams: Array<Record<string, unknown>>
 }
 
 function response(id: string | number | undefined, payload: unknown) {
@@ -116,15 +120,22 @@ async function installStableHttpStubs(page: Page): Promise<void> {
 
 async function installFakeGoalGateway(
   page: Page,
-  options: { sessionRouting?: boolean } = {},
+  options: {
+    sessionRouting?: boolean
+    goalRemoval?: boolean
+    history?: Array<Record<string, unknown>>
+  } = {},
 ): Promise<MockGoalGateway> {
   const methods: string[] = []
   const setParams: Array<Record<string, unknown>> = []
+  const clearParams: Array<Record<string, unknown>> = []
   let sendFrame: ((frame: string) => void) | null = null
   let pendingGoalRequest: {
     id: string | number | undefined
     params: Record<string, unknown>
   } | 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<string, unknown>)
+        pendingClearRequest = { id: frame.id as string | number | undefined }
+        return
+      }
 
       const payloads: Record<string, unknown> = {
         '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 @@
         <SourcesRow v-if="message.toolCalls?.length" ref="sourcesRowRef" :calls="message.toolCalls" :sources="message.sources ?? []" />
       </div>
 
-      <div v-if="showFooter" class="msg-ai-footer">
+      <div
+        v-if="showFooter"
+        class="msg-ai-footer"
+        :class="{ 'msg-ai-footer--goal': goalOutcome }"
+      >
         <GoalOutcomeNotice
           v-if="goalOutcome"
           class="msg-goal-outcome"
           :goal="goalOutcome"
           :elapsed="goalElapsed || '0s'"
+          :removable="goalRemovable && !shareMode"
+          :busy="goalBusy"
           inline
+          @clear="$emit('goalClear', $event)"
         />
         <span
           v-if="isCronMessage"
@@ -545,6 +552,8 @@ const props = defineProps<{
   showTurnOutcome?: boolean
   goalOutcome?: GoalSnapshot | null
   goalElapsed?: string
+  goalRemovable?: boolean
+  goalBusy?: boolean
   resolveSessionAvailability?: (sessionKey: string) => Promise<boolean>
   resolveWorkspacePreviewResource?: (sessionKey: string, documentId: string) => Promise<WorkbenchResource | null>
 }>()
@@ -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<string, unknown> = {},
 ) {
   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<HTMLButtonElement>('.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<HTMLButtonElement>('.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)"
         />
         <SystemMessage
           v-else
@@ -204,6 +207,8 @@ const props = defineProps<{
   isStreaming?: boolean
   goal?: GoalSnapshot | null
   goalElapsed?: string
+  goalRemovable?: boolean
+  goalBusy?: boolean
   resolveSessionAvailability?: (sessionKey: string) => Promise<boolean>
   resolveWorkspacePreviewResource?: (sessionKey: string, documentId: string) => Promise<WorkbenchResource | null>
   /** 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 @@
       </span>
       <span v-if="metaText && !inline" class="goal-outcome__meta">{{ metaText }}</span>
     </span>
-
+    <button
+      v-if="canRemove"
+      type="button"
+      class="goal-outcome__remove"
+      :disabled="busy"
+      @click="clearGoal"
+    >
+      <Icon name="trash" :size="14" aria-hidden="true" />
+      <span>{{ t('chat.goal.remove') }}</span>
+    </button>
   </div>
 </template>
 
@@ -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;
   }
 }
 </style>
diff --git a/opensquilla-webui/src/views/ChatView.goal-outcome.test.ts b/opensquilla-webui/src/views/ChatView.goal-outcome.test.ts
index a2423eee6a..6351a159d4 100644
--- a/opensquilla-webui/src/views/ChatView.goal-outcome.test.ts
+++ b/opensquilla-webui/src/views/ChatView.goal-outcome.test.ts
@@ -14,9 +14,11 @@ describe('ChatView Goal outcome placement', () => {
     )
   })
 
-  it('keeps settled outcomes read-only while active Goal controls remain available', () => {
+  it('connects settled and active Goal removal to the same guarded confirmation', () => {
     expect(chatViewSource).not.toContain('@goal-edit=')
-    expect(chatViewSource).not.toContain('@goal-clear=')
+    expect(chatViewSource).toContain('@goal-clear="clearGoal"')
+    expect(chatViewSource).toContain(':goal-removable="!shareMode && !forkTransition"')
+    expect(chatViewSource).toContain(':removable="!shareMode && !forkTransition"')
     expect(chatViewSource).toContain('<GoalRibbon')
     expect(chatViewSource).toContain('@edit="editGoalFromRibbon"')
     expect(chatViewSource).toContain('@clear="clearGoal"')
diff --git a/opensquilla-webui/src/views/ChatView.vue b/opensquilla-webui/src/views/ChatView.vue
index 9251286f56..95218d87a4 100644
--- a/opensquilla-webui/src/views/ChatView.vue
+++ b/opensquilla-webui/src/views/ChatView.vue
@@ -208,6 +208,8 @@
           :scroll-epoch="scrollEpoch"
           :goal="currentGoalRun"
           :goal-elapsed="goalLastElapsed"
+          :goal-removable="!shareMode && !forkTransition"
+          :goal-busy="goalBusy"
           :resolve-session-availability="resolveCreatedSessionAvailability"
           :resolve-workspace-preview-resource="resolveWorkspacePreviewResource"
           @fork-conversation="forkConversation"
@@ -232,6 +234,7 @@
           @plan-implement-current="implementCurrentPlan"
           @plan-implement-new="implementPlanInNewTask"
           @plan-replan="beginPlanRevision"
+          @goal-clear="clearGoal"
         >
           <template #router-strip="{ message: msg }">
             <RouterFxStrip v-if="shouldRenderRouterStrip(msg)" :message="msg" />
@@ -273,6 +276,9 @@
           v-if="goalOutcomeGoal && !goalOutcomeHasMessageAnchor"
           :goal="goalOutcomeGoal"
           :elapsed="goalLastElapsed"
+          :removable="!shareMode && !forkTransition"
+          :busy="goalBusy"
+          @clear="clearGoal"
         />
         <PlanCard
           v-if="currentPlan && !currentPlanInHistory"
@@ -828,6 +834,7 @@ import {
   goalHasRenderedTerminalAnchor,
   goalStatusIsTerminal,
   type GoalSetAcceptedPayload,
+  type GoalSnapshot,
   useChatGoals,
 } from '@/composables/chat/useChatGoals'
 import { useChatDraftPersistence } from '@/composables/chat/useChatDraftPersistence'
@@ -3170,10 +3177,18 @@ async function editGoalFromRibbon(
   }
 }
 
-async function clearGoal() {
+async function clearGoal(requestedGoal: GoalSnapshot | null = currentGoalRun.value) {
   const requestedSessionKey = sessionKey.value
-  const requestedGoal = currentGoalRun.value
-  if (!requestedGoal || goalBusy.value) return false
+  const currentAtRequest = currentGoalRun.value
+  if (
+    !requestedGoal
+    || !currentAtRequest
+    || goalBusy.value
+    || requestedGoal.sessionKey !== requestedSessionKey
+    || requestedGoal.goalId !== currentAtRequest.goalId
+    || requestedGoal.sessionId !== currentAtRequest.sessionId
+    || requestedGoal.epoch !== currentAtRequest.epoch
+  ) return false
   const requestedGoalIdentity = {
     goalId: requestedGoal.goalId,
     sessionId: requestedGoal.sessionId,