diff --git a/frontend/src/__tests__/components/ChipInput.test.ts b/frontend/src/__tests__/components/ChipInput.test.ts
new file mode 100644
index 0000000..c917274
--- /dev/null
+++ b/frontend/src/__tests__/components/ChipInput.test.ts
@@ -0,0 +1,225 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+
+import ChipInput from '@/components/ChipInput.vue'
+
+// Icon is a global component registered in main.ts; stub it for standalone mounts.
+const global = {
+  stubs: { Icon: true }
+}
+
+type Wrapper = ReturnType<typeof mountChipInput>
+
+function mountChipInput(props: {
+  modelValue: string[]
+  parse?: (raw: string) => string
+  accept?: (parsed: string) => boolean
+}) {
+  return mount(ChipInput, {
+    props,
+    global
+  })
+}
+
+function editInput(wrapper: Wrapper) {
+  return wrapper.find('input[data-edit-input]')
+}
+
+function chipValue(wrapper: Wrapper, value: string) {
+  return wrapper.get(`[data-chip-value="${value}"]`)
+}
+
+// defineModel emits 'update:modelValue' with the new array; standalone mount has
+// no parent to rebind, so the emitted payload is the observable model change.
+function lastModel(wrapper: Wrapper): string[] | undefined {
+  const emitted = wrapper.emitted('update:modelValue')
+  return emitted?.length ? (emitted[emitted.length - 1] as [string[]])[0] : undefined
+}
+
+async function openEditor(wrapper: Wrapper, value: string) {
+  await chipValue(wrapper, value).trigger('click')
+  await nextTick()
+  return wrapper.get('input[data-edit-input]')
+}
+
+describe('outer input', () => {
+  it('commits a typed value on Enter and clears the input', async () => {
+    const wrapper = mountChipInput({ modelValue: ['a'] })
+    const outer = wrapper.get('input[data-outer-input]')
+
+    await outer.setValue('b')
+    await outer.trigger('keydown', { key: 'Enter' })
+
+    expect(lastModel(wrapper)).toEqual(['a', 'b'])
+    expect((outer.element as HTMLInputElement).value).toBe('')
+  })
+
+  it('consumes a duplicate value rather than appending it twice', async () => {
+    const wrapper = mountChipInput({ modelValue: ['a'] })
+    const outer = wrapper.get('input[data-outer-input]')
+
+    await outer.setValue('a')
+    await outer.trigger('keydown', { key: 'Enter' })
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect((outer.element as HTMLInputElement).value).toBe('')
+  })
+})
+
+describe('chip editing', () => {
+  it('Enter commits a valid edit at the right index', async () => {
+    const wrapper = mountChipInput({ modelValue: ['a', 'b', 'c'] })
+
+    const editor = await openEditor(wrapper, 'b')
+    await editor.setValue('bb')
+    await editor.trigger('keydown', { key: 'Enter' })
+
+    expect(lastModel(wrapper)).toEqual(['a', 'bb', 'c'])
+    expect(editInput(wrapper).exists()).toBe(false)
+  })
+
+  it('Enter on an accept-rejected value keeps model unchanged, editor open', async () => {
+    const wrapper = mountChipInput({
+      modelValue: ['1', '2'],
+      accept: (parsed: string) => /^-?\d+$/.test(parsed)
+    })
+
+    const editor = await openEditor(wrapper, '1')
+    await editor.setValue('x')
+    await editor.trigger('keydown', { key: 'Enter' })
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect(editInput(wrapper).exists()).toBe(true)
+  })
+
+  it('Enter on a duplicate (different index) keeps model unchanged, editor open', async () => {
+    const wrapper = mountChipInput({ modelValue: ['a', 'b'] })
+
+    const editor = await openEditor(wrapper, 'a')
+    await editor.setValue('b')
+    await editor.trigger('keydown', { key: 'Enter' })
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect(editInput(wrapper).exists()).toBe(true)
+  })
+
+  it('Enter on an empty parsed value deletes the chip', async () => {
+    const wrapper = mountChipInput({
+      modelValue: ['a', 'b'],
+      parse: (raw: string) => raw.trim()
+    })
+
+    const editor = await openEditor(wrapper, 'a')
+    await editor.setValue('   ')
+    await editor.trigger('keydown', { key: 'Enter' })
+
+    expect(lastModel(wrapper)).toEqual(['b'])
+    expect(editInput(wrapper).exists()).toBe(false)
+  })
+
+  it('Escape cancels the edit and leaves the model untouched', async () => {
+    const wrapper = mountChipInput({ modelValue: ['a', 'b'] })
+
+    const editor = await openEditor(wrapper, 'a')
+    await editor.setValue('zzz')
+    await editor.trigger('keydown', { key: 'Escape' })
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect(editInput(wrapper).exists()).toBe(false)
+  })
+
+  it('blur commits a changed, valid edit', async () => {
+    const wrapper = mountChipInput({ modelValue: ['a', 'b'] })
+
+    const editor = await openEditor(wrapper, 'a')
+    await editor.setValue('bb')
+    await editor.trigger('blur')
+
+    expect(lastModel(wrapper)).toEqual(['bb', 'b'])
+  })
+
+  it('blur reverts a changed edit that fails accept', async () => {
+    const wrapper = mountChipInput({
+      modelValue: ['1'],
+      accept: (parsed: string) => /^-?\d+$/.test(parsed)
+    })
+
+    const editor = await openEditor(wrapper, '1')
+    await editor.setValue('nope')
+    await editor.trigger('blur')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect(editInput(wrapper).exists()).toBe(false)
+  })
+
+  it('pins the chip width across the edit transition', async () => {
+    const wrapper = mountChipInput({ modelValue: ['a', 'b', 'c'] })
+    const value = chipValue(wrapper, 'b')
+    const chip = value.element.parentElement as HTMLElement
+    // jsdom does no layout. Give the span and the container DIFFERENT widths so
+    // this test fails if the pin is taken from the clicked span instead of the
+    // container — pinning the span drops padding, border, gap and the ✕.
+    value.element.getBoundingClientRect = () => ({ width: 90 }) as DOMRect
+    chip.getBoundingClientRect = () => ({ width: 123.5 }) as DOMRect
+
+    await value.trigger('click')
+    await nextTick()
+
+    // Chip holds its full pre-edit width, and the editor fills the space left by
+    // the ✕ rather than claiming the whole content box.
+    expect(chip.style.width).toBe('123.5px')
+    expect(editInput(wrapper).classes()).toContain('flex-1')
+    expect(editInput(wrapper).attributes('style')).not.toContain('width')
+
+    await editInput(wrapper).trigger('keydown', { key: 'Enter' })
+    await nextTick()
+
+    // Pin cleared on close: the chip returns to natural sizing. Unchanged text
+    // keeps the same :key, so this element is reused rather than detached.
+    expect(chip.style.width).toBe('')
+  })
+
+  it('focuses the editor on the first click, with the caret at the end', async () => {
+    // Regression: a named template ref inside v-for does not resolve, so the
+    // editor opened unfocused and needed a second click to feel "live".
+    const wrapper = mount(ChipInput, {
+      props: { modelValue: ['abcd'] },
+      global,
+      attachTo: document.body
+    })
+
+    await chipValue(wrapper, 'abcd').trigger('click')
+    await nextTick()
+    await nextTick()
+
+    const input = wrapper.get('input[data-edit-input]').element as HTMLInputElement
+    expect(document.activeElement).toBe(input)
+    expect(input.selectionStart).toBe(4)
+
+    wrapper.unmount()
+  })
+
+  it('keeps the value span mounted so its hover state survives an edit', async () => {
+    const wrapper = mountChipInput({ modelValue: ['a'] })
+    const before = chipValue(wrapper, 'a').element
+
+    await openEditor(wrapper, 'a')
+
+    // Same node before and after: a v-if would recreate it, and :hover does not
+    // reapply to a fresh node until the mouse moves.
+    expect(chipValue(wrapper, 'a').element).toBe(before)
+  })
+
+  it('keeps the delete button present while editing', async () => {
+    const wrapper = mountChipInput({ modelValue: ['a'] })
+
+    expect(wrapper.findAll('button')).toHaveLength(1)
+
+    await openEditor(wrapper, 'a')
+
+    // The delete button must stay in the DOM during the edit: it used to vanish
+    // with the v-if that wrapped the value text.
+    expect(wrapper.findAll('button')).toHaveLength(1)
+  })
+})
diff --git a/frontend/src/__tests__/components/DriverFormComponent.test.ts b/frontend/src/__tests__/components/DriverFormComponent.test.ts
index 11e2fee..37b2f20 100644
--- a/frontend/src/__tests__/components/DriverFormComponent.test.ts
+++ b/frontend/src/__tests__/components/DriverFormComponent.test.ts
@@ -84,6 +84,7 @@ async function mountForm(props: { id?: number } = {}) {
         USelect: true,
         UButton: UButtonStub,
         UCheckbox: UCheckboxStub,
+        UTooltip: true,
         DriverSelector: true,
         ChipInput: true
       },
