fix: update design language

web/package-lock.json

@@ -8,7 +8,7 @@
       "name": "web",
       "version": "0.0.0",
       "dependencies": {
-        "@nous-research/ui": "^0.4.0",
+        "@nous-research/ui": "0.6.0",
         "@observablehq/plot": "^0.6.17",
         "@react-three/fiber": "^9.6.0",
         "@tailwindcss/vite": "^4.2.1",
@@ -44,6 +44,68 @@
         "vite": "^7.3.1"
       }
     },
+    "../../design-language": {
+      "name": "@nous-research/ui",
+      "version": "0.6.0",
+      "license": "MIT",
+      "dependencies": {
+        "@nanostores/react": "^1.0.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "nanostores": "^1.0.1",
+        "sanitize-html": "^2.16.0",
+        "tailwind-merge": "^3.3.1",
+        "tw-animate-css": "^1.4.0"
+      },
+      "devDependencies": {
+        "@observablehq/plot": "^0.6.17",
+        "@react-three/fiber": "^9.4.0",
+        "@storybook/addon-a11y": "^10.3.1",
+        "@storybook/addon-docs": "^10.3.1",
+        "@storybook/react-vite": "^10.3.1",
+        "@tailwindcss/cli": "^4",
+        "@tailwindcss/vite": "^4",
+        "@types/node": "25.6.0",
+        "@types/react": "^19.2.3",
+        "@types/react-dom": "^19.2.3",
+        "@types/sanitize-html": "^2.16.0",
+        "@types/three": "^0.183.1",
+        "@vitejs/plugin-react": "^5.0.0",
+        "gsap": "^3.13.0",
+        "leva": "^0.10.1",
+        "storybook": "^10.3.1",
+        "tailwindcss": "^4",
+        "three": "^0.180.0",
+        "typescript": "^5",
+        "vite": "^6.0.0"
+      },
+      "peerDependencies": {
+        "@observablehq/plot": "^0.6.17",
+        "@react-three/fiber": "^9.4.0",
+        "gsap": "^3.13.0",
+        "leva": "^0.10.1",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "three": "^0.180.0"
+      },
+      "peerDependenciesMeta": {
+        "@observablehq/plot": {
+          "optional": true
+        },
+        "@react-three/fiber": {
+          "optional": true
+        },
+        "gsap": {
+          "optional": true
+        },
+        "leva": {
+          "optional": true
+        },
+        "three": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
@@ -1058,72 +1120,15 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@nanostores/react": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@nanostores/react/-/react-1.1.0.tgz",
-      "integrity": "sha512-MbH35fjhcf7LAubYX5vhOChYUfTLzNLqH/mBGLVsHkcvjy0F8crO1WQwdmQ2xKbAmtpalDa2zBt3Hlg5kqr8iw==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": "^20.0.0 || >=22.0.0"
-      },
-      "peerDependencies": {
-        "nanostores": "^1.2.0",
-        "react": ">=18.0.0"
-      }
-    },
     "node_modules/@nous-research/ui": {
-      "version": "0.4.0",
+      "resolved": "../../design-language",
-      "resolved": "https://registry.npmjs.org/@nous-research/ui/-/ui-0.4.0.tgz",
+      "link": true
-      "integrity": "sha512-wA9YImWLFjx3yWsb3TsquwG9VKZunupdovkOjnRboFjNAb3Jcf57o67xWafEPEm3VX6k6RP/+Y9zHWX0PUtZ4w==",
-      "license": "MIT",
-      "dependencies": {
-        "@nanostores/react": "^1.0.0",
-        "class-variance-authority": "^0.7.1",
-        "clsx": "^2.1.1",
-        "nanostores": "^1.0.1",
-        "sanitize-html": "^2.16.0",
-        "tailwind-merge": "^3.3.1",
-        "tw-animate-css": "^1.4.0"
-      },
-      "peerDependencies": {
-        "@observablehq/plot": "^0.6.17",
-        "@react-three/fiber": "^9.4.0",
-        "gsap": "^3.13.0",
-        "leva": "^0.10.1",
-        "react": "^19.0.0",
-        "react-dom": "^19.0.0",
-        "three": "^0.180.0"
-      },
-      "peerDependenciesMeta": {
-        "@observablehq/plot": {
-          "optional": true
-        },
-        "@react-three/fiber": {
-          "optional": true
-        },
-        "gsap": {
-          "optional": true
-        },
-        "leva": {
-          "optional": true
-        },
-        "three": {
-          "optional": true
-        }
-      }
     },
     "node_modules/@observablehq/plot": {
       "version": "0.6.17",
       "resolved": "https://registry.npmjs.org/@observablehq/plot/-/plot-0.6.17.tgz",
       "integrity": "sha512-/qaXP/7mc4MUS0s4cPPFASDRjtsWp85/TbfsciqDgU1HwYixbSbbytNuInD8AcTYC3xaxACgVX06agdfQy9W+g==",
       "license": "ISC",
-      "peer": true,
       "dependencies": {
         "d3": "^7.9.0",
         "interval-tree-1d": "^1.0.0",
@@ -1776,7 +1781,6 @@
       "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-9.6.0.tgz",
       "integrity": "sha512-90abYK2q5/qDM+GACs9zRvc5KhEEpEWqWlHSd64zTPNxg+9wCJvTfyD9x2so7hlQhjRYO1Fa6flR3BC/kpTFkA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.17.8",
         "@types/webxr": "*",
@@ -3668,15 +3672,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/deepmerge": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
-      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/delaunator": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.1.0.tgz",
@@ -3704,73 +3699,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/dom-serializer": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
-      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
-      "license": "MIT",
-      "dependencies": {
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.2",
-        "entities": "^4.2.0"
-      },
-      "funding": {
-        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
-      }
-    },
-    "node_modules/dom-serializer/node_modules/entities": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
-    "node_modules/domelementtype": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ],
-      "license": "BSD-2-Clause"
-    },
-    "node_modules/domhandler": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
-      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "domelementtype": "^2.3.0"
-      },
-      "engines": {
-        "node": ">= 4"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domhandler?sponsor=1"
-      }
-    },
-    "node_modules/domutils": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
-      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "dom-serializer": "^2.0.0",
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.3"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domutils?sponsor=1"
-      }
-    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.344",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.344.tgz",
@@ -3791,18 +3719,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/entities": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
-      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
     "node_modules/esbuild": {
       "version": "0.27.7",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.7.tgz",
@@ -3858,6 +3774,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -4251,8 +4168,7 @@
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.15.0.tgz",
       "integrity": "sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==",
-      "license": "Standard 'no charge' license: https://gsap.com/standard-license.",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
-      "peer": true
     },
     "node_modules/has-flag": {
       "version": "4.0.0",
@@ -4281,25 +4197,6 @@
         "hermes-estree": "0.25.1"
       }
     },
