fix(webui): shared sort header, coherent group sorting, real expand-state tests

webui/package-lock.json

@@ -32,6 +32,7 @@
         "tailwindcss": "^4.3.3",
         "typescript": "~6.0.2",
         "vite": "^8.2.0",
+        "vitest": "^4.1.11",
         "vue-tsc": "^3.3.8"
       }
     },
@@ -1212,6 +1213,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.23",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.23.tgz",
@@ -1823,6 +1831,24 @@
         "tinyglobby": "^0.2.14"
       }
     },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/esrecurse": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
@@ -1910,6 +1936,129 @@
         "vue": "^3.2.25"
       }
     },
+    "node_modules/@vitest/expect": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.11.tgz",
+      "integrity": "sha512-VX2x5vNJXET47KAFzwERI+KRMtTTCSWTfSMKsW7JsUsXV4psq++e3DvZpuTDOpHcxytiDs6p2nhVb2tVDiiUYw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.1.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.1.11",
+        "@vitest/utils": "4.1.11",
+        "chai": "^6.2.2",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.11.tgz",
+      "integrity": "sha512-2XJVD55d1o5AZous5CCGKS74g/riOj9odEt2bQpCVZeblHyHdnMeFl4jl0XjU21stf4mbjUkew2eXQZt65g5CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "4.1.11",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/mocker/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.11.tgz",
+      "integrity": "sha512-yiZzPbGTS9Sr/JpFl8zHrcIkAofNbFV6k21vIgQN/cY/oxZeXhJv5sc/MBJ5jFKWmWs+oJHw0UXLZjmf931+Vw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.11.tgz",
+      "integrity": "sha512-LztvUgdwMNJMIkj3hQnnxiC2Xy1zNxq928W/xhjCLaNCzqTZOudjwbQf6v9IntZGPw132i2Lq2rgTRZHD3JHNw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.1.11",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.11.tgz",
+      "integrity": "sha512-pN7ikn1ON7h8ee4gIAp4AzyK+zBtJPzVbqOgu5LCEh4VaJVbPQcgYQYJIMGQPXVeJJq1fnfazis7a5pFNPahog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.11",
+        "@vitest/utils": "4.1.11",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.11.tgz",
+      "integrity": "sha512-apNa/prQy2qCeywhnixOHPRCgGNhvg7T4Dapfl1GahLp/R+uhBm5cPyFoNVyqsNd2h1nJxL6BqqdIjiABL60YA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.11.tgz",
+      "integrity": "sha512-zTCVGpyFsGWBhllOyKlTw/vnr6D9qxsfSDyfbyZmTyjHw5N/VuvzHpHoQjm2ZJzn4RJgx5w4r7V0er69CmLgPQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.11",
+        "convert-source-map": "^2.0.0",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/@volar/language-core": {
       "version": "2.4.28",
       "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.28.tgz",
@@ -2266,6 +2415,16 @@
         "node": ">=10"
       }
     },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/ast-types": {
       "name": "ast-types-x",
       "version": "1.18.0",
@@ -2544,6 +2703,16 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/chai": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/chalk": {
       "version": "5.6.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
@@ -3191,6 +3360,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-module-lexer": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.2.tgz",
+      "integrity": "sha512-poHGpORABojJJucnV9KbOavETW8lBVnphkW77ER5/BQ5Fz7oXSoCNek7IH3vR5nRjdsEz926ibFYX8KtLQmdyw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/es-object-atoms": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
@@ -3453,6 +3629,16 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/expect-type": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.4.0.tgz",
+      "integrity": "sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/express": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
@@ -5041,6 +5227,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/obug": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.4.tgz",
+      "integrity": "sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
     "node_modules/ofetch": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/ofetch/-/ofetch-1.5.1.tgz",
@@ -6050,6 +6250,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/signal-exit": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
@@ -6114,6 +6321,13 @@
         "decode-uri-component": "^0.2.0"
       }
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/statuses": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
@@ -6123,6 +6337,13 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/std-env": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.2.0.tgz",
+      "integrity": "sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/stdin-discarder": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/stdin-discarder/-/stdin-discarder-0.3.2.tgz",
@@ -6382,6 +6603,13 @@
       "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
       "license": "MIT"
     },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tinyexec": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.3.0.tgz",
