From f9e5e47038327749538175d34f0a5afeda2bd9f3 Mon Sep 17 00:00:00 2001
From: markmybytes <markmybytes@gmail.com>
Date: Sun, 4 Oct 2026 16:35:26 +0800
Subject: [PATCH 1/2] style(frontend): apply formatter to DriverFormComponent

Formatter run that STYLE.md requires before style fixes. Reorders one
import and drops redundant type-cast parens. No behaviour change.
---
 frontend/src/components/DriverFormComponent.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/DriverFormComponent.vue b/frontend/src/components/DriverFormComponent.vue
index f8c3893..7568f9a 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 }>()
 
@@ -222,7 +222,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)"

From 88b9fa4a407f0de34a96a318fa8218f0349e088d Mon Sep 17 00:00:00 2001
From: markmybytes <markmybytes@gmail.com>
Date: Sun, 4 Oct 2026 16:35:50 +0800
Subject: [PATCH 2/2] feat(frontend): support editing chips in ChipInput

Chips could only be added or removed, so a mistyped driver flag had to be
deleted and retyped whole. Clicking a chip now opens an inline editor that
reuses the same parse/accept/duplicate path as the outer input, so an edit
cannot bypass validation the add path enforces.

The chip's measured width is pinned while its editor is open. Otherwise the
box resizes as the text span becomes an input, and because the row is
flex-wrap that re-wraps every chip beneath it.

The delete button renders in both states. Hiding it during an edit made the
chip visibly jump as the button's width came and went.

The value span is kept mounted with v-show. Swapping it with v-if destroyed
the node, and a fresh node does not pick up :hover until the mouse moves, so
the edit affordance vanished until the pointer happened to travel.

The field label is now a div. A button is a labelable element, so the
wrapping label forwarded every click across the fieldset to the tooltip
trigger and the tooltip flashed open and shut.
---
 .../__tests__/components/ChipInput.test.ts    | 225 ++++++++++++++++++
 .../components/DriverFormComponent.test.ts    |   1 +
 frontend/src/components/ChipInput.vue         | 183 ++++++++++++--
 frontend/src/components/DriverEditor.vue      |  23 +-
 frontend/src/i18n/en.json                     |   1 +
 frontend/src/i18n/zh_Hant_HK.json             |   1 +
 6 files changed, 403 insertions(+), 31 deletions(-)
 create mode 100644 frontend/src/__tests__/components/ChipInput.test.ts

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 6d4dfd8..b6f3621 100644
--- a/frontend/src/__tests__/components/DriverFormComponent.test.ts
+++ b/frontend/src/__tests__/components/DriverFormComponent.test.ts
@@ -68,6 +68,7 @@ async function mountForm(props: { id?: number } = {}) {
         USelect: true,
         UButton: UButtonStub,
         UCheckbox: true,
+        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 3fd438b..65aebd7 100644
--- a/frontend/src/components/DriverEditor.vue
+++ b/frontend/src/components/DriverEditor.vue
@@ -95,10 +95,6 @@ function handleDone() {
 
   emit('toggle', driver.value)
 }
-
-function handleRemove() {
-  emit('remove', driver.value)
-}
 </script>
 
 <template>
@@ -265,9 +261,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' }">
@@ -390,7 +397,7 @@ function handleRemove() {
           color="error"
           variant="ghost"
           size="sm"
-          @click="handleRemove"
+          @click="emit('remove', driver)"
         >
           <Icon icon="mdi:trash-can" class="mr-1" />
           {{ t('delete') }}
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 00f5349..b6c319f 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 d693454..dae8814 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": "可集數項目於一選項中，選之則同時執行。",