diff --git a/frontend/src/components/ChipInput.vue b/frontend/src/components/ChipInput.vue
index a9cb618..8786fc3 100644
--- a/frontend/src/components/ChipInput.vue
+++ b/frontend/src/components/ChipInput.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { nextTick, ref, useTemplateRef } from 'vue'
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     placeholder?: string
     commitKeys?: Array<'enter' | ' ' | 'tab' | 'comma'>
@@ -23,6 +23,128 @@ withDefaults(
 const model = defineModel<Array<string>>({ required: true })
 
 const input = ref('')
+
+// One editor at a time. Single ref so opening is one atomic assignment: the
+// swap and the width pin must land together. `pin` holds the chip's measured
+// width so the flex-wrap row never reflows mid-edit.
+const edit = ref({
+  index: null as number | null,
+  text: '',
+  invalid: false,
+  pin: null as string | null
+})
+
+const outerInput = useTemplateRef<HTMLInputElement>('outerInput')
+
+// Function ref, not useTemplateRef: this input lives inside a v-for, so a
+// named template ref does not resolve to it. Guard also rejects the Comment
+// placeholder Vue binds while the v-else branch is inactive.
+let editInput: HTMLInputElement | null = null
+const setEditRef = (el: unknown) => {
+  editInput = el instanceof HTMLInputElement ? el : null
+}
+
+const parseValue = (raw: string) => (props.parse ?? ((s: string) => s))(raw)
+
+// Shared by the outer input and the chip editor. editIndex excludes the chip
+// being edited from duplicate detection.
+function tryCommit(raw: string, editIndex: number | null = null): 'ok' | 'invalid' | 'duplicate' {
+  const parsed = parseValue(raw)
+  if (!parsed || !(props.accept?.(parsed) ?? true)) {
+    return 'invalid'
+  }
+  if (model.value.some((value, idx) => value === parsed && idx !== editIndex)) {
+    return 'duplicate'
+  }
+  model.value =
+    editIndex === null
+      ? [...model.value, parsed]
+      : model.value.map((value, idx) => (idx === editIndex ? parsed : value))
+  return 'ok'
+}
+
+function onOuterKeydown(event: KeyboardEvent) {
+  if (!props.commitKeys.includes(event.key.toLowerCase() as 'enter' | ' ' | 'tab' | 'comma')) {
+    return
+  }
+  event.preventDefault()
+
+  // A duplicate still clears the input; only 'invalid' keeps it.
+  if (tryCommit(input.value) === 'invalid') {
+    return
+  }
+  input.value = ''
+}
+
+function startEdit(i: number, event: Event) {
+  onEditBlurFinalize()
+  // Pin the chip CONTAINER, not the clicked span: the span is only the text
+  // box, so its width excludes the container's padding, border, gap and ✕ —
+  // pinning that would shrink the chip on every edit.
+  const width = (event.currentTarget as HTMLElement).parentElement!.getBoundingClientRect().width
+  edit.value = {
+    index: i,
+    text: model.value[i] ?? '',
+    invalid: false,
+    // Zero width (jsdom, hidden chip) → fall back to ch sizing.
+    pin: width > 0 ? `${width}px` : null
+  }
+  nextTick(() => {
+    if (!editInput) return
+    editInput.focus()
+    // Caret at end, not select() — selecting everything renders as a highlight.
+    editInput.setSelectionRange(editInput.value.length, editInput.value.length)
+  })
+}
+
+function onEditKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    closeEditor(true)
+    return
+  }
+  if (event.key !== 'Enter') {
+    return
+  }
+  event.preventDefault()
+
+  const i = edit.value.index
+  if (i === null) {
+    return
+  }
+
+  // Must match tryCommit's own parse of the same string.
+  if (parseValue(edit.value.text) === '') {
+    model.value = model.value.filter((_, idx) => idx !== i)
+    closeEditor(true)
+    return
+  }
+  if (tryCommit(edit.value.text, i) === 'ok') {
+    closeEditor(true)
+  } else {
+    edit.value.invalid = true
+  }
+}
+
+// Blur and chip-switch land here: unchanged → cancel, changed → commit when
+// valid else revert. Never strands a half-open editor.
+function onEditBlurFinalize() {
+  const i = edit.value.index
+  if (i === null) {
+    return
+  }
+  if (edit.value.text !== model.value[i]) {
+    tryCommit(edit.value.text, i)
+  }
+  closeEditor(false)
+}
+
+function closeEditor(refocus: boolean) {
+  edit.value = { index: null, text: '', invalid: false, pin: null }
+  if (refocus) {
+    nextTick(() => outerInput.value?.focus())
+  }
+}
 </script>
 
 <template>
