kilo-loop/examples/goal.example.json

{
  "title": "Make the settings drawer section list-based",
  "description": "Refactor the BYOK settings section into a list-based UI (q-select + a single config panel), extract the drawer menu into its own section component, and verify spacing/alignment in the browser. Each stage carries its own verify command and acceptance criteria; the loop runs the verify itself and only advances when it passes.",
  "stages": [
    {
      "id": "stage-1",
      "title": "Extract SettingsDrawerMenuSection",
      "details": "Move the drawer navigation markup out of SettingsPage.vue into components/settings/SettingsDrawerMenuSection.vue without changing behaviour.",
      "verify": "pnpm typecheck",
      "acceptance": "typecheck passes and the settings drawer renders unchanged"
    },
    {
      "id": "stage-2",
      "title": "Rework SettingsByokSection to a list + panel",
      "details": "Replace the provider card grid with a q-select (emit-value/map-options, option-value=id) and a single config panel for the selected provider.",
      "verify": "pnpm build",
      "acceptance": "the SPA build completes and the section is list-based",
      "model": "deepseek/deepseek-v4-flash-vision-exp"
    },
    {
      "id": "stage-3",
      "title": "Verify layout and dark theme",
      "details": "Open the app, check field insets are symmetric, and confirm the greyed-text class is used instead of text-grey-*.",
      "verify": "pnpm build",
      "acceptance": "build is green; no text-grey-* remains in the section"
    }
  ]
}