refactor(ui): unify styles, animations and shared components across Desktop, Gateway and agent-ui

.github/workflows/ci.yml

@@ -120,7 +120,7 @@ jobs:
         run: npm install -g pnpm@10.32.1
 
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile --filter @liveagent/gateway-webui...
+        run: pnpm install --frozen-lockfile --filter liveagent-workspace --filter @liveagent/gateway-webui...
 
       - name: Build WebUI
         working-directory: crates/agent-gateway/web
@@ -150,7 +150,7 @@ jobs:
       - name: Install dependencies
         # GUI frontend tests load shared Gateway WebUI modules (including STT adapters).
         # Install that workspace and its transitive dependencies in this isolated job.
-        run: pnpm install --frozen-lockfile --filter liveagent... --filter @liveagent/gateway-webui...
+        run: pnpm install --frozen-lockfile --filter liveagent-workspace --filter liveagent... --filter @liveagent/gateway-webui...
 
       - name: Typecheck and build GUI frontend
         working-directory: crates/agent-gui
@@ -249,14 +249,27 @@ jobs:
         run: npm install -g pnpm@10.32.1
 
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile --filter @liveagent/ui...
+        # Shared UI resolves host adapters from the desktop package while typechecking.
+        run: pnpm install --frozen-lockfile --filter liveagent-workspace --filter liveagent... --filter @liveagent/ui...
+
+      - name: Typecheck shared UI
+        run: pnpm typecheck:ui
+
+      - name: Lint shared UI
+        run: pnpm lint:ui
 
       - name: Run check script tests
         run: pnpm check:script-tests
 
       - name: Check shared UI dependency boundaries
         run: pnpm check:ui-boundaries
 
+      - name: Reject new Biome warnings
+        run: |
+          node scripts/check-biome-changed.mjs ui
+          node scripts/check-biome-changed.mjs gui
+          node scripts/check-biome-changed.mjs webui
+
   whitespace:
     name: Diff Hygiene
     runs-on: ubuntu-latest

Dockerfile

@@ -5,7 +5,7 @@ FROM --platform=$BUILDPLATFORM node:22.17.1-bookworm-slim AS webui
 WORKDIR /src
 RUN npm install -g pnpm@10.32.1
 
-COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml tsconfig.base.json tsconfig.node.base.json ./
 COPY crates/virtual-core/package.json crates/virtual-core/package.json
 COPY crates/agent-ui/package.json crates/agent-ui/package.json
 COPY crates/agent-gui/package.json crates/agent-gui/package.json

crates/agent-gui/biome.json → biome.json

@@ -7,10 +7,13 @@
   },
   "files": {
     "includes": [
-      "src/**",
+      "crates/agent-ui/src/**",
+      "crates/agent-gui/src/**",
+      "crates/agent-gateway/web/src/**",
       "!!**/dist",
       "!!**/node_modules",
-      "!src/lib/models/catalog.generated.ts"
+      "!**/src/lib/models/catalog.generated.ts",
+      "!crates/agent-gateway/web/src/lib/proto/gen/**"
     ]
   },
   "formatter": {
@@ -39,7 +42,9 @@
         "noUnusedImports": "error"
       },
       "suspicious": {
-        "noArrayIndexKey": "warn"
+        "noArrayIndexKey": "warn",
+        "noDuplicateCustomProperties": "error",
+        "noDuplicateProperties": "error"
       }
     }
   },
@@ -62,19 +67,5 @@
         "organizeImports": "on"
       }
     }
-  },
-  "overrides": [
-    {
-      "includes": [
-        "**/*.css"
-      ],
-      "linter": {
-        "rules": {
-          "suspicious": {
-            "noDuplicateProperties": "off"
-          }
-        }
-      }
-    }
-  ]
+  }
 }

crates/agent-gateway/test/helpers/load-web-module.mjs

@@ -202,7 +202,7 @@ export function createWebModuleLoader(options = {}) {
       specifier.startsWith("@liveagent/adapters/");
 
     if (!isRootRelative && !specifier.startsWith(".") && !path.isAbsolute(specifier)) {
-      return requireFromRoot(specifier);
+      return createRequire(path.join(parentDir, "__liveagent_test_loader__.js"))(specifier);
     }
 
     const filePath = resolveLocal(specifier, isRootRelative ? rootDir : parentDir);
@@ -236,7 +236,7 @@ export function createWebModuleLoader(options = {}) {
       nextSpecifier.startsWith("@liveagent/app/") ||
       nextSpecifier.startsWith("@liveagent/adapters/")
         ? resolveLocal(nextSpecifier, dirname)
-        : requireFromRoot.resolve(nextSpecifier);
+        : createRequire(path.join(dirname, "__liveagent_test_loader__.js")).resolve(nextSpecifier);
 
     const wrapped = `(function (exports, require, module, __filename, __dirname) {\n${outputText}\n})`;
     const script = new vm.Script(wrapped, { filename: filePath });

crates/agent-gateway/test/webui/history-chat-ui.test.mjs

@@ -949,8 +949,9 @@ test("GatewayTranscript renders folded and live rows in one virtualized list", (
     findTreeNode(
       listTree,
       (node) =>
-        typeof node.props?.className === "string" &&
-        node.props.className.includes("gateway-transcript-row-user"),
+        typeof node.type === "function" &&
+        node.props?.row?.kind === "user" &&
+        node.props.row.text === "queued from gui",
     ),
     "live user bubble renders before the live assistant output",
   );

crates/agent-gateway/web/package.json

@@ -5,12 +5,13 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "pnpm typecheck && vite build",
     "preview": "vite preview",
     "test": "node ../../../scripts/run-node-tests.mjs ../test/webui test",
     "lint": "biome check src/ --max-diagnostics=none",
     "format": "biome format --write src/",
-    "lint:fix": "biome check --write src/"
+    "lint:fix": "biome check --write src/",
+    "typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.node.json"
   },
   "dependencies": {
     "@liveagent/ui": "workspace:*",
@@ -40,7 +41,6 @@
     "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.4.15",
     "@bufbuild/protoc-gen-es": "2.12.1",
     "@earendil-works/pi-ai": "^0.84.2",
     "@iconify-json/logos": "^1.2.11",

crates/agent-gateway/web/src/agent-ui-adapters/providerSettings.tsx

@@ -1,4 +1,4 @@
-import type { AppSettings, CustomProvider, ProviderId } from "../lib/settings";
+import type { AppSettings, CustomProvider } from "../lib/settings";
 import type { SettingsSectionProps } from "../pages/settings/types";
 
 /** WebUI 会脱敏 API Key，复制配置按钮仅在桌面端提供。 */
@@ -9,7 +9,6 @@ export function ProviderCopyConfigButton(_props: {
 }
 
 export function ProviderSettingsExtension(_props: {
-  activeTab: ProviderId;
   settings: AppSettings;
   setSettings: SettingsSectionProps["setSettings"];
   triggerClassName?: string;

crates/agent-gateway/web/src/agent-ui-adapters/settingsExtension.tsx

@@ -11,7 +11,7 @@ export function createSettingsExtension(props: SettingsPageProps): {
 } {
   return {
     surface: "web",
-    iconClassName: "h-4 w-4",
+    iconClassName: "size-4",
     slots: {},
     sections: [
       {
@@ -20,7 +20,7 @@ export function createSettingsExtension(props: SettingsPageProps): {
         groupOrder: 40,
         order: 30,
         labelKey: "settings.navAgentManagement",
-        icon: <MonitorSmartphone className="h-4 w-4" />,
+        icon: <MonitorSmartphone className="size-4" />,
         showSaveIndicator: false,
         render: () => <DevicesSection onDirectoryChanged={props.onAgentDirectoryChanged} />,
       },

crates/agent-gateway/web/src/app/AgentSelector.tsx

@@ -81,17 +81,15 @@ export function AgentSelector({
       : t("settings.devicesOfflineStatus");
     return (
       <div className="px-1">
-        <DropdownMenuLabel className="px-2 pb-1 pt-2 text-xs font-medium text-muted-foreground">
-          {t("settings.devicesTitle")}
-        </DropdownMenuLabel>
+        <DropdownMenuLabel>{t("settings.devicesTitle")}</DropdownMenuLabel>
         <div className="px-2.5 pb-2.5 pt-1">
           <div className="flex min-w-0 items-center gap-2.5">
             <span
               className={cn(
-                "h-2 w-2 shrink-0 rounded-full",
+                "size-2 shrink-0 rounded-full",
                 agent.online
-                  ? "bg-emerald-500 shadow-[0_0_0_3px_rgb(16_185_129_/_0.12)]"
-                  : "bg-rose-500 shadow-[0_0_0_3px_rgb(244_63_94_/_0.10)]",
+                  ? "bg-emerald-500 shadow-ui-agentselector-53"
+                  : "bg-rose-500 shadow-ui-agentselector-54",
               )}
               title={statusLabel}
             >
@@ -101,13 +99,13 @@ export function AgentSelector({
               <span className="block truncate text-sm font-medium" title={name || agentID}>
                 {name || truncateMiddle(agentID)}
               </span>
-              <span className="block truncate font-mono text-[11px] text-muted-foreground">
+              <span className="block truncate font-mono text-xs text-muted-foreground">
                 {truncateMiddle(agentID)}
               </span>
             </span>
             <span
               className={cn(
-                "shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium",
+                "shrink-0 rounded-full px-2 py-0.5 text-tiny font-medium",
                 agent.online
                   ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
                   : "bg-rose-500/10 text-rose-600 dark:text-rose-400",
@@ -123,9 +121,7 @@ export function AgentSelector({
 
   return (
     <>
-      <DropdownMenuLabel className="px-3 pb-1 pt-2 text-xs font-medium text-muted-foreground">
-        {t("settings.devicesTitle")}
-      </DropdownMenuLabel>
+      <DropdownMenuLabel>{t("settings.devicesTitle")}</DropdownMenuLabel>
       <div className="max-h-64 overflow-y-auto px-1">
         {sortedAgents.map((agent) => {
           const agentID = agent.agent_id?.trim() || "";
@@ -143,10 +139,10 @@ export function AgentSelector({
             >
               <span
                 className={cn(
-                  "h-2 w-2 shrink-0 rounded-full",
+                  "size-2 shrink-0 rounded-full",
                   agent.online
-                    ? "bg-emerald-500 shadow-[0_0_0_3px_rgb(16_185_129_/_0.12)]"
-                    : "bg-rose-500 shadow-[0_0_0_3px_rgb(244_63_94_/_0.10)]",
+                    ? "bg-emerald-500 shadow-ui-agentselector-53"
+                    : "bg-rose-500 shadow-ui-agentselector-54",
                 )}
                 title={statusLabel}
               >
@@ -158,14 +154,14 @@ export function AgentSelector({
                 </span>
                 {name ? (
                   <span
-                    className="block truncate font-mono text-[11px] text-muted-foreground"
+                    className="block truncate font-mono text-xs text-muted-foreground"
                     title={agentID}
                   >
                     {truncateMiddle(agentID)}
                   </span>
                 ) : null}
               </span>
-              {selected ? <Check className="h-4 w-4 shrink-0 text-emerald-600" /> : null}
+              {selected ? <Check className="size-4 shrink-0 text-emerald-600" /> : null}
             </DropdownMenuItem>
           );
         })}