@@ -41,15 +163,43 @@ const input = ref('')
     <span
       v-for="(item, i) in model"
       :key="`${item}-${i}`"
-      class="inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-bold shadow-sm"
+      class="inline-flex max-w-full min-w-0 items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-bold shadow-sm"
+      :class="edit.invalid && edit.index === i ? 'ring-1 ring-red-400' : ''"
       :style="{
         backgroundColor: 'var(--chip-bg)',
         borderColor: 'var(--chip-border)',
-        color: 'var(--chip-text)'
+        color: 'var(--chip-text)',
+        width: edit.index === i && edit.pin ? edit.pin : undefined
       }"
     >
-      <span class="font-mono">{{ item }}</span>
+      <!-- v-show, not v-if: destroying this span on edit drops its :hover state and
+           it only comes back once the mouse moves. -->
+      <span
+        v-show="edit.index !== i"
+        :data-chip-value="item"
+        class="min-w-0 cursor-text truncate font-mono transition-colors hover:underline hover:decoration-dotted hover:underline-offset-2"
+        @click="startEdit(i, $event)"
+        >{{ item }}</span
+      >
 
+      <input
+        v-if="edit.index === i"
+        :ref="setEditRef"
+        v-model="edit.text"
+        data-edit-input
+        type="text"
+        class="min-w-0 border-none bg-transparent px-0 py-0 font-mono text-xs font-bold focus:ring-0 focus:outline-none"
+        :class="edit.pin ? 'flex-1' : ''"
+        :style="{
+          color: 'inherit',
+          width: edit.pin ? undefined : `min(${Math.max(edit.text.length, 2) + 1}ch, 40ch)`
+        }"
+        @keydown="onEditKeydown"
+        @input="edit.invalid && (edit.invalid = false)"
+        @blur="onEditBlurFinalize"
+      />
+
+      <!-- Rendered in both states: the ✕ must never vanish from a chip. -->
       <button
         type="button"
         class="rounded-sm p-0.5 transition-colors"