@@ -6407,6 +6635,16 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tinyrainbow": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.1.tgz",
+      "integrity": "sha512-yau8yJdTt989Mm0Bd/236QnzEiPf2xLLTqUZRUJOo/3CB078LSwzei343DgtJVmfJKJE3TMINY1u42SQsP6mXw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -6705,6 +6943,96 @@
         }
       }
     },
+    "node_modules/vitest": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.11.tgz",
+      "integrity": "sha512-fhACrNXUidIbGSBr5FlbuBkO7VWC1ZyLl0DO4CU2DrQoAPxX84Ysxs+HeGQpii5lZWV1Q4gBZTTu49mF+A6Edw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/expect": "4.1.11",
+        "@vitest/mocker": "4.1.11",
+        "@vitest/pretty-format": "4.1.11",
+        "@vitest/runner": "4.1.11",
+        "@vitest/snapshot": "4.1.11",
+        "@vitest/spy": "4.1.11",
+        "@vitest/utils": "4.1.11",
+        "es-module-lexer": "^2.0.0",
+        "expect-type": "^1.3.0",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^4.0.0-rc.1",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.1.0",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.1.11",
+        "@vitest/browser-preview": "4.1.11",
+        "@vitest/browser-webdriverio": "4.1.11",
+        "@vitest/coverage-istanbul": "4.1.11",
+        "@vitest/coverage-v8": "4.1.11",
+        "@vitest/ui": "4.1.11",
+        "happy-dom": "*",
+        "jsdom": "*",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/coverage-istanbul": {
+          "optional": true
+        },
+        "@vitest/coverage-v8": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        },
+        "vite": {
+          "optional": false
+        }
+      }
+    },
     "node_modules/vscode-uri": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
@@ -6856,6 +7184,23 @@
         "node": ">= 8"
       }
     },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",

webui/package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.3.1",
@@ -33,6 +34,7 @@
     "tailwindcss": "^4.3.3",
     "typescript": "~6.0.2",
     "vite": "^8.2.0",
+    "vitest": "^4.1.11",
     "vue-tsc": "^3.3.8"
   }
 }

webui/src/components/DataTable.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts" generic="TData">
 import type { ColumnDef, SortingState } from '@tanstack/vue-table'
-import { faSort, faSortDown, faSortUp } from '@fortawesome/free-solid-svg-icons'
 import { FlexRender, getCoreRowModel, getSortedRowModel, useVueTable } from '@tanstack/vue-table'
 import { ref } from 'vue'
 
