From 5be8f608109843fce94f21fd75287f8d4fee3ec6 Mon Sep 17 00:00:00 2001
From: chengluyu <2239547+chengluyu@users.noreply.github.com>
Date: Mon, 13 Jul 2026 22:43:31 +0800
Subject: [PATCH 1/5] fix(web): refine goal mode controls

---
 .../kimi-web/src/components/chat/Composer.vue |   3 +-
 .../src/components/chat/GoalStrip.vue         | 211 ++++++++++++++++--
 apps/kimi-web/src/i18n/locales/en/status.ts   |   3 +
 apps/kimi-web/src/i18n/locales/zh/status.ts   |   3 +
 4 files changed, 200 insertions(+), 20 deletions(-)

diff --git a/apps/kimi-web/src/components/chat/Composer.vue b/apps/kimi-web/src/components/chat/Composer.vue
index 368069faaf..336e777696 100644
--- a/apps/kimi-web/src/components/chat/Composer.vue
+++ b/apps/kimi-web/src/components/chat/Composer.vue
@@ -1236,7 +1236,8 @@ function selectModel(modelId: string): void {
   --composer-send-inset: var(--space-2);
   position: relative;
   border: 1px solid var(--line);
-  border-radius: calc((var(--composer-send-size) / 2) + var(--composer-send-inset));
+  border-radius: calc((var(--composer-send-size) / 2) + var(--composer-send-inset) + var(--space-3));
+  corner-shape: superellipse(1.5);
   background: var(--bg);
   box-shadow: var(--shadow-md);
   transition: border-color 0.15s, box-shadow 0.15s;
diff --git a/apps/kimi-web/src/components/chat/GoalStrip.vue b/apps/kimi-web/src/components/chat/GoalStrip.vue
index 11dab6b78c..61cd7032d7 100644
--- a/apps/kimi-web/src/components/chat/GoalStrip.vue
+++ b/apps/kimi-web/src/components/chat/GoalStrip.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import type { AppGoal } from '../../api/types';
 import Card from '../ui/Card.vue';
@@ -13,6 +13,9 @@ const emit = defineEmits<{ controlGoal: [action: 'pause' | 'resume' | 'cancel']
 const { t } = useI18n();
 
 const expanded = ref(false);
+const cancelConfirmOpen = ref(false);
+const cancelActionRef = ref<HTMLElement | null>(null);
+const cancelPopoverStyle = ref<Record<string, string>>({});
 
 watch(
   () => props.forceExpanded,
@@ -45,12 +48,61 @@ function formatMs(ms: number): string {
   const hour = Math.floor(min / 60);
   return `${hour}h ${min % 60}m`;
 }
+
+function updateCancelPopoverPosition(): void {
+  const anchor = cancelActionRef.value;
+  if (!anchor || typeof window === 'undefined') return;
+  const rect = anchor.getBoundingClientRect();
+  const width = 240;
+  const left = Math.min(
+    window.innerWidth - width - 8,
+    Math.max(8, rect.right - width),
+  );
+  const arrowRight = Math.min(
+    width - 12,
+    Math.max(12, width - (rect.left + rect.width / 2 - left)),
+  );
+  cancelPopoverStyle.value = {
+    left: `${left}px`,
+    top: `${Math.max(8, rect.top - 8)}px`,
+    '--goal-cancel-arrow-right': `${arrowRight}px`,
+  };
+}
+
+function onCancelPopoverDocumentMouseDown(event: MouseEvent): void {
+  const target = event.target as Node | null;
+  if (target && cancelActionRef.value?.contains(target)) return;
+  cancelConfirmOpen.value = false;
+}
+
+function setCancelConfirmOpen(open: boolean): void {
+  cancelConfirmOpen.value = open;
+  if (typeof window === 'undefined') return;
+  if (open) {
+    updateCancelPopoverPosition();
+    document.addEventListener('mousedown', onCancelPopoverDocumentMouseDown);
+    window.addEventListener('resize', updateCancelPopoverPosition);
+    window.addEventListener('scroll', updateCancelPopoverPosition, true);
+  } else {
+    document.removeEventListener('mousedown', onCancelPopoverDocumentMouseDown);
+    window.removeEventListener('resize', updateCancelPopoverPosition);
+    window.removeEventListener('scroll', updateCancelPopoverPosition, true);
+  }
+}
+
+function confirmCancel(): void {
+  setCancelConfirmOpen(false);
+  emit('controlGoal', 'cancel');
+}
+
+onBeforeUnmount(() => setCancelConfirmOpen(false));
 </script>
 
 <template>
   <Card class="goal-strip" :class="{ expanded }">
     <template #head>
       <button class="goal-row" type="button" @click="expanded = !expanded">
+        <Icon class="goal-icon" name="target" size="md" />
         <span class="goal-kicker">{{ t('status.goalLabel') }}</span>
         <span class="goal-objective" :class="{ 'expanded-hidden': expanded }">{{ goal.objective }}</span>
         <Badge
@@ -65,7 +117,7 @@ function formatMs(ms: number): string {
       </button>
     </template>
 
-    <template v-if="expanded" #default>
+    <template #default>
       <div class="goal-full">{{ goal.objective }}</div>
       <div v-if="goal.completionCriterion" class="goal-criterion">
         <span>Done when</span>
@@ -73,7 +125,7 @@ function formatMs(ms: number): string {
       </div>
     </template>
 
-    <template v-if="expanded" #foot>
+    <template #foot>
       <div class="goal-footer">
         <div class="goal-meta">
           <span>{{ goal.turnsUsed }} turns</span>
@@ -102,29 +154,62 @@ function formatMs(ms: number): string {
             <Icon name="play" size="md" />
             <span>{{ t('status.goalResume') }}</span>
           </Button>
-          <Button
-            size="sm"
-            variant="danger-soft"
-            class="goal-action"
-            @click.stop="emit('controlGoal', 'cancel')"
-          >
-            <Icon name="close" size="md" />
-            <span>{{ t('status.goalCancel') }}</span>
-          </Button>
+          <div ref="cancelActionRef" class="goal-cancel-action">
+            <Button
+              size="sm"
+              variant="danger-soft"
+              class="goal-action"
+              :aria-expanded="cancelConfirmOpen"
+              aria-haspopup="dialog"
+              @click.stop="setCancelConfirmOpen(!cancelConfirmOpen)"
+            >
+              <Icon name="close" size="md" />
+              <span>{{ t('status.goalCancel') }}</span>
+            </Button>
+          </div>
         </div>
       </div>
     </template>
   </Card>
+
+  <Teleport to="body">
+    <div
+      v-if="cancelConfirmOpen"
+      id="goal-cancel-confirm"
+      class="goal-cancel-popover"
+      role="dialog"
+      :aria-label="t('status.goalCancelConfirm')"
+      :style="cancelPopoverStyle"
+      @mousedown.stop
+    >
+      <p>{{ t('status.goalCancelConfirm') }}</p>
+      <div class="goal-cancel-popover__actions">
+        <Button size="sm" variant="secondary" @click="setCancelConfirmOpen(false)">
+          {{ t('status.goalCancelConfirmNo') }}
+        </Button>
+        <Button size="sm" variant="danger" @click="confirmCancel">
+          {{ t('status.goalCancelConfirmYes') }}
+        </Button>
+      </div>
+    </div>
+  </Teleport>
 </template>
 
 <style scoped>
 .goal-strip {
   --composer-send-size: 32px;
   --composer-send-inset: var(--space-2);
+  --goal-corner-radius: calc((var(--composer-send-size) / 2) + var(--composer-send-inset) + var(--space-3));
   margin: var(--space-2) var(--space-4) 0;
+  box-shadow: var(--shadow-md);
 }
 .goal-strip.ui-card {
-  border-radius: calc((var(--composer-send-size) / 2) + var(--composer-send-inset));
+  border-radius: var(--goal-corner-radius);
+  corner-shape: superellipse(1.5);
+}
+.goal-strip:not(.expanded).ui-card {
+  border-radius: var(--radius-full);
+  corner-shape: round;
 }
 .goal-strip :deep(.ui-card__foot) {
   padding: var(--composer-send-inset);
@@ -134,10 +219,31 @@ function formatMs(ms: number): string {
 .goal-strip :deep(.ui-card__foot) {
   padding-left: calc((var(--composer-send-inset) + var(--composer-send-size)) / 2);
 }
-/* When collapsed the body/foot slots are not rendered; collapse the (always-
-   rendered) Card body and drop the head border so the strip is a single row. */
-.goal-strip:not(.expanded) :deep(.ui-card__body) { display: none; }
-.goal-strip:not(.expanded) :deep(.ui-card__head) { border-bottom: none; }
+.goal-strip :deep(.ui-card__body) {
+  background: var(--color-surface-raised);
+  max-height: 480px;
+  overflow: hidden;
+  opacity: 1;
+  transition: max-height var(--duration-slow) var(--ease-out),
+    padding-top var(--duration-slow) var(--ease-out),
+    padding-bottom var(--duration-slow) var(--ease-out),
+    opacity var(--duration-base) var(--ease-out);
+}
+/* Collapse the body and footer while keeping both mounted so their height and
+   padding can animate instead of jumping between two layouts. */
+.goal-strip:not(.expanded) :deep(.ui-card__body) {
+  max-height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  opacity: 0;
+}
+.goal-strip :deep(.ui-card__head) {
+  border-bottom-color: var(--color-line);
+  transition: border-bottom-color var(--duration-base) var(--ease-out);
+}
+.goal-strip:not(.expanded) :deep(.ui-card__head) {
+  border-bottom-color: transparent;
+}
 
 .goal-row {
   width: 100%;
@@ -158,6 +264,11 @@ function formatMs(ms: number): string {
   font: var(--text-base)/var(--leading-normal) var(--font-ui);
   font-weight: var(--weight-semibold);
 }
+.goal-icon {
+  flex: none;
+  color: var(--color-success);
+  margin-right: calc(-1 * var(--space-1));
+}
 .goal-objective {
   min-width: 0;
   flex: 1;
@@ -201,7 +312,7 @@ function formatMs(ms: number): string {
 }
 .goal-full {
   color: var(--color-text);
-  font-size: var(--text-sm);
+  font-size: var(--text-base);
   line-height: var(--leading-normal);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
@@ -226,13 +337,30 @@ function formatMs(ms: number): string {
   width: 100%;
   min-width: 0;
 }
+.goal-strip :deep(.ui-card__foot) {
+  max-height: 100px;
+  overflow: hidden;
+  opacity: 1;
+  transition: max-height var(--duration-slow) var(--ease-out),
+    padding-top var(--duration-slow) var(--ease-out),
+    padding-bottom var(--duration-slow) var(--ease-out),
+    opacity var(--duration-base) var(--ease-out),
+    border-top-color var(--duration-base) var(--ease-out);
+}
+.goal-strip:not(.expanded) :deep(.ui-card__foot) {
+  max-height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  border-top-color: transparent;
+  opacity: 0;
+}
 .goal-meta {
   min-width: 0;
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-2);
   color: var(--color-text-muted);
-  font: 12px/var(--leading-normal) var(--font-ui);
+  font: var(--text-xs)/var(--leading-normal) var(--font-ui);
   font-weight: 450;
   font-variant-numeric: tabular-nums;
 }
@@ -252,6 +380,44 @@ function formatMs(ms: number): string {
 .goal-action :deep(.ui-button__content) {
   gap: var(--space-1);
 }
+.goal-cancel-action {
+  position: relative;
+}
+.goal-cancel-popover {
+  position: fixed;
+  z-index: var(--z-dropdown);
+  width: 240px;
+  padding: var(--space-3);
+  transform: translateY(-100%);
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-2xl);
+  box-shadow: var(--shadow-lg);
+  color: var(--color-text);
+}
+.goal-cancel-popover::after {
+  content: '';
+  position: absolute;
+  right: var(--goal-cancel-arrow-right, 32px);
+  bottom: -9px;
+  width: 16px;
+  height: 16px;
+  background: var(--color-surface-raised);
+  border-right: 1px solid var(--color-line);
+  border-bottom: 1px solid var(--color-line);
+  transform: rotate(45deg);
+}
+.goal-cancel-popover p {
+  margin: 0;
+  font-size: var(--text-sm);
+  line-height: var(--leading-normal);
+}
+.goal-cancel-popover__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  margin-top: var(--space-3);
+}
 @media (max-width: 640px) {
   .goal-strip {
     --composer-send-size: 36px;
@@ -261,4 +427,11 @@ function formatMs(ms: number): string {
     display: none;
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .goal-strip :deep(.ui-card__head),
+  .goal-strip :deep(.ui-card__body),
+  .goal-strip :deep(.ui-card__foot) {
+    transition: none;
+  }
+}
 </style>
diff --git a/apps/kimi-web/src/i18n/locales/en/status.ts b/apps/kimi-web/src/i18n/locales/en/status.ts
index 8b7f022785..23f7f2cbbe 100644
--- a/apps/kimi-web/src/i18n/locales/en/status.ts
+++ b/apps/kimi-web/src/i18n/locales/en/status.ts
@@ -28,6 +28,9 @@ export default {
   goalPause: 'Pause',
   goalResume: 'Resume',
   goalCancel: 'Cancel',
+  goalCancelConfirm: 'Cancel this goal? It cannot be resumed afterwards.',
+  goalCancelConfirmYes: 'Yes',
+  goalCancelConfirmNo: 'No',
   goalStatusActive: 'Active',
   goalStatusPaused: 'Paused',
   goalStatusBlocked: 'Blocked',
diff --git a/apps/kimi-web/src/i18n/locales/zh/status.ts b/apps/kimi-web/src/i18n/locales/zh/status.ts
index 0256b119b3..b88d7907a9 100644
--- a/apps/kimi-web/src/i18n/locales/zh/status.ts
+++ b/apps/kimi-web/src/i18n/locales/zh/status.ts
@@ -28,6 +28,9 @@ export default {
   goalPause: '暂停',
   goalResume: '继续',
   goalCancel: '取消',
+  goalCancelConfirm: '是否需要取消当前目标？取消后将无法恢复。',
+  goalCancelConfirmYes: '是',
+  goalCancelConfirmNo: '否',
   goalStatusActive: '进行中',
   goalStatusPaused: '已暂停',
   goalStatusBlocked: '已阻塞',

From b178cf4a7a80294e9842608840ace0e2ed3dca56 Mon Sep 17 00:00:00 2001
From: chengluyu <2239547+chengluyu@users.noreply.github.com>
Date: Mon, 13 Jul 2026 22:44:34 +0800
Subject: [PATCH 2/5] fix(web): hide goal progress without budget

---
 apps/kimi-web/src/components/chat/GoalStrip.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/kimi-web/src/components/chat/GoalStrip.vue b/apps/kimi-web/src/components/chat/GoalStrip.vue
index 61cd7032d7..67e073b622 100644
--- a/apps/kimi-web/src/components/chat/GoalStrip.vue
+++ b/apps/kimi-web/src/components/chat/GoalStrip.vue
@@ -110,7 +110,7 @@ onBeforeUnmount(() => setCancelConfirmOpen(false));
           size="sm"
           class="goal-status"
         >{{ goalStatusLabel(goal.status) }}</Badge>
-        <span class="goal-progress" aria-hidden="true">
+        <span v-if="goal.budget.tokenBudget !== null" class="goal-progress" aria-hidden="true">
           <span class="goal-progress-fill" :style="{ width: `${tokenPct}%` }"></span>
         </span>
         <Icon class="goal-chevron" :class="{ open: expanded }" name="chevron-right" size="md" />

From 78ef28ba2bdf9eec76e6a054d5499481cd99b557 Mon Sep 17 00:00:00 2001
From: chengluyu <2239547+chengluyu@users.noreply.github.com>
Date: Tue, 14 Jul 2026 12:46:29 +0800
Subject: [PATCH 3/5] fix(web): use design system for goal cancellation

---
 .../src/components/chat/GoalStrip.vue         | 144 +++---------------
 1 file changed, 21 insertions(+), 123 deletions(-)

diff --git a/apps/kimi-web/src/components/chat/GoalStrip.vue b/apps/kimi-web/src/components/chat/GoalStrip.vue
index 67e073b622..b09998f799 100644
--- a/apps/kimi-web/src/components/chat/GoalStrip.vue
+++ b/apps/kimi-web/src/components/chat/GoalStrip.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import type { AppGoal } from '../../api/types';
+import { useConfirmDialog } from '../../composables/useConfirmDialog';
 import Card from '../ui/Card.vue';
 import Badge from '../ui/Badge.vue';
 import Button from '../ui/Button.vue';
@@ -11,11 +12,9 @@ const props = defineProps<{ goal: AppGoal; forceExpanded?: number }>();
 const emit = defineEmits<{ controlGoal: [action: 'pause' | 'resume' | 'cancel'] }>();
 
 const { t } = useI18n();
+const { confirm } = useConfirmDialog();
 
 const expanded = ref(false);
-const cancelConfirmOpen = ref(false);
-const cancelActionRef = ref<HTMLElement | null>(null);
-const cancelPopoverStyle = ref<Record<string, string>>({});
 
 watch(
   () => props.forceExpanded,
@@ -49,53 +48,16 @@ function formatMs(ms: number): string {
   return `${hour}h ${min % 60}m`;
 }
 
-function updateCancelPopoverPosition(): void {
-  const anchor = cancelActionRef.value;
-  if (!anchor || typeof window === 'undefined') return;
-  const rect = anchor.getBoundingClientRect();
-  const width = 240;
-  const left = Math.min(
-    window.innerWidth - width - 8,
-    Math.max(8, rect.right - width),
-  );
-  const arrowRight = Math.min(
-    width - 12,
-    Math.max(12, width - (rect.left + rect.width / 2 - left)),
-  );
-  cancelPopoverStyle.value = {
-    left: `${left}px`,
-    top: `${Math.max(8, rect.top - 8)}px`,
-    '--goal-cancel-arrow-right': `${arrowRight}px`,
-  };
+async function onCancel(): Promise<void> {
+  const confirmed = await confirm({
+    title: t('status.goalCancel'),
+    message: t('status.goalCancelConfirm'),
+    confirmLabel: t('status.goalCancelConfirmYes'),
+    cancelLabel: t('status.goalCancelConfirmNo'),
+    variant: 'danger',
+  });
+  if (confirmed) emit('controlGoal', 'cancel');
 }
-
-function onCancelPopoverDocumentMouseDown(event: MouseEvent): void {
-  const target = event.target as Node | null;
-  if (target && cancelActionRef.value?.contains(target)) return;
-  cancelConfirmOpen.value = false;
-}
-
-function setCancelConfirmOpen(open: boolean): void {
-  cancelConfirmOpen.value = open;
-  if (typeof window === 'undefined') return;
-  if (open) {
-    updateCancelPopoverPosition();
-    document.addEventListener('mousedown', onCancelPopoverDocumentMouseDown);
-    window.addEventListener('resize', updateCancelPopoverPosition);
-    window.addEventListener('scroll', updateCancelPopoverPosition, true);
-  } else {
-    document.removeEventListener('mousedown', onCancelPopoverDocumentMouseDown);
-    window.removeEventListener('resize', updateCancelPopoverPosition);
-    window.removeEventListener('scroll', updateCancelPopoverPosition, true);
-  }
-}
-
-function confirmCancel(): void {
-  setCancelConfirmOpen(false);
-  emit('controlGoal', 'cancel');
-}
-
-onBeforeUnmount(() => setCancelConfirmOpen(false));
 </script>
 
 <template>
@@ -154,45 +116,19 @@ onBeforeUnmount(() => setCancelConfirmOpen(false));
             <Icon name="play" size="md" />
             <span>{{ t('status.goalResume') }}</span>
           </Button>
-          <div ref="cancelActionRef" class="goal-cancel-action">
-            <Button
-              size="sm"
-              variant="danger-soft"
-              class="goal-action"
-              :aria-expanded="cancelConfirmOpen"
-              aria-haspopup="dialog"
-              @click.stop="setCancelConfirmOpen(!cancelConfirmOpen)"
-            >
-              <Icon name="close" size="md" />
-              <span>{{ t('status.goalCancel') }}</span>
-            </Button>
-          </div>
+          <Button
+            size="sm"
+            variant="danger-soft"
+            class="goal-action"
+            @click.stop="onCancel"
+          >
+            <Icon name="close" size="md" />
+            <span>{{ t('status.goalCancel') }}</span>
+          </Button>
         </div>
       </div>
     </template>
   </Card>
-
-  <Teleport to="body">
-    <div
-      v-if="cancelConfirmOpen"
-      id="goal-cancel-confirm"
-      class="goal-cancel-popover"
-      role="dialog"
-      :aria-label="t('status.goalCancelConfirm')"
-      :style="cancelPopoverStyle"
-      @mousedown.stop
-    >
-      <p>{{ t('status.goalCancelConfirm') }}</p>
-      <div class="goal-cancel-popover__actions">
-        <Button size="sm" variant="secondary" @click="setCancelConfirmOpen(false)">
-          {{ t('status.goalCancelConfirmNo') }}
-        </Button>
-        <Button size="sm" variant="danger" @click="confirmCancel">
-          {{ t('status.goalCancelConfirmYes') }}
-        </Button>
-      </div>
-    </div>
-  </Teleport>
 </template>
 
 <style scoped>
@@ -380,44 +316,6 @@ onBeforeUnmount(() => setCancelConfirmOpen(false));
 .goal-action :deep(.ui-button__content) {
   gap: var(--space-1);
 }
-.goal-cancel-action {
-  position: relative;
-}
-.goal-cancel-popover {
-  position: fixed;
-  z-index: var(--z-dropdown);
-  width: 240px;
-  padding: var(--space-3);
-  transform: translateY(-100%);
-  background: var(--color-surface-raised);
-  border: 1px solid var(--color-line);
-  border-radius: var(--radius-2xl);
-  box-shadow: var(--shadow-lg);
-  color: var(--color-text);
-}
-.goal-cancel-popover::after {
-  content: '';
-  position: absolute;
-  right: var(--goal-cancel-arrow-right, 32px);
-  bottom: -9px;
-  width: 16px;
-  height: 16px;
-  background: var(--color-surface-raised);
-  border-right: 1px solid var(--color-line);
-  border-bottom: 1px solid var(--color-line);
-  transform: rotate(45deg);
-}
-.goal-cancel-popover p {
-  margin: 0;
-  font-size: var(--text-sm);
-  line-height: var(--leading-normal);
-}
-.goal-cancel-popover__actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--space-2);
-  margin-top: var(--space-3);
-}
 @media (max-width: 640px) {
   .goal-strip {
     --composer-send-size: 36px;

From b37bce122dfe232f6f4f671066cfcd5479c9d816 Mon Sep 17 00:00:00 2001
From: chengluyu <2239547+chengluyu@users.noreply.github.com>
Date: Tue, 14 Jul 2026 12:59:55 +0800
Subject: [PATCH 4/5] docs: document web goal controls

---
 .changeset/quiet-goals.md | 5 +++++
 docs/en/guides/goals.md   | 6 ++++++
 docs/zh/guides/goals.md   | 6 ++++++
 3 files changed, 17 insertions(+)
 create mode 100644 .changeset/quiet-goals.md

diff --git a/.changeset/quiet-goals.md b/.changeset/quiet-goals.md
new file mode 100644
index 0000000000..ff4420bb6d
--- /dev/null
+++ b/.changeset/quiet-goals.md
@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": patch
+---
+
+web: Refine goal mode controls with animated strip interactions, budget-aware progress, and design-system cancellation confirmation.
diff --git a/docs/en/guides/goals.md b/docs/en/guides/goals.md
index d8eb12489d..ff2fa0cb61 100644
--- a/docs/en/guides/goals.md
+++ b/docs/en/guides/goals.md
@@ -104,6 +104,12 @@ A goal can stop in three ways:
 
 Write stop conditions into the objective. `/goal` does not have a separate stop-limit flag.
 
+## Manage goals in the web UI
+
+The web UI shows the current goal in a strip below the conversation. Select the strip to expand or collapse its details. When a token budget is configured, the header shows its progress; goals without a token budget do not show a progress bar.
+
+Use the strip actions to pause an active goal, resume a paused or blocked goal, or cancel the current goal. Cancellation requires confirmation because it cannot be resumed afterwards.
+
 ## Queue upcoming goals
 
 Agents sometimes complete a goal too quickly. Users can be disappointed that they can assign only one goal at a time. Many people already know the upcoming goals they want to pursue. They had to wait for the current goal to complete, open the TUI, and submit the next goal manually.
diff --git a/docs/zh/guides/goals.md b/docs/zh/guides/goals.md
index 13d18cbd90..64cf6b56bb 100644
--- a/docs/zh/guides/goals.md
+++ b/docs/zh/guides/goals.md
@@ -104,6 +104,12 @@ Kimi Code 会保存该目标，把它作为下一条用户消息发送，并进
 
 停止条件需要写在目标本身里。`/goal` 没有单独用于描述停止限制的语法。
 
+## 在 Web 界面中管理目标
+
+Web 界面会在对话下方显示当前目标条。点击目标条可以展开或收起详细信息。配置 token 预算时，标题栏会显示预算进度；没有配置 token 预算的目标不会显示进度条。
+
+使用目标条中的操作可以暂停进行中的目标、继续已暂停或已阻塞的目标，或取消当前目标。取消操作需要确认，因为取消后无法继续。
+
 ## 安排后续目标
 
 Agent 有时会很快完成一个目标。如果一次只能安排一个目标，用户可能会失望。很多人已经知道接下来想完成哪些后续目标，但原来需要等当前目标完成后，打开 TUI，再手动提交下一个目标。

From f91efa7391387bfac0491b1ebd93f9bab283b05c Mon Sep 17 00:00:00 2001
From: chengluyu <2239547+chengluyu@users.noreply.github.com>
Date: Tue, 14 Jul 2026 13:19:01 +0800
Subject: [PATCH 5/5] fix(web): remove collapsed goal actions from tab order

---
 apps/kimi-web/src/components/chat/GoalStrip.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/kimi-web/src/components/chat/GoalStrip.vue b/apps/kimi-web/src/components/chat/GoalStrip.vue
index b09998f799..c0fddfe365 100644
--- a/apps/kimi-web/src/components/chat/GoalStrip.vue
+++ b/apps/kimi-web/src/components/chat/GoalStrip.vue
@@ -88,7 +88,11 @@ async function onCancel(): Promise<void> {
     </template>
 
     <template #foot>
-      <div class="goal-footer">
+      <div
+        class="goal-footer"
+        :inert="!expanded"
+        :aria-hidden="!expanded"
+      >
         <div class="goal-meta">
           <span>{{ goal.turnsUsed }} turns</span>
           <span>{{ goal.tokensUsed.toLocaleString() }} tokens</span>