@@ -65,28 +215,14 @@ const input = ref('')
     </span>
 
     <input
+      ref="outerInput"
       v-model="input"
+      data-outer-input
       type="text"
       :placeholder="placeholder"
       class="border-none bg-transparent px-2 py-1 font-mono text-xs text-gray-800 placeholder:text-gray-400 focus:ring-0 focus:outline-none xl:text-sm"
       :style="{ minWidth: minInputWidth, flex: '1 1 0%' }"
-      @keydown="
-        event => {
-          if (!commitKeys.includes(event.key.toLowerCase() as 'enter' | ' ' | 'tab' | 'comma')) {
-            return
-          }
-          event.preventDefault()
-
-          const parsed = (parse ?? (s => s))(input)
-          if (!parsed || !(accept?.(parsed) ?? true)) {
-            return
-          }
-          if (!model.includes(parsed)) {
-            model = [...model, parsed]
-          }
-          input = ''
-        }
-      "
+      @keydown="onOuterKeydown"
       @keydown.backspace="
         popOnBackspace && input === '' && model.length > 0 && (model = model.slice(0, -1))
       "
@@ -102,7 +238,8 @@ div:focus-within {
   box-shadow: 0 0 0 2px var(--focus-ring);
 }
 
-button:hover {
+button:hover,
+button:focus-visible {
   background-color: var(--hover-bg);
   color: var(--hover-text);
 }
diff --git a/frontend/src/components/DriverEditor.vue b/frontend/src/components/DriverEditor.vue
index fbe9e3a..7ee6863 100644
--- a/frontend/src/components/DriverEditor.vue
+++ b/frontend/src/components/DriverEditor.vue
@@ -135,7 +135,7 @@ function handleRemove() {
             v-if="notFound"
             class="rounded border border-red-200 bg-red-100 px-1.5 py-0.5 text-[10px] font-bold text-red-600 xl:text-xs"
           >
-{{ $t('labelInvalidPath') }}
+            {{ $t('labelInvalidPath') }}
           </span>
         </div>
 
@@ -273,9 +273,20 @@ function handleRemove() {
       </fieldset>
 
       <fieldset>
-        <label class="mb-1.5 block text-xs font-bold text-gray-700 xl:mb-2 xl:text-sm">
-          {{ t('fieldArgument') }}
-        </label>
+        <div
+          class="mb-1.5 flex items-center gap-1 text-xs font-bold text-gray-700 xl:mb-2 xl:text-sm"
+        >
+          <span>{{ t('fieldArgument') }}</span>
+
+          <UTooltip :text="t('descChipInput')" :delay-duration="300" :content="{ side: 'right' }">
+            <button type="button" class="cursor-help" :aria-label="t('descChipInput')">
+              <Icon
+                icon="mdi:information-outline"
+                class="size-3 text-gray-400 transition-colors hover:text-half-baked-600 xl:h-3.5 xl:w-3.5"
+              />
+            </button>
+          </UTooltip>
+        </div>
 
         <ChipInput v-model="driver.flags" placeholder="e.g. /S (Enter)">
           <UDropdownMenu :items="[flagItems]" :ui="{ content: 'max-h-58 overflow-y-auto' }">
diff --git a/frontend/src/components/DriverFormComponent.vue b/frontend/src/components/DriverFormComponent.vue
index f0afdbf..3815162 100644
--- a/frontend/src/components/DriverFormComponent.vue
+++ b/frontend/src/components/DriverFormComponent.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import DriverEditor from '@/components/DriverEditor.vue'
+import { decodeError } from '@/utils/index'
 import { storage } from '@/wailsjs/go/models'
 import * as groupStorage from '@/wailsjs/go/storage/DriverGroupStorage'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
-import { decodeError } from '@/utils/index'
 
 const props = defineProps<{ id?: number }>()
 
@@ -223,7 +223,7 @@ function handleSubmit() {
 
       <DriverEditor
         v-for="(d, i) in group.drivers"
-        :key="(d as unknown) as PropertyKey"
+        :key="d as unknown as PropertyKey"
         v-model:driver="group.drivers[i]!"
         :index="i"
         :expanded="ui.expanded.has(d)"
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index d0a12e7..830639f 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -26,6 +26,7 @@
   "create": "Create",
   "delete": "Delete",
   "descAllowedExitCode": "If the exit code of the execution is in the specified value, the execution will be treated as successful.",
+  "descChipInput": "Press Enter to add an argument. Click an argument to edit it.",
   "descCommaSeparated": "Use comma to separate multiple values.",
   "descDeleteGroup": "This action cannot be undone.",
   "descDriverGroup": "Add multiple entries into a single option. When selected, all entries will be executed.",
diff --git a/frontend/src/i18n/zh_Hant_HK.json b/frontend/src/i18n/zh_Hant_HK.json
index 0789f2f..11e2d4d 100644
--- a/frontend/src/i18n/zh_Hant_HK.json
+++ b/frontend/src/i18n/zh_Hant_HK.json
@@ -26,6 +26,7 @@
   "create": "建立",
   "delete": "刪除",
   "descAllowedExitCode": "程序結束狀態碼若在所列，不視作失敗。",
+  "descChipInput": "輸入後按 Enter 加入參數；點擊標籤以編輯參數。",
   "descCommaSeparated": "以逗號分隔多個輸入。",
   "descDeleteGroup": "此操作無法撤銷。",
   "descDriverGroup": "可集數項目於一選項中，選之則同時執行。",