refactor(ui): migrate devtools panel to shadcn-vue (#12)

* refactor(ui): migrate devtools panel to shadcn-vue
* fix(ui): restore locale toggle and diff styling
* fix(ui): scroll diff table container to top
* fix(ui): pin locale and theme controls top right
* fix(ui): use locale selector for language control
* fix(ui): prevent page scrollbar flicker
* docs: update screenshot
* fix(ui): strengthen diff row contrast
* fix(ui): highlight second diff value
* fix(ui): open header info on click
* refactor(ui): redesign diff workspace
* fix(ui): remove filter highlight spacing
* fix(ui): mark missing diff values on both sides
* fix(ui): center empty table state
* feat(ui): remove individual selections
* fix(ui): align header control sizes
* refactor(ui): compact selected element headers
* fix(ui): clear diffs after removing synced selection
* fix(ui): unify compact control sizing
* refactor(ui): remove back to top control
* feat(ui): show logo in panel header
* fix(ui): use neutral language switch icon
* fix(lint): add node import resolver
* fix(ui): default theme to system preference
* fix(ui): keep detail labels on one line
* docs: update screenshot
* fix(i18n): localize missing css values
* fix(review): address remaining codex feedback

Author: jevin98

.gitignore

@@ -13,6 +13,7 @@ stats.html
 stats-*.json
 .wxt
 web-ext.config.ts
+.superpowers/
 coverage
 playwright-report
 test-results

AGENTS.md

@@ -10,7 +10,7 @@ Guidance for coding agents working in this repository.
 
 - Package manager: `pnpm` (`packageManager` is `pnpm@9.14.1`).
 - Extension framework: WXT.
-- UI: Vue 3 single-file components with Element Plus and Tailwind CSS.
+- UI: Vue 3 single-file components with shadcn-vue style components, Reka UI primitives, and Tailwind CSS v4.
 - Localization: WXT/browser `i18n` messages under `public/_locales`.
 - Language: TypeScript with Vue type checking through `vue-tsc`.
 - Formatting and linting: ESLint 9 with `@antfu/eslint-config`; Prettier is intentionally disabled in VS Code.
@@ -27,7 +27,7 @@ Guidance for coding agents working in this repository.
 -`entrypoints/devtools-panel/lang.ts`: typed wrapper around `browser.i18n.getMessage`.
 -`public/_locales/en/messages.json`: English extension and panel messages.
 -`public/_locales/zh_CN/messages.json`: Simplified Chinese extension and panel messages.
--`assets/main.css`: Tailwind CSS v4 import and small global Element Plus table overrides.
+-`assets/main.css`: Tailwind CSS v4 import, shadcn design tokens, theme variables, and global panel styles.
 -`public/icon/`: extension icons.
 -`.github/renovate.json5`: dependency update policy.
 
@@ -69,7 +69,7 @@ There is no dedicated `lint` or `format` script in `package.json`; use ESLint di
 - Keep Vue component state and browser interaction logic in composables such as `useDevToolsPanel`.
 - Keep pure data helpers in `entrypoints/devtools-panel/utils/`.
 - Preserve the existing i18n structure by updating both `public/_locales/en/messages.json` and `public/_locales/zh_CN/messages.json` when adding user-visible strings.
-- Use Element Plus components consistently with the existing DevTools panel UI.
+- Use local `components/ui/*` shadcn-vue style components for controls.
 - Use Tailwind utility classes for layout and small style adjustments.
 - The existing code relies on WXT/browser extension globals such as `browser`; do not replace them with unrelated APIs without a compatibility reason.
 
@@ -84,7 +84,7 @@ There is no dedicated `lint` or `format` script in `package.json`; use ESLint di
 - Computed styles are normalized by `formatStyle` before comparison.
 - Selected elements are compared as `left` and `right`; a third selection is ignored until the current selection is cleared.
 - Cross-window/tab synchronization is handled by broadcasting through `browser.tabs.sendMessage`.
-- Table rows use color classes to distinguish changed and unchanged CSS properties, and clicking a value cell copies `property: value;`.
+- Table rows use monochrome emphasis to distinguish changed and unchanged CSS properties, and clicking a value cell copies `property: value;`.
 
 ## Pull Request Expectations
 

assets/main.css

@@ -1,11 +1,100 @@
 @import"tailwindcss";
 
-body {
-padding:16px;
-overflow-x: hidden;
-overflow-y: scroll;
+@source"../entrypoints";
+@source"../components";
+@source"../lib";
+
+@custom-variant dark (&:where(.dark, .dark*));
+
+@theme inline {
+--color-background:hsl(var(--background));
+--color-foreground:hsl(var(--foreground));
+--color-popover:hsl(var(--popover));
+--color-popover-foreground:hsl(var(--popover-foreground));
+--color-primary:hsl(var(--primary));
+--color-primary-foreground:hsl(var(--primary-foreground));
+--color-secondary:hsl(var(--secondary));
+--color-secondary-foreground:hsl(var(--secondary-foreground));
+--color-muted:hsl(var(--muted));
+--color-muted-foreground:hsl(var(--muted-foreground));
+--color-accent:hsl(var(--accent));
+--color-accent-foreground:hsl(var(--accent-foreground));
+--color-destructive:hsl(var(--destructive));
+--color-destructive-foreground:hsl(var(--destructive-foreground));
+--color-border:hsl(var(--border));
+--color-input:hsl(var(--input));
+--color-ring:hsl(var(--ring));
+--radius-lg:var(--radius);
+--radius-md:calc(var(--radius) -2px);
+--radius-sm:calc(var(--radius) -4px);
+}
+
+@layer base {
+:root {
+--background:00%100%;
+--foreground:00%3.9%;
+--popover:00%100%;
+--popover-foreground:00%3.9%;
+--primary:00%9%;
+--primary-foreground:00%98%;
+--secondary:00%96.1%;
+--secondary-foreground:00%9%;
+--muted:00%96.1%;
+--muted-foreground:00%45.1%;
+--accent:00%96.1%;
+--accent-foreground:00%9%;
+--destructive:00%9%;
+--destructive-foreground:00%98%;
+--border:00%89.8%;
+--input:00%89.8%;
+--ring:00%3.9%;
+--radius:0.5rem;
+ }
+
+ .dark {
+--background:00%3.9%;
+--foreground:00%98%;
+--popover:00%3.9%;
+--popover-foreground:00%98%;
+--primary:00%98%;
+--primary-foreground:00%9%;
+--secondary:00%14.9%;
+--secondary-foreground:00%98%;
+--muted:00%14.9%;
+--muted-foreground:00%63.9%;
+--accent:00%14.9%;
+--accent-foreground:00%98%;
+--destructive:00%98%;
+--destructive-foreground:00%9%;
+--border:00%14.9%;
+--input:00%14.9%;
+--ring:00%83.1%;
+ }
+
+* {
+@apply border-border;
+ }
+
+html {
+color-scheme: light;
+ }
+
+html.dark {
+color-scheme: dark;
+ }
+
+body {
+@apply bg-background text-foreground antialiased;
+min-width:0;
+margin:0;
+padding:16px;
+overflow-y: hidden;
+ }
 }
 
-.el-table--enable-row-hover .el-table__bodytr:hover>td.el-table__cell{
-background-color: inherit !important;
+@layer utilities {
+ .css-diff-scrollbar {
+scrollbar-color:hsl(var(--muted-foreground) /0.35) transparent;
+scrollbar-width: thin;
+ }
 }

components.json

@@ -0,0 +1,20 @@
+{
+"$schema": "https://shadcn-vue.com/schema.json",
+"style": "new-york",
+"typescript": true,
+"tailwind": {
+"config": "",
+"css": "assets/main.css",
+"baseColor": "neutral",
+"cssVariables": true,
+"prefix": ""
+ },
+"aliases": {
+"components": "@/components",
+"composables": "@/composables",
+"utils": "@/lib/utils",
+"ui": "@/components/ui",
+"lib": "@/lib"
+ },
+"iconLibrary": "lucide"
+}

components/ui/button/Button.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+importtype { HTMLAttributes } from'vue'
+import { Primitive, typePrimitiveProps } from'reka-ui'
+import { cn } from'@/lib/utils'
+import { buttonVariants, typeButtonVariants } from'.'
+
+interfacePropsextendsPrimitiveProps {
+ variant?:ButtonVariants['variant']
+ size?:ButtonVariants['size']
+ class?:HTMLAttributes['class']
+}
+
+const props =withDefaults(defineProps<Props>(), {
+ as: 'button',
+})
+</script>
+
+<template>
+ <Primitive
+ :as="props.as"
+ :as-child="props.asChild"
+ :class="cn(buttonVariants({ variant: props.variant, size: props.size }), props.class)"
+ >
+ <slot />
+ </Primitive>
+</template>

components/ui/button/index.ts

@@ -0,0 +1,29 @@
+import{cva,typeVariantProps}from'class-variance-authority'
+
+export{defaultasButton}from'./Button.vue'
+
+exportconstbuttonVariants=cva(
+'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+{
+variants: {
+variant: {
+default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+ghost: 'hover:bg-accent hover:text-accent-foreground',
+},
+size: {
+default: 'h-9 px-4 py-2',
+sm: 'h-8 rounded-md px-3 text-xs',
+icon: 'h-8 w-8',
+},
+},
+defaultVariants: {
+variant: 'default',
+size: 'default',
+},
+},
+)
+
+exporttypeButtonVariants=VariantProps<typeofbuttonVariants>

components/ui/checkbox/Checkbox.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+importtype { HTMLAttributes } from'vue'
+import { Check } from'lucide-vue-next'
+import { CheckboxIndicator, CheckboxRoot } from'reka-ui'
+import { cn } from'@/lib/utils'
+
+const props =defineProps<{
+ class?:HTMLAttributes['class']
+}>()
+
+const checked =defineModel<boolean|'indeterminate'>('checked')
+</script>
+
+<template>
+ <CheckboxRoot
+v-model:checked="checked"
+ :class="cn('peer h-4 w-4 shrink-0 rounded border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', props.class)"
+ >
+ <CheckboxIndicator class="flex items-center justify-center text-current">
+ <Check class="h-3.5 w-3.5" />
+ </CheckboxIndicator>
+ </CheckboxRoot>
+</template>

components/ui/checkbox/index.ts

@@ -0,0 +1 @@
+export{defaultasCheckbox}from'./Checkbox.vue'

components/ui/input/Input.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+importtype { HTMLAttributes } from'vue'
+import { cn } from'@/lib/utils'
+
+const props =defineProps<{
+ class?:HTMLAttributes['class']
+}>()
+
+const modelValue =defineModel<string|number>()
+</script>
+
+<template>
+ <input
+v-model="modelValue"
+:class="cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+ >
+</template>

components/ui/input/index.ts

@@ -0,0 +1 @@
+export{defaultasInput}from'./Input.vue'