+import SortHeaderButton from '@/components/SortHeaderButton.vue'
 import {
   Table,
   TableBody,
@@ -78,20 +78,7 @@ function ariaSort(dir: false | 'asc' | 'desc'): 'ascending' | 'descending' | und
           :class="header.column.columnDef.meta?.align === 'right' ? 'text-right' : undefined"
           :aria-sort="header.column.getCanSort() ? (ariaSort(header.column.getIsSorted()) ?? 'none') : undefined"
         >
-          <button
+          <SortHeaderButton v-if="header.column.getCanSort()" :header="header" class="-mx-1.5" />
-            v-if="header.column.getCanSort()"
-            type="button"
-            class="-mx-1.5 inline-flex items-center gap-1 rounded px-1.5 py-0.5 hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring"
-            @click="header.column.toggleSorting(header.column.getIsSorted() === 'asc')"
-          >
-            <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
-            <FontAwesomeIcon
-              :icon="header.column.getIsSorted() === 'asc' ? faSortUp : header.column.getIsSorted() === 'desc' ? faSortDown : faSort"
-              class="size-3 shrink-0"
-              :class="header.column.getIsSorted() ? 'text-foreground' : 'text-muted-foreground/60'"
-              aria-hidden="true"
-            />
-          </button>
           <FlexRender v-else-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
         </TableHead>
       </TableRow>

webui/src/components/OverviewView.vue

@@ -39,9 +39,10 @@ const overview = computed(() => dashboard.overview)
 //
 // Expand STATE itself is unchanged: lib/provider-expand.ts's plain,
 // Vue-free two-set module (manuallyExpanded/manuallyCollapsed) — the
-// exact search-interaction bug fix a prior review flagged, checkable by
+// exact search-interaction bug fix a prior review flagged, covered by a
-// its own throwaway assertion script without mounting Vue. Only the
+// real vitest spec (lib/provider-expand.spec.ts) that exercises the
-// template-facing adapter changed: expandedProviderValues below is a
+// module directly, without mounting Vue. Only the template-facing
+// adapter changed: expandedProviderValues below is a
 // writable computed translating that Set-based state into the string[]
 // shape Accordion's `type="multiple"` v-model expects, and back —
 // clicking a trigger fires the setter with the new array; diffing it
@@ -262,9 +263,9 @@ const aliasEmptyMessage = computed(() =>
         <Accordion v-else v-model="expandedProviderValues" type="multiple" class="rounded-md border px-3">
           <AccordionItem v-for="p in filteredProviders" :key="p.name" :value="p.name">
             <AccordionTrigger>
-              <div class="flex flex-1 flex-wrap items-center gap-x-3 gap-y-1 pr-2 text-left">
+              <span class="flex flex-1 flex-wrap items-center gap-x-3 gap-y-1 pr-2 text-left">
                 <span class="font-medium">{{ p.name }}</span>
-                <Badge variant="secondary" class="font-normal">{{ p.type }}</Badge>
+                <Badge as="span" variant="secondary" class="font-normal">{{ p.type }}</Badge>
                 <span class="text-xs text-muted-foreground tabular-nums">{{ p.modelCount }} models</span>
                 <FontAwesomeIcon
                   v-if="p.lastErr"
@@ -273,7 +274,7 @@ const aliasEmptyMessage = computed(() =>
                   aria-hidden="true"
                 />
                 <span class="text-xs text-muted-foreground">refreshed {{ formatAgo(p.lastRefresh) || 'never' }}</span>
-              </div>
+              </span>
             </AccordionTrigger>
             <AccordionContent>
               <dl class="mb-3 grid grid-cols-2 gap-x-6 gap-y-1.5 text-sm sm:grid-cols-3">

webui/src/components/SortHeaderButton.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts" generic="TData">
+import type { Header } from '@tanstack/vue-table'
+import { faSort, faSortDown, faSortUp } from '@fortawesome/free-solid-svg-icons'
+import { FlexRender } from '@tanstack/vue-table'
+import { computed } from 'vue'
+
+/**
+ * SortHeaderButton is the one clickable, sortable-column control every
+ * sortable header in the panel uses — DataTable.vue's real `<th>` header
+ * buttons AND UsageView.vue's Groups sort toolbar (which has no `<table>`
+ * to put a `<th>` in — see that view's own doc comment for why).
+ * Extracted so the button markup, sort-icon logic, click handler, and
+ * accessible name exist in exactly one place (vue.md: "if you've written
+ * it twice, you owe an abstraction"). Extra classes on this component
+ * (e.g. DataTable.vue's `-mx-1.5` cell-edge alignment) fall through onto
+ * the root `<button>` via Vue's default attribute inheritance.
+ */
+const props = defineProps<{
+  header: Header<TData, unknown>
+}>()
+
+const direction = computed(() => props.header.column.getIsSorted())
+
+const icon = computed(() => (direction.value === 'asc' ? faSortUp : direction.value === 'desc' ? faSortDown : faSort))
+
+/** headerLabel reads the column's own string header when it has one (every column def in this app uses a plain string) — falling back to the column id so the accessible name is never empty even for a hypothetical future function-header column. */
+const headerLabel = computed(() => {
+  const def = props.header.column.columnDef.header
+  return typeof def === 'string' ? def : props.header.column.id
+})
+
+const ariaLabel = computed(() => {
+  const state = direction.value === 'asc' ? 'ascending' : direction.value === 'desc' ? 'descending' : 'none'
+  return `Sort by ${headerLabel.value}, currently ${state}`
+})
+
+function onClick(): void {
+  props.header.column.toggleSorting(direction.value === 'asc')
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    :aria-label="ariaLabel"
+    class="inline-flex items-center gap-1 rounded px-1.5 py-0.5 hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring"
+    @click="onClick"
+  >
+    <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
+    <FontAwesomeIcon
+      :icon="icon"
+      class="size-3 shrink-0"
+      :class="direction ? 'text-foreground' : 'text-muted-foreground/60'"
+      aria-hidden="true"
+    />
+  </button>
+</template>

webui/src/components/UsageView.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { SortingState } from '@tanstack/vue-table'
-import { faSort, faSortDown, faSortUp } from '@fortawesome/free-solid-svg-icons'
+import { getCoreRowModel, getSortedRowModel, useVueTable } from '@tanstack/vue-table'
-import { FlexRender, getCoreRowModel, getSortedRowModel, useVueTable } from '@tanstack/vue-table'
 import { computed, ref } from 'vue'
 
+import SortHeaderButton from '@/components/SortHeaderButton.vue'
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { valueUpdater } from '@/components/ui/table'
@@ -59,10 +59,10 @@ function membersOf(group: AdminUsageEntryView): AdminUsageEntryView[] {
 // UsageTable (Users, and each group's own nested member list) drive a
 // second, unrendered useVueTable instance here purely for its
 // getSortedRowModel() — sortedGroupRows below. The small button toolbar
-// under the Groups heading toggles that sort exactly like DataTable.vue's
+// under the Groups heading toggles that sort using the identical
-// own sortable header buttons (same icons, same toggleSorting call,
+// SortHeaderButton DataTable.vue's real <th>s use (same icons, same
-// same aria-sort), just laid out as a toolbar instead of <th>s, because
+// toggleSorting call, same accessible name), just laid out as a toolbar
-// there is no <table> here to put a <th> in.
+// instead of <th>s, because there is no <table> here to put a <th> in.
 const groupColumns = usageColumns('Name', 'Members', memberCountOf)
 const groupSorting = ref<SortingState>([])
 const groupsTable = useVueTable({
@@ -83,10 +83,19 @@ const groupsTable = useVueTable({
 })
 const sortedGroupRows = computed(() => groupsTable.getRowModel().rows)
 
-/** ariaSort mirrors DataTable.vue's own helper — kept local since this toolbar isn't a <table> (aria-sort still applies to the toolbar buttons' own semantics, not a <th>, so it's set as a data attribute for styling/testing rather than the real ARIA property here). */
+/**
-function isSorted(id: string): false | 'asc' | 'desc' {
+ * TOOLBAR_COLUMN_IDS restricts the toolbar to exactly the fields each
-  return groupsTable.getColumn(id)?.getIsSorted() ?? false
+ * trigger row displays (Name, Members, req/day, cost/day) — review fix:
-}
+ * exposing all 11 usageColumns() fields as sortable when only 4 are
+ * visible per row let the accordion's order silently diverge from what
+ * the toolbar visibly claims to control. The full stat set stays
+ * available inside each expanded item's own detail grid, just not as a
+ * sort key here.
+ */
+const TOOLBAR_COLUMN_IDS = new Set(['id', 'secondary', 'reqDay', 'costDay'])
+const toolbarHeaders = computed(() =>
+  groupsTable.getHeaderGroups()[0].headers.filter((header) => TOOLBAR_COLUMN_IDS.has(header.column.id)),
+)
 
 /** Which groups are open — plain array state (no search-driven auto-expand exists for this view, unlike Providers, so the two-set provider-expand.ts module is not needed here). */
 const expandedGroups = ref<string[]>([])
@@ -129,28 +138,13 @@ const expandedGroups = ref<string[]>([])
           v-if="sortedGroupRows.length"
           class="mb-3 flex flex-wrap gap-x-4 gap-y-1 text-xs font-medium text-muted-foreground"
         >
-          <button
+          <SortHeaderButton v-for="header in toolbarHeaders" :key="header.id" :header="header" />
-            v-for="header in groupsTable.getHeaderGroups()[0].headers"
-            :key="header.id"
-            type="button"
-            class="inline-flex items-center gap-1 rounded px-1 py-0.5 hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring"
-            :data-sort="isSorted(header.column.id) || 'none'"
-            @click="header.column.toggleSorting(isSorted(header.column.id) === 'asc')"
-          >
-            <FlexRender :render="header.column.columnDef.header" :props="header.getContext()" />
-            <FontAwesomeIcon
-              :icon="isSorted(header.column.id) === 'asc' ? faSortUp : isSorted(header.column.id) === 'desc' ? faSortDown : faSort"
-              class="size-3 shrink-0"
-              :class="isSorted(header.column.id) ? 'text-foreground' : 'text-muted-foreground/50'"
-              aria-hidden="true"
-            />
-          </button>
         </div>
 
         <Accordion v-if="sortedGroupRows.length" v-model="expandedGroups" type="multiple" class="rounded-md border px-3">
           <AccordionItem v-for="row in sortedGroupRows" :key="row.original.id" :value="row.original.id">
             <AccordionTrigger>
-              <div class="flex flex-1 flex-wrap items-center gap-x-4 gap-y-1 pr-2 text-left">
+              <span class="flex flex-1 flex-wrap items-center gap-x-4 gap-y-1 pr-2 text-left">
                 <span class="font-medium">{{ row.original.id }}</span>
                 <span class="text-xs text-muted-foreground tabular-nums">{{ memberCountOf(row.original) || '0' }} members</span>
                 <span class="text-xs text-muted-foreground tabular-nums">
@@ -159,7 +153,7 @@ const expandedGroups = ref<string[]>([])
                 <span class="text-xs text-muted-foreground tabular-nums">
                   {{ row.original.storeDown ? '?' : formatCost(row.original.costPerDayMicroUsd) }}/day
                 </span>
-              </div>
+              </span>
             </AccordionTrigger>
             <AccordionContent>
               <dl class="mb-3 grid grid-cols-2 gap-x-6 gap-y-1.5 text-sm sm:grid-cols-4">

webui/src/lib/provider-expand.spec.ts

@@ -0,0 +1,118 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  type ExpandState,
+  clearExpandOverrides,
+  computeExpandedProviders,
+  toggleProviderExpand,
+} from './provider-expand'
+
+/** newState is a fresh ExpandState — every test starts from an empty, un-searched panel. */
+function newState(): ExpandState {
+  return { manuallyExpanded: new Set(), manuallyCollapsed: new Set() }
+}
+
+describe('computeExpandedProviders', () => {
+  it('returns manuallyExpanded verbatim when there is no active query', () => {
+    const state = newState()
+    state.manuallyExpanded.add('openai')
+    expect(computeExpandedProviders(state, false, ['openai', 'anthropic'])).toEqual(new Set(['openai']))
+  })
+
+  it('auto-expands every matching name while a query is active', () => {
+    const state = newState()
+    expect(computeExpandedProviders(state, true, ['openai', 'anthropic'])).toEqual(new Set(['openai', 'anthropic']))
+  })
+
+  it('unions manuallyExpanded with matches while a query is active', () => {
+    const state = newState()
+    state.manuallyExpanded.add('gemini') // manually opened before the search started, does not match it
+    expect(computeExpandedProviders(state, true, ['openai'])).toEqual(new Set(['gemini', 'openai']))
+  })
+
+  it('suppresses an auto-match the user explicitly collapsed', () => {
+    const state = newState()
+    state.manuallyCollapsed.add('openai')
+    expect(computeExpandedProviders(state, true, ['openai', 'anthropic'])).toEqual(new Set(['anthropic']))
+  })
+})
+
+describe('toggleProviderExpand', () => {
+  it('opening (currentlyExpanded=false) adds to manuallyExpanded and clears any collapse override', () => {
+    const state = newState()
+    state.manuallyCollapsed.add('openai')
+    toggleProviderExpand(state, 'openai', false)
+    expect(state.manuallyExpanded.has('openai')).toBe(true)
+    expect(state.manuallyCollapsed.has('openai')).toBe(false)
+  })
+
+  it('closing (currentlyExpanded=true) removes from manuallyExpanded and adds a collapse override', () => {
+    const state = newState()
+    state.manuallyExpanded.add('openai')
+    toggleProviderExpand(state, 'openai', true)
+    expect(state.manuallyExpanded.has('openai')).toBe(false)
+    expect(state.manuallyCollapsed.has('openai')).toBe(true)
+  })
+})
+
+describe('clearExpandOverrides', () => {
+  it('drops manuallyCollapsed but leaves manuallyExpanded untouched', () => {
+    const state = newState()
+    state.manuallyExpanded.add('openai')
+    state.manuallyCollapsed.add('anthropic')
+    clearExpandOverrides(state)
+    expect(state.manuallyCollapsed.size).toBe(0)
+    expect(state.manuallyExpanded.has('openai')).toBe(true)
+  })
+})
+
+describe('the review-flagged sequence: an auto-matched (never manually opened) provider, clicked closed', () => {
+  it('never enters manuallyExpanded, and stays collapsed after the query clears', () => {
+    const state = newState()
+    const matches = ['openai']
+
+    // 1. Search starts matching "openai" — it shows via auto-expand only,
+    //    manuallyExpanded is still empty.
+    let expanded = computeExpandedProviders(state, true, matches)
+    expect(expanded.has('openai')).toBe(true)
+    expect(state.manuallyExpanded.has('openai')).toBe(false)
+
+    // 2. User clicks it closed while it's only auto-expanded. The RAW bug
+    //    this module exists to fix: reading manuallyExpanded.has('openai')
+    //    directly (false) would have ADDED it to manuallyExpanded instead
+    //    of suppressing the auto-expand. toggleProviderExpand takes the
+    //    EFFECTIVE current state (expanded.has('openai') === true) instead.
+    toggleProviderExpand(state, 'openai', expanded.has('openai'))
+    expect(state.manuallyExpanded.has('openai')).toBe(false)
+    expect(state.manuallyCollapsed.has('openai')).toBe(true)
+
+    // 3. Still searching: the override suppresses the auto-expand.
+    expanded = computeExpandedProviders(state, true, matches)
+    expect(expanded.has('openai')).toBe(false)
+
+    // 4. Query clears: a stale override must never carry into a later,
+    //    unrelated search.
+    clearExpandOverrides(state)
+    expanded = computeExpandedProviders(state, false, [])
+    expect(expanded.has('openai')).toBe(false)
+  })
+})
+
+describe('a provider manually opened before search, still matches, clicked closed during search', () => {
+  it("the user's in-search click wins, and it stays closed after the query clears too", () => {
+    const state = newState()
+    state.manuallyExpanded.add('openai') // opened before any search existed
+    const matches = ['openai']
+
+    let expanded = computeExpandedProviders(state, true, matches)
+    expect(expanded.has('openai')).toBe(true)
+
+    toggleProviderExpand(state, 'openai', expanded.has('openai'))
+    expect(state.manuallyExpanded.has('openai')).toBe(false)
+    expect(state.manuallyCollapsed.has('openai')).toBe(true)
+
+    clearExpandOverrides(state)
+    expanded = computeExpandedProviders(state, false, [])
+    expect(expanded.has('openai')).toBe(false)
+  })
+})

webui/src/lib/provider-expand.ts

@@ -1,8 +1,10 @@
 /**
  * Pure expand/collapse state for OverviewView.vue's provider-model
  * accordion, extracted out of the component so the exact toggle sequence
- * a review flagged (see toggleProviderExpand's own comment) is checkable
+ * a review flagged (see toggleProviderExpand's own comment) is tested in
- * in isolation, without mounting Vue.
+ * isolation, without mounting Vue — see provider-expand.spec.ts (vitest),
+ * which exercises this module directly, including the full flagged
+ * sequence.
  *
  * Two sets track state:
  * - manuallyExpanded: providers the user explicitly opened, independent

webui/vite.config.ts

@@ -2,7 +2,11 @@ import { fileURLToPath, URL } from 'node:url'
 
 import tailwindcss from '@tailwindcss/vite'
 import vue from '@vitejs/plugin-vue'
-import { defineConfig } from 'vite'
+// vitest/config's defineConfig is vite's own, augmented with the `test`
+// field's types — importing from here (not 'vite') is what lets the
+// `test` block below type-check under vue-tsc -b without a separate
+// vitest.config.ts or a triple-slash type reference.
+import { defineConfig } from 'vitest/config'
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -28,4 +32,13 @@ export default defineConfig({
     // polyfill has nothing to do here anyway.
     modulePreload: { polyfill: false },
   },
+  test: {
+    // Deliberately narrow: only lib/provider-expand.ts's pure state module
+    // is under vitest right now (webui's test infra starts here, on
+    // purpose — no snapshot/DOM/component testing this round). 'node' is
+    // enough since the module touches no browser globals; jsdom is not
+    // pulled in as a dependency for a module that doesn't need it.
+    environment: 'node',
+    include: ['src/**/*.spec.ts'],
+  },
 })