-    "node_modules/htmlparser2": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-10.1.0.tgz",
-      "integrity": "sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==",
-      "funding": [
-        "https://github.com/fb55/htmlparser2?sponsor=1",
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.3",
-        "domutils": "^3.2.2",
-        "entities": "^7.0.1"
-      }
-    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -4558,7 +4455,6 @@
       "resolved": "https://registry.npmjs.org/leva/-/leva-0.10.1.tgz",
       "integrity": "sha512-BcjnfUX8jpmwZUz2L7AfBtF9vn4ggTH33hmeufDULbP3YgNZ/C+ss/oO3stbrqRQyaOmRwy70y7BGTGO81S3rA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@radix-ui/react-portal": "^1.1.4",
         "@radix-ui/react-tooltip": "^1.1.8",
@@ -4986,22 +4882,6 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/nanostores": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/nanostores/-/nanostores-1.3.0.tgz",
-      "integrity": "sha512-XPUa/jz+P1oJvN9VBxw4L9MtdFfaH3DAryqPssqhb2kXjmb9npz0dly6rCsgFWOPr4Yg9mTfM3MDZgZZ+7A3lA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": "^20.0.0 || >=22.0.0"
-      }
-    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -5088,12 +4968,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/parse-srcset": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
-      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==",
-      "license": "MIT"
-    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -5383,29 +5257,6 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "license": "MIT"
     },
-    "node_modules/sanitize-html": {
-      "version": "2.17.3",
-      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.17.3.tgz",
-      "integrity": "sha512-Kn4srCAo2+wZyvCNKCSyB2g8RQ8IkX/gQs2uqoSRNu5t9I2qvUyAVvRDiFUVAiX3N3PNuwStY0eNr+ooBHVWEg==",
-      "license": "MIT",
-      "dependencies": {
-        "deepmerge": "^4.2.2",
-        "escape-string-regexp": "^4.0.0",
-        "htmlparser2": "^10.1.0",
-        "is-plain-object": "^5.0.0",
-        "parse-srcset": "^1.0.2",
-        "postcss": "^8.3.11"
-      }
-    },
-    "node_modules/sanitize-html/node_modules/is-plain-object": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
-      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
@@ -5615,15 +5466,6 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
-    "node_modules/tw-animate-css": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
-      "integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/Wombosvideo"
-      }
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",

web/package.json

@@ -13,7 +13,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@nous-research/ui": "^0.4.0",
+    "@nous-research/ui": "0.6.0",
     "@observablehq/plot": "^0.6.17",
     "@react-three/fiber": "^9.6.0",
     "@tailwindcss/vite": "^4.2.1",

web/src/components/OAuthProvidersCard.tsx

@@ -180,8 +180,8 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
                       className="inline-flex"
                       title={`Open ${p.name} docs`}
                     >
-                      <Button outlined className="!p-1.5 aspect-square">
+                      <Button ghost size="icon">
-                        <ExternalLink className="h-3.5 w-3.5" />
+                        <ExternalLink />
                       </Button>
                     </a>
                   )}

web/src/components/ui/confirm-dialog.tsx

@@ -110,9 +110,9 @@ export function ConfirmDialog({
           <Button
             data-confirm
             type="button"
+            destructive={destructive}
             onClick={onConfirm}
             disabled={loading}
-            className={destructive ? "!bg-destructive !text-destructive-foreground" : undefined}
           >
             {loading ? "…" : confirmLabel}
           </Button>

web/src/pages/ConfigPage.tsx

@@ -345,11 +345,11 @@ export default function ConfigPage() {
           </code>
         </div>
         <div className="flex items-center gap-1.5">
-          <Button outlined onClick={handleExport} title={t.config.exportConfig} aria-label={t.config.exportConfig} className="!p-2 aspect-square">
+          <Button ghost size="icon" onClick={handleExport} title={t.config.exportConfig} aria-label={t.config.exportConfig}>
-            <Download className="h-3.5 w-3.5" />
+            <Download />
           </Button>
-          <Button outlined onClick={() => fileInputRef.current?.click()} title={t.config.importConfig} aria-label={t.config.importConfig} className="!p-2 aspect-square">
+          <Button ghost size="icon" onClick={() => fileInputRef.current?.click()} title={t.config.importConfig} aria-label={t.config.importConfig}>
-            <Upload className="h-3.5 w-3.5" />
+            <Upload />
           </Button>
           <input ref={fileInputRef} type="file" accept=".json" className="hidden" onChange={handleImport} />
           {!yamlMode && (() => {
@@ -358,8 +358,8 @@ export default function ConfigPage() {
               : prettyCategoryName(activeCategory);
             const resetTitle = t.config.resetScopeTooltip.replace("{scope}", resetScopeLabel);
             return (
-              <Button outlined onClick={handleReset} title={resetTitle} aria-label={resetTitle} className="!p-2 aspect-square">
+              <Button ghost size="icon" onClick={handleReset} title={resetTitle} aria-label={resetTitle}>
-                <RotateCcw className="h-3.5 w-3.5" />
+                <RotateCcw />
               </Button>
             );
           })()}

web/src/pages/CronPage.tsx

@@ -304,39 +304,39 @@ export default function CronPage() {
 
               <div className="flex items-center gap-1 shrink-0">
                 <Button
-                  outlined
+                  ghost
+                  size="icon"
                   title={job.state === "paused" ? t.cron.resume : t.cron.pause}
                   aria-label={
                     job.state === "paused" ? t.cron.resume : t.cron.pause
                   }
                   onClick={() => handlePauseResume(job)}
-                  className="!p-2 aspect-square"
+                  className={
+                    job.state === "paused" ? "text-success" : "text-warning"
+                  }
                 >
-                  {job.state === "paused" ? (
+                  {job.state === "paused" ? <Play /> : <Pause />}
-                    <Play className="h-4 w-4 text-success" />
-                  ) : (
-                    <Pause className="h-4 w-4 text-warning" />
-                  )}
                 </Button>
 
                 <Button
-                  outlined
+                  ghost
+                  size="icon"
                   title={t.cron.triggerNow}
                   aria-label={t.cron.triggerNow}
                   onClick={() => handleTrigger(job)}
-                  className="!p-2 aspect-square"
                 >
-                  <Zap className="h-4 w-4" />
+                  <Zap />
                 </Button>
 
                 <Button
-                  outlined
+                  ghost
+                  destructive
+                  size="icon"
                   title={t.common.delete}
                   aria-label={t.common.delete}
                   onClick={() => jobDelete.requestDelete(job.id)}
-                  className="!p-2 aspect-square"
                 >
-                  <Trash2 className="h-4 w-4 text-destructive" />
+                  <Trash2 />
                 </Button>
               </div>
             </CardContent>

web/src/pages/EnvPage.tsx

@@ -204,13 +204,10 @@ function EnvVarRow({
           </div>
 
           {info.is_set && (
-            <Button outlined onClick={() => onReveal(varKey)}
+            <Button ghost size="icon" onClick={() => onReveal(varKey)}
               title={isRevealed ? t.env.hideValue : t.env.showValue}
-              aria-label={isRevealed ? `Hide ${varKey}` : `Reveal ${varKey}`}
+              aria-label={isRevealed ? `Hide ${varKey}` : `Reveal ${varKey}`}>
-              className="!p-2 aspect-square">
+              {isRevealed ? <EyeOff /> : <Eye />}
-              {isRevealed
-                ? <EyeOff className="h-4 w-4" />
-                : <Eye className="h-4 w-4" />}
             </Button>
           )}
 
@@ -220,8 +217,7 @@ function EnvVarRow({
           </Button>
 
           {info.is_set && (
-            <Button outlined prefix={<Trash2 />}
+            <Button outlined destructive prefix={<Trash2 />}
-              className="text-destructive hover:!text-destructive"
               onClick={() => onClear(varKey)} disabled={saving === varKey || clearDialogOpen}>
               {saving === varKey ? "..." : t.common.clear}
             </Button>

web/src/pages/SessionsPage.tsx

@@ -356,8 +356,9 @@ function SessionRow({
           </Badge>
           {resumeInChatEnabled && (
             <Button
-              outlined
+              ghost
-              className="!p-1.5 aspect-square text-muted-foreground hover:text-success"
+              size="icon"
+              className="text-muted-foreground hover:text-success"
               aria-label={t.sessions.resumeInChat}
               title={t.sessions.resumeInChat}
               onClick={(e) => {
@@ -365,19 +366,20 @@ function SessionRow({
                 navigate(`/chat?resume=${encodeURIComponent(session.id)}`);
               }}
             >
-              <Play className="h-3.5 w-3.5" />
+              <Play />
             </Button>
           )}
           <Button
-            outlined
+            ghost
-            className="!p-1.5 aspect-square text-muted-foreground hover:text-destructive"
+            destructive
+            size="icon"
             aria-label={t.sessions.deleteSession}
             onClick={(e) => {
               e.stopPropagation();
               onDelete();
             }}
           >
-            <Trash2 className="h-3.5 w-3.5" />
+            <Trash2 />
           </Button>
         </div>
       </div>
@@ -807,12 +809,12 @@ export default function SessionsPage() {
               <div className="flex items-center gap-1">
                 <Button
                   outlined
-                  className="!p-1.5 aspect-square"
+                  size="icon"
                   disabled={page === 0}
                   onClick={() => setPage((p) => p - 1)}
                   aria-label={t.sessions.previousPage}
                 >
-                  <ChevronLeft className="h-4 w-4" />
+                  <ChevronLeft />
                 </Button>
                 <span className="text-xs text-muted-foreground px-2">
                   {t.common.page} {page + 1} {t.common.of}{" "}
@@ -820,12 +822,12 @@ export default function SessionsPage() {
                 </span>
                 <Button
                   outlined
-                  className="!p-1.5 aspect-square"
+                  size="icon"
                   disabled={(page + 1) * PAGE_SIZE >= total}
                   onClick={() => setPage((p) => p + 1)}
                   aria-label={t.sessions.nextPage}
                 >
-                  <ChevronRight className="h-4 w-4" />
+                  <ChevronRight />
                 </Button>
               </div>
             </div>

web/vite.config.ts

@@ -70,6 +70,24 @@ export default defineConfig({
     alias: {
       "@": path.resolve(__dirname, "./src"),
     },
+    // When @nous-research/ui is symlinked via `file:../../design-language`,
+    // Node's module resolution would pick up shared deps from
+    // design-language/node_modules/*, giving us two copies + breaking
+    // hooks (useRef-of-null), webgl contexts, etc. Force everything that
+    // exists in BOTH places to use the dashboard's copy.
+    //
+    // Don't list packages here that only exist in the DS (nanostores,
+    // @nanostores/react) — Vite dedupe errors out when it can't find
+    // them at the project root.
+    dedupe: [
+      "react",
+      "react-dom",
+      "@react-three/fiber",
+      "@observablehq/plot",
+      "three",
+      "leva",
+      "gsap",
+    ],
   },
   build: {
     outDir: "../hermes_cli/web_dist",