From 3e2757e05de5779858b66f2c39af9101a994f589 Mon Sep 17 00:00:00 2001
From: DYD <m15163197002@163.com>
Date: Wed, 17 Jun 2026 02:01:46 +0800
Subject: [PATCH] fix: stabilize graph interactions and polish UI states

---
 .../SKILLWIKI_UI_CHANGE_SUMMARY_20260617.md   |  45 ++
 skillwiki-frontend/package-lock.json          | 601 +++++++++++++++++-
 skillwiki-frontend/src/index.css              | 104 +++
 .../src/pages/EvaluationDashboard.tsx         |   7 +-
 skillwiki-frontend/src/pages/Evolution.tsx    |  22 +-
 .../src/pages/HarnessVerification.tsx         |   3 +-
 skillwiki-frontend/src/pages/SkillGraph.tsx   | 494 +++++++++++---
 skillwiki-frontend/src/pages/SkillWiki.tsx    |   3 +-
 .../src/pages/VersionControl.tsx              |   4 +
 9 files changed, 1166 insertions(+), 117 deletions(-)
 create mode 100644 skillwiki-frontend/SKILLWIKI_UI_CHANGE_SUMMARY_20260617.md

diff --git a/skillwiki-frontend/SKILLWIKI_UI_CHANGE_SUMMARY_20260617.md b/skillwiki-frontend/SKILLWIKI_UI_CHANGE_SUMMARY_20260617.md
new file mode 100644
index 0000000..a9d3971
--- /dev/null
+++ b/skillwiki-frontend/SKILLWIKI_UI_CHANGE_SUMMARY_20260617.md
@@ -0,0 +1,45 @@
+# SkillWiki 前端 UI 更改说明（2026-06-17）
+
+## 更改范围
+
+本次更改集中在 SkillWiki 前端 UI 和交互表现，未修改后端 API、数据结构、核心资产或已有按钮功能。
+
+1. 图谱点击稳定性
+   - 点击节点或边时，不再重新销毁、重建并重新适配整张图。
+   - 右侧详情面板和边详情展示仍保持原有行为，只更新选中态的视觉表现。
+
+2. 图谱节点 hover 回弹
+   - 节点鼠标悬停时保持收缩反馈。
+   - 鼠标移开后根据节点原始渲染尺寸恢复，并加入短促的弹动回弹效果。
+
+3. 宽表格与可复制标识显示
+   - 为宽表格补充统一的横向滚动和白色背景包裹，避免右侧按钮或内容突出到页面背景之外。
+   - 对 proposal id、skill id、task id、loop id 等标识类文本增加不拆词显示，减少视觉断点。
+
+4. 轻量 UI 美化
+   - 增加按钮、表格、标签、分段控件等 Ant Design 组件的轻微交互过渡、焦点样式和数字等宽显示。
+   - 保持现有配色、按键位置和页面结构，不做大幅重设计。
+
+5. SkillWiki 命名一致性
+   - 同步前端 lockfile 中仍残留的旧 `skillos-frontend` 包名，避免和当前 SkillWiki 命名冲突。
+
+## 更改目的
+
+- 降低图谱反复点击时的整体跳动感，让用户可以稳定查看节点和边信息。
+- 修复节点 hover 后不能自然弹回的问题，让图谱交互反馈更明确。
+- 补齐宽表格、长标识和右侧操作按钮的展示边界，避免 UI 溢出或文本被怪异换行。
+- 在不改变功能逻辑的前提下，让前端界面更稳、更整齐。
+
+## 边界说明
+
+- 不新增、删除或改动现有功能入口。
+- 不改变按钮点击逻辑、API 请求逻辑或后端行为。
+- 不修改核心数据资产、技能内容或评测材料。
+- 不引入新的产品命名；前端相关命名统一使用 SkillWiki。
+
+## 验证项
+
+- `npm run lint`
+- `npm run build`
+- `git diff --check`
+- 本地页面重点检查：`/graph`、`/evolution`
diff --git a/skillwiki-frontend/package-lock.json b/skillwiki-frontend/package-lock.json
index 5e81996..edf4829 100644
--- a/skillwiki-frontend/package-lock.json
+++ b/skillwiki-frontend/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "skillos-frontend",
+  "name": "skillwiki-frontend",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "skillos-frontend",
+      "name": "skillwiki-frontend",
       "version": "0.0.0",
       "dependencies": {
         "@ant-design/charts": "^2.6.7",
@@ -31,6 +31,7 @@
         "eslint-plugin-react-refresh": "^0.5.2",
         "globals": "^17.5.0",
         "puppeteer": "^25.1.0",
+        "sharp": "^0.35.1",
         "typescript": "~6.0.2",
         "typescript-eslint": "^8.58.2",
         "vite": "^8.0.10"
@@ -1070,6 +1071,544 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@img/colour": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
+      "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.35.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.35.1.tgz",
+      "integrity": "sha512-T15JRWOubQ3f5+GxnWeIvo47u5qV0M9HBgJhT+f2gE1e9e6OhR6K73Re52Hm80qWcu1DNb3GweKmpr/MnuP2Ow==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.3.0"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.35.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.35.1.tgz",
+      "integrity": "sha512-t1CPD0cr7XCHjwUj6tQ5MC0pCi866I+gUW6zbUX4aFPnKd1DFBtk0M+gWcjX8VeEzgfCNiSiNTVFZ6b7kvdbnQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.3.0"
+      }
+    },
+    "node_modules/@img/sharp-freebsd-wasm32": {
+      "version": "0.35.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-freebsd-wasm32/-/sharp-freebsd-wasm32-0.35.1.tgz",
+      "integrity": "sha512-MBSQXqNPThW9EcZ905H6N4sEdX5EwZEYzGx5EBq9ncDCGJALMiY1xPFJxNdzuB1iBjLOpIfxajM6YxdvwmQSLA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "dependencies": {
+        "@img/sharp-wasm32": "0.35.1"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.3.0.tgz",
+      "integrity": "sha512-EKbmBKtyTH+GPFDRw2TgK2oV6hyxxlJVIar4hoTYSNmIwipgMFdxPQqR392GmfdsPGWga0mCFN1cCKjRb9cljw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.3.0.tgz",
+      "integrity": "sha512-Pl2OmOvrJ42adUllESxBsG54PfXLo1OYg9i3c5/5Ln/qJ0gZuTM9YMhQJPIbXqwidLRc/c2zuHt4RsrymmNv7A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.3.0.tgz",
+      "integrity": "sha512-A8UpHoUDW4DwnXoV6+q3C1s7QLRAHtPDEjWuNZjwHMyoCNZnm0GeNN8ls9f/bsEYTRQRW96C/n34XJQHJ2fT7A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.3.0.tgz",
+      "integrity": "sha512-C0SqjoFKnszqa44EQ7xoaT48nnO0lOyXEULfXMWi8krrjOPGYkeK30Okzla6ATbBYsyZ0ySinK0FVkpv3DwzfQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.3.0.tgz",
+      "integrity": "sha512-WOpkVxAjFd369iaIzEgNRreFD+gWdUMIGD5zplhNKNeqS6mm5dac3q2AFyCBmzYoAdouzZvRBgxy4z8QHZb4/A==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.3.0.tgz",
+      "integrity": "sha512-DRWw0mOHusrCCuw2rqP87oLg6PGlkomVDFqw2hIwsSfwWpu4k3XLcBPaKKl6ct/GtL/cwNkgwjV/tc0Mqht3VA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.3.0.tgz",
+      "integrity": "sha512-9APy+nFWhHS+kzLgWZfLcyrUd7YqnAQVa4BPOo4xkoHpdoktOAPG4cEr9+Jpl0TtqfVmcMJimNL5qNTyyOHZNA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.3.0.tgz",
+      "integrity": "sha512-y9RNUYDe2A1UAdhLyfeOodGRszQdaEoe4nfOpp/sNVPl2CWIcUyFaDoCh4vPLPxu19803j2naLqZup2WxDXCLA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.3.0.tgz",
+      "integrity": "sha512-cC1wkC0Mlucd0KSiGrLkJnB/ZqPvZCntc/Lk7ZnYO5ZSbF2euNek4Xvxafojq+wN1q/W0eprdpUIjUr/EV2PBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.3.0.tgz",
+      "integrity": "sha512-LiYMhUZicB1QG//+RvmYZpXJO8fYRENfp+MZUCnG9aw+AKvGAy9gPaCnuwsPcBFs8EV66M0NNxj9VHcNklE8zw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.35.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.35.1.tgz",
+      "integrity": "sha512-jygmR02PpCYypt7xB7nst1vqjZp/BpRA/Kf9nK7qRponJ/KrLPaZWEG4G15z1d2FZ6XqI+T0350ha3RSnKx24A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.3.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.35.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.35.1.tgz",
+      "integrity": "sha512-ErCRyGU7LeoaFBZ0xW8hhLlXzhAg80sc4vxePB86qvtEvW1jEhhmbiNBP4oEzZfPMnu6HwHXfzD2W2kBU+RnCw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.3.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.35.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.35.1.tgz",
+      "integrity": "sha512-LUWZ2+r2UoLCd8j0RLCwQ4gL6w47+Y7igxtVnPIDXOOEjV86LpBkAHq5VpJeg+GHbw0KN/JWlPJOdZjyZnFqFQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.3.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.35.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.35.1.tgz",
+      "integrity": "sha512-i7x6J3mwF4JgT0sM4V4WlAWdJ0bucPtA9rzO1bTji1n5qgBq/W5nn87RvOQPleuuxahNoLdTngByD8/vDDLArw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.3.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.35.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.35.1.tgz",
+      "integrity": "sha512-0zSaTUjTF0kIWTSYxD4EG/nvCU4jez53+3RdURtoY3HvbXtIQ98W90JnrGz/oLRFuEnfIy9+7xeq883euc0ZWw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.3.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.35.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.35.1.tgz",
+      "integrity": "sha512-NbJD4mWdeyrNQKluO/tR/wBDOelcowSVGNBWxI0e3ZtlXc6F/UOVKDj1MLD4zl3oHTuvKW3s+MA9N54YTldAYw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.3.0"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.35.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.35.1.tgz",
+      "integrity": "sha512-VoW2sQCWI+0YIKQEmWJ8vzaQjTg9wIyfkFpvEfAS2h43X6iHu7GTk1hhOgB4IpSzCHe8UwQZIcx7b81VTaOrJA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.3.0"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.35.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.35.1.tgz",
+      "integrity": "sha512-LjBoSd/c5JU0/K5MwzDMlgsSRP2bPn98JQGFFQAOLQ0bU/1z4ekxUdSKY9BmlwSh/cA+OrvpgsWqfZyYfVHBRw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.3.0"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.35.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.35.1.tgz",
+      "integrity": "sha512-PCQUoQdZyE8tp3HpbevuihfUmgSP4qWI0FGEPWoeXqaS+cUrFfemabHQiebUmUmlUhCuNnQMxGrQ+CPqK4hnxg==",
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.11.0"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-wasm32/node_modules/@emnapi/runtime": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.1.tgz",
+      "integrity": "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@img/sharp-webcontainers-wasm32": {
+      "version": "0.35.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-webcontainers-wasm32/-/sharp-webcontainers-wasm32-0.35.1.tgz",
+      "integrity": "sha512-xU2ml2bU2OPxYVvW2A6ae4M1g5QKyhKG06P4FAt+YEaFQQO0919Qx+XxIZEUuWTMoDViLpMws2/dQwoe/VcA6A==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "@img/sharp-wasm32": "0.35.1"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.35.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.35.1.tgz",
+      "integrity": "sha512-IkmHwuFhYpd3bTsN5SAahjwhiAcyXPooBt8vEUgxY3T0IP70sSJ0nU1xiPzZY8AH/OB1XpV3j8aZSVSOSfTbdA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.35.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.35.1.tgz",
+      "integrity": "sha512-wQahqCi9MD8Yxzg4gVM4fNrZxh+r6vD55PyIg+WJPaM5ZRUyF35iQpwJCuma3r6viU9/8Pxlc+XHV+woVa6nCQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.35.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.35.1.tgz",
+      "integrity": "sha512-WzBtkYtZHATLPe8XRharxZXxQ9cdLrQWHiwxt+BJ5rBsisQrKeeV86ErxPSVhcG6xCEuNhs0SqLpWr7XDa2k6w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -5122,6 +5661,64 @@
       "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
       "license": "MIT"
     },
+    "node_modules/sharp": {
+      "version": "0.35.1",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.35.1.tgz",
+      "integrity": "sha512-lW979AMi+ESidzMv/Lnv+F9bknzLyxLqFI05Sm433vOeRcltgxQmXpnfOOFIAlKtwXU/ksupm2srQoFCkR214g==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@img/colour": "^1.1.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.8.4"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.35.1",
+        "@img/sharp-darwin-x64": "0.35.1",
+        "@img/sharp-freebsd-wasm32": "0.35.1",
+        "@img/sharp-libvips-darwin-arm64": "1.3.0",
+        "@img/sharp-libvips-darwin-x64": "1.3.0",
+        "@img/sharp-libvips-linux-arm": "1.3.0",
+        "@img/sharp-libvips-linux-arm64": "1.3.0",
+        "@img/sharp-libvips-linux-ppc64": "1.3.0",
+        "@img/sharp-libvips-linux-riscv64": "1.3.0",
+        "@img/sharp-libvips-linux-s390x": "1.3.0",
+        "@img/sharp-libvips-linux-x64": "1.3.0",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.3.0",
+        "@img/sharp-libvips-linuxmusl-x64": "1.3.0",
+        "@img/sharp-linux-arm": "0.35.1",
+        "@img/sharp-linux-arm64": "0.35.1",
+        "@img/sharp-linux-ppc64": "0.35.1",
+        "@img/sharp-linux-riscv64": "0.35.1",
+        "@img/sharp-linux-s390x": "0.35.1",
+        "@img/sharp-linux-x64": "0.35.1",
+        "@img/sharp-linuxmusl-arm64": "0.35.1",
+        "@img/sharp-linuxmusl-x64": "0.35.1",
+        "@img/sharp-webcontainers-wasm32": "0.35.1",
+        "@img/sharp-win32-arm64": "0.35.1",
+        "@img/sharp-win32-ia32": "0.35.1",
+        "@img/sharp-win32-x64": "0.35.1"
+      }
+    },
+    "node_modules/sharp/node_modules/semver": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.4.tgz",
+      "integrity": "sha512-rUCObTnP32Q08R2uuIrt7r9PlEonuTmtuXYcW6s5kjdlj3xbnwe+21yXptAUYcMAABLkYYTtnmzb3w3EDZfueA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
diff --git a/skillwiki-frontend/src/index.css b/skillwiki-frontend/src/index.css
index dc4bcbb..406f6f2 100644
--- a/skillwiki-frontend/src/index.css
+++ b/skillwiki-frontend/src/index.css
@@ -6,6 +6,8 @@ body {
   margin: 0;
   font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', -apple-system, sans-serif;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-variant-numeric: tabular-nums;
 }
 
 #root {
@@ -34,6 +36,108 @@ body {
   border-top: 1px solid rgba(0, 0, 0, 0.06);
 }
 
+.ant-btn,
+.ant-tag,
+.ant-segmented,
+.ant-select-selector,
+.ant-input,
+.ant-input-number,
+.ant-upload,
+.ant-table-wrapper .ant-table {
+  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease, transform 160ms ease;
+}
+
+.ant-btn:not(:disabled):active {
+  transform: translateY(1px) scale(0.99);
+}
+
+.ant-segmented {
+  padding: 3px;
+  background: rgba(15, 23, 42, 0.05);
+}
+
+.ant-tag {
+  border-radius: 6px;
+  font-weight: 500;
+}
+
+.ant-table-wrapper .ant-table {
+  border: 1px solid rgba(15, 23, 42, 0.06);
+}
+
+.skillwiki-table-contained {
+  max-width: 100%;
+  overflow: hidden;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.skillwiki-table-contained .ant-table {
+  background: #fff;
+}
+
+.skillwiki-table-contained .ant-table-container,
+.skillwiki-table-contained .ant-table-content {
+  max-width: 100%;
+  background: #fff;
+}
+
+.skillwiki-table-contained .ant-table-content {
+  overflow-x: auto !important;
+}
+
+.skillwiki-table-contained .ant-table-cell {
+  overflow-wrap: anywhere;
+}
+
+.skillwiki-table-contained .skillwiki-identifier-cell,
+.skillwiki-table-contained .skillwiki-proposal-id-cell {
+  min-width: max-content;
+}
+
+.skillwiki-table-contained .skillwiki-identifier-cell.ant-typography,
+.skillwiki-table-contained .skillwiki-identifier-cell .ant-typography,
+.skillwiki-table-contained .skillwiki-identifier-cell code,
+.skillwiki-table-contained .skillwiki-proposal-id-cell .ant-typography,
+.skillwiki-table-contained .skillwiki-proposal-id-cell code {
+  white-space: nowrap;
+  overflow-wrap: normal;
+  word-break: keep-all;
+}
+
+.skillwiki-table-contained .skillwiki-proposal-id-cell .ant-typography-copy {
+  flex: 0 0 auto;
+}
+
+.skillwiki-table-contained .skillwiki-table-actions {
+  max-width: 100%;
+}
+
+.skillwiki-table-contained .skillwiki-table-actions .ant-btn {
+  min-width: 0;
+}
+
+.ant-table-wrapper .ant-table-thead > tr > th {
+  background: rgba(100, 116, 139, 0.08);
+  font-weight: 650;
+}
+
+:where(.ant-btn, .ant-select-selector, .ant-input, .ant-input-affix-wrapper, .ant-input-number, .ant-segmented, .ant-upload):focus-visible {
+  outline: 3px solid rgba(22, 119, 255, 0.22);
+  outline-offset: 2px;
+}
+
 pre {
   margin: 0;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/skillwiki-frontend/src/pages/EvaluationDashboard.tsx b/skillwiki-frontend/src/pages/EvaluationDashboard.tsx
index 44b1680..3cbf2ad 100644
--- a/skillwiki-frontend/src/pages/EvaluationDashboard.tsx
+++ b/skillwiki-frontend/src/pages/EvaluationDashboard.tsx
@@ -137,7 +137,7 @@ function DemoBenchmarkPanel({ artifact }: { artifact: EvaluationDemoBenchmark })
       dataIndex: 'task_id',
       key: 'task_id',
       width: 260,
-      render: value => <Text code>{value}</Text>,
+      render: value => <Text code className="skillwiki-identifier-cell">{value}</Text>,
     },
     {
       title: 'Category',
@@ -220,6 +220,7 @@ function DemoBenchmarkPanel({ artifact }: { artifact: EvaluationDemoBenchmark })
             rowKey="task_id"
             size="small"
             pagination={{ pageSize: 8 }}
+            className="skillwiki-table-contained"
             scroll={{ x: 980 }}
             expandable={{
               expandedRowRender: row => (
@@ -299,6 +300,7 @@ function SearchEvalPanel({ artifact }: { artifact: EvaluationSearchEval }) {
         rowKey={row => row.query_id || row.query || 'query-row'}
         size="small"
         pagination={{ pageSize: 6 }}
+        className="skillwiki-table-contained"
         scroll={{ x: 980 }}
       />
     </Card>
@@ -307,7 +309,7 @@ function SearchEvalPanel({ artifact }: { artifact: EvaluationSearchEval }) {
 
 function LlmPlannerPanel({ artifact }: { artifact: EvaluationDashboardResponse['artifacts']['llm_planner'] }) {
   const columns: ColumnsType<EvaluationLlmRow> = [
-    { title: 'Task', dataIndex: 'task_id', key: 'task_id', width: 240, render: value => <Text code>{value}</Text> },
+    { title: 'Task', dataIndex: 'task_id', key: 'task_id', width: 240, render: value => <Text code className="skillwiki-identifier-cell">{value}</Text> },
     { title: 'Fallback', dataIndex: 'fallback_status', key: 'fallback_status', width: 140, render: statusTag },
     { title: 'LLM', dataIndex: 'llm_status', key: 'llm_status', width: 120, render: statusTag },
     { title: 'API State', dataIndex: 'llm_api_error_type', key: 'llm_api_error_type', width: 140, render: value => value || 'N/A' },
@@ -348,6 +350,7 @@ function LlmPlannerPanel({ artifact }: { artifact: EvaluationDashboardResponse['
         rowKey={row => row.task_id || 'planner-row'}
         size="small"
         pagination={{ pageSize: 6 }}
+        className="skillwiki-table-contained"
         scroll={{ x: 920 }}
       />
     </Card>
diff --git a/skillwiki-frontend/src/pages/Evolution.tsx b/skillwiki-frontend/src/pages/Evolution.tsx
index 42adccc..77bf6d9 100644
--- a/skillwiki-frontend/src/pages/Evolution.tsx
+++ b/skillwiki-frontend/src/pages/Evolution.tsx
@@ -221,7 +221,8 @@ export default function Evolution() {
     {
       title: 'Skill',
       dataIndex: 'skill_name',
-      render: (name: string) => <Text strong>{name}</Text>,
+      width: 220,
+      render: (name: string) => <Text strong className="skillwiki-identifier-cell">{name}</Text>,
     },
     {
       title: 'Status',
@@ -309,9 +310,9 @@ export default function Evolution() {
     {
       title: 'Proposal',
       dataIndex: 'proposal_id',
-      width: 180,
+      width: 260,
       render: (id: string, record) => (
-        <Space direction="vertical" size={2}>
+        <Space direction="vertical" size={2} className="skillwiki-proposal-id-cell">
           <Text code copyable style={{ fontSize: 11 }}>{id.slice(0, 8)}</Text>
           <Text type="secondary" style={{ fontSize: 12 }}>{record.skill_id}</Text>
         </Space>
@@ -336,6 +337,7 @@ export default function Evolution() {
     {
       title: 'Evidence',
       dataIndex: 'evidence',
+      width: 360,
       render: (_: string[], record) => (
         <Space direction="vertical" size={4}>
           <Text>{record.root_cause || joinPreview(record.evidence)}</Text>
@@ -349,13 +351,13 @@ export default function Evolution() {
     {
       title: 'Governance',
       dataIndex: 'next_action',
-      width: 220,
+      width: 260,
       render: (_, record) => (
         <Space direction="vertical" size={6}>
           {record.status === 'accepted' || record.next_action ? (
             <>
               <Tag color="purple">B review required</Tag>
-              <Text type="secondary" style={{ fontSize: 12 }}>
+              <Text type="secondary" style={{ fontSize: 12, overflowWrap: 'anywhere' }}>
                 {record.next_action?.endpoint || `/api/v1/lifecycle/${record.skill_id}/propose-maintenance-change`}
               </Text>
             </>
@@ -367,9 +369,9 @@ export default function Evolution() {
     },
     {
       title: 'Actions',
-      width: 220,
+      width: 180,
       render: (_, record) => (
-        <Space wrap>
+        <Space wrap className="skillwiki-table-actions">
           {record.status === 'pending' ? (
             <>
               <Button
@@ -529,6 +531,8 @@ export default function Evolution() {
                 loading={queueLoading}
                 pagination={{ pageSize: 5 }}
                 columns={proposalColumns}
+                className="skillwiki-table-contained"
+                scroll={{ x: 1210 }}
               />
             ) : (
               <Empty description="No maintenance proposals in the current service lifecycle" />
@@ -547,6 +551,8 @@ export default function Evolution() {
                 size="small"
                 pagination={false}
                 columns={attentionColumns}
+                className="skillwiki-table-contained"
+                scroll={{ x: 1180 }}
               />
             ) : (
               <Empty description="No degraded or critical Skills right now." />
@@ -565,6 +571,8 @@ export default function Evolution() {
                 size="small"
                 pagination={{ pageSize: 10 }}
                 columns={columns}
+                className="skillwiki-table-contained"
+                scroll={{ x: 980 }}
               />
             ) : (
               <Empty description="No health report data yet. Release or execute more Skills to generate health assessments." />
diff --git a/skillwiki-frontend/src/pages/HarnessVerification.tsx b/skillwiki-frontend/src/pages/HarnessVerification.tsx
index 17bfabc..a036f45 100644
--- a/skillwiki-frontend/src/pages/HarnessVerification.tsx
+++ b/skillwiki-frontend/src/pages/HarnessVerification.tsx
@@ -286,7 +286,7 @@ export default function HarnessVerification() {
       title: 'Loop',
       dataIndex: 'loop_id',
       width: 190,
-      render: value => <Text code>{String(value)}</Text>,
+      render: value => <Text code className="skillwiki-identifier-cell">{String(value)}</Text>,
     },
     {
       title: 'Status',
@@ -556,6 +556,7 @@ export default function HarnessVerification() {
                 rowKey="loop_id"
                 size="small"
                 pagination={{ pageSize: 6 }}
+                className="skillwiki-table-contained"
                 scroll={{ x: 900 }}
                 locale={{ emptyText: 'No saved harness evidence yet' }}
               />
diff --git a/skillwiki-frontend/src/pages/SkillGraph.tsx b/skillwiki-frontend/src/pages/SkillGraph.tsx
index ddc4f16..70b6ad9 100644
--- a/skillwiki-frontend/src/pages/SkillGraph.tsx
+++ b/skillwiki-frontend/src/pages/SkillGraph.tsx
@@ -158,10 +158,12 @@ type GraphInstance = {
   destroy: () => void
   draw: () => void | Promise<void>
   fitView: (options?: unknown, animation?: unknown) => void | Promise<void>
+  getElementRenderStyle: (id: string) => Record<string, unknown>
+  getNodeData: (id: string) => { style?: Record<string, unknown> }
   getZoom: () => number
   on: (eventName: string, handler: (event: GraphEvent) => void) => void
   render: () => void | Promise<void>
-  updateEdgeData: (edges: Array<{ id: string; style: { badgeText: string } }>) => void
+  updateEdgeData: (edges: Array<{ id: string; style: Record<string, unknown> }>) => void
   updateNodeData: (nodes: Array<{ id: string; style: Record<string, unknown> }>) => void
   zoomBy: (ratio: number, animation?: unknown) => void | Promise<void>
 }
@@ -174,6 +176,10 @@ type ForceEdgeDatum = {
 const GRAPH_LAYOUT_STORAGE_KEY = 'skillwiki.graph.layoutSettings.v2'
 const EDGE_LABEL_ZOOM_THRESHOLD = 0.9
 const NEBULA_ZOOM_THRESHOLD = 0.65
+const NODE_HOVER_SHRINK_RATIO = 0.68
+const NODE_HOVER_BOUNCE_RATIO = 1.16
+const NODE_HOVER_RETURN_MS = 260
+const NODE_HOVER_STRETCH_PHASE = 0.58
 
 const DEFAULT_GRAPH_LAYOUT: GraphLayoutSettings = {
   repulsion: 260,
@@ -385,11 +391,138 @@ function nodeVisualSize(node: GraphViewNodeData, settings: GraphLayoutSettings,
   return base
 }
 
+function nebulaVisualSize(node: GraphViewNodeData, selected: boolean, centered: boolean) {
+  const usageBoost = Math.floor(Number(node.usage_count || 0) * 0.025)
+  const base = 5 + usageBoost
+  return selected || centered ? base + 4 : base
+}
+
+function graphNodeRestSize(
+  node: GraphViewNodeData,
+  settings: GraphLayoutSettings,
+  selected: boolean,
+  centered: boolean,
+  nebulaMode: boolean,
+) {
+  return nebulaMode ? nebulaVisualSize(node, selected, centered) : nodeVisualSize(node, settings, selected, centered)
+}
+
+function graphNodeHoverSize(restSize: number) {
+  return Math.max(3.5, restSize * NODE_HOVER_SHRINK_RATIO)
+}
+
+function easeOutCubic(value: number) {
+  return 1 - Math.pow(1 - value, 3)
+}
+
+function interpolateNumber(from: number, to: number, progress: number) {
+  return from + (to - from) * progress
+}
+
+function prefersReducedMotion() {
+  return typeof window !== 'undefined'
+    && typeof window.matchMedia === 'function'
+    && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}
+
 function nodeLabelFontSize(settings: GraphLayoutSettings, selected: boolean, centered: boolean) {
   if (selected || centered) return 10
   return settings.denseMode ? 7 : 8
 }
 
+function graphNodeVisualStyle(
+  node: GraphViewNodeData,
+  settings: GraphLayoutSettings,
+  selectedNodeId: string | null,
+  centerSkillId: string | null,
+  nebulaMode: boolean,
+): Record<string, unknown> {
+  const color = nodeColor(node)
+  const selected = node.id === selectedNodeId
+  const centered = node.id === centerSkillId
+  const { sizeScale, opacityScale } = nebulaMode ? depthScale(0) : { sizeScale: 1, opacityScale: 1 }
+  const restSize = graphNodeRestSize(node, settings, selected, centered, nebulaMode) * sizeScale
+
+  return {
+    fill: nebulaMode ? sphereGradient(color) : color,
+    fillOpacity: nebulaMode
+      ? (0.95 * opacityScale)
+      : (node.kind === 'skill' ? (STATE_OPACITY[String(node.state || '')] || 0.65) : 0.92),
+    stroke: nebulaMode
+      ? (selected ? color : blendColor(color, 'white', 0.4))
+      : (selected || centered ? '#111827' : color),
+    strokeOpacity: nebulaMode ? (selected ? 1 : 0.5 * opacityScale) : 1,
+    lineWidth: nebulaMode
+      ? (selected ? 1.2 : 0.6)
+      : (selected || centered ? 2.4 : Math.max(0.7, settings.edgeWidth * 0.8)),
+    size: restSize,
+    shadowColor: nebulaMode ? (selected ? color : 'transparent') : 'transparent',
+    shadowBlur: nebulaMode ? (selected ? 10 : 0) : 0,
+    labelText: nebulaMode ? '' : (shouldShowNodeLabel(settings.labelMode, {
+      selected,
+      centered,
+      denseMode: settings.denseMode,
+    }) ? node.name : ''),
+    labelFill: '#111827',
+    labelFontSize: nodeLabelFontSize(settings, selected, centered),
+    labelFontWeight: selected || centered ? 700 : 600,
+    labelMaxWidth: '260%',
+    labelPlacement: 'bottom' as const,
+    labelOffsetY: settings.denseMode ? 4 : 5,
+    labelStroke: '#fff',
+    labelLineWidth: settings.denseMode ? 2 : 3,
+    labelWordWrap: true,
+    cursor: 'pointer',
+  }
+}
+
+function graphEdgeVisualStyle(
+  edge: GraphViewEdgeData,
+  settings: GraphLayoutSettings,
+  selectedEdgeId: string | null,
+  nebulaMode: boolean,
+  showBadge: boolean,
+): Record<string, unknown> {
+  const selected = edge.id === selectedEdgeId
+  const color = EDGE_COLOR[edge.edge_type] || '#8c8c8c'
+  const edgeOpacityByDepth = nebulaMode ? 0.35 : settings.edgeOpacity
+  const edgeWidthByDepth = nebulaMode ? 0.9 : undefined
+  const label = formatEdgeLabel(edge)
+
+  return {
+    stroke: color,
+    strokeOpacity: nebulaMode
+      ? (selected ? 0.9 : edgeOpacityByDepth)
+      : (selected ? 1 : settings.edgeOpacity),
+    lineWidth: nebulaMode
+      ? (selected ? 1.2 : (edgeWidthByDepth ?? 0.5))
+      : (selected
+        ? Math.max(2.4, settings.edgeWidth + Number(edge.weight || 0) * 1.8)
+        : Math.max(0.4, settings.edgeWidth + Number(edge.weight || 0) * 0.7)),
+    endArrow: !nebulaMode,
+    labelText: nebulaMode ? '' : label,
+    labelFontSize: 9,
+    labelFill: color,
+    label: false,
+    labelStroke: '#fff',
+    labelLineWidth: 3,
+    labelPlacement: 'center' as const,
+    labelOffsetX: 0,
+    labelOffsetY: -18,
+    badgeText: nebulaMode || !showBadge ? '' : label,
+    badgeFontSize: 9,
+    badgeFill: color,
+    badgeBackgroundFill: '#fff',
+    badgeBackgroundOpacity: nebulaMode ? 0 : 0.9,
+    badgeBackgroundRadius: 4,
+    badgePadding: [1, 4, 1, 4],
+    badgePlacement: 'suffix' as const,
+    badgeOffsetX: 0,
+    badgeOffsetY: -18,
+    cursor: 'pointer',
+  }
+}
+
 function formatMetadataValue(value: unknown) {
   if (value === null || value === undefined || value === '') return 'N/A'
   if (typeof value === 'boolean') return value ? 'true' : 'false'
@@ -525,6 +658,11 @@ export default function SkillGraph() {
   const containerRef = useRef<HTMLDivElement>(null)
   const graphRef = useRef<GraphInstance | null>(null)
   const openedFromQuery = useRef<string | null>(null)
+  const selectedNodeIdRef = useRef<string | null>(null)
+  const selectedEdgeIdRef = useRef<string | null>(null)
+  const centerSkillIdRef = useRef<string | null>(null)
+  const nebulaModeRef = useRef(true)
+  const syncGraphVisualStateRef = useRef<(() => void) | null>(null)
 
   const [viewMode, setViewMode] = useState<GraphViewMode>('skill_only')
   const [mode, setMode] = useState<GraphMode>('full')
@@ -644,9 +782,10 @@ export default function SkillGraph() {
   useEffect(() => {
     if (!graphData?.nodes.length) return
     const preselectId = new URLSearchParams(location.search).get('preselect')
-    if (preselectId && graphData.nodes.some(n => n.id === preselectId)) {
-      setSelectedNodeId(preselectId)
-    }
+    if (!preselectId || !graphData.nodes.some(n => n.id === preselectId)) return
+
+    const timeoutId = window.setTimeout(() => setSelectedNodeId(preselectId), 0)
+    return () => window.clearTimeout(timeoutId)
   }, [graphData, location.search])
 
   useEffect(() => {
@@ -679,10 +818,20 @@ export default function SkillGraph() {
     return () => observer.disconnect()
   }, [graphData?.nodes.length])
 
+  useEffect(() => {
+    selectedNodeIdRef.current = selectedNodeId
+    selectedEdgeIdRef.current = selectedEdgeId
+    centerSkillIdRef.current = centerSkillId
+    nebulaModeRef.current = nebulaMode
+    syncGraphVisualStateRef.current?.()
+  }, [centerSkillId, nebulaMode, selectedEdgeId, selectedNodeId])
+
   useEffect(() => {
     if (!graphData || !containerRef.current || graphData.nodes.length === 0) return
 
     let disposed = false
+    const hoverAnimationFrames = new Map<string, number>()
+    const hoverRestSizes = new Map<string, number>()
 
     import('@antv/g6').then((G6) => {
       if (disposed || !containerRef.current) return
@@ -713,16 +862,7 @@ export default function SkillGraph() {
       )
 
       const nodes = graphData.nodes.map(node => {
-        const color = nodeColor(node)
-        const selected = node.id === selectedNodeId
-        const centered = node.id === centerSkillId
         const position = initialPositions.get(node.id)
-        const { sizeScale, opacityScale } = nebulaMode ? depthScale(0) : { sizeScale: 1, opacityScale: 1 }
-        const nebulaSize = (5 + Math.floor(Number(node.usage_count || 0) * 0.025)) * sizeScale
-        const nebulaFill = nebulaMode ? sphereGradient(color) : color
-        // Highlight ring for selected nebula nodes
-        const nebulaShadowColor = selected ? color : 'transparent'
-        const nebulaShadowBlur = selected ? 10 : 0
         return {
           id: node.id,
           data: {
@@ -733,83 +873,24 @@ export default function SkillGraph() {
           style: {
             x: position?.x,
             y: position?.y,
-            fill: nebulaFill,
-            fillOpacity: nebulaMode
-              ? (0.95 * opacityScale)
-              : (node.kind === 'skill' ? (STATE_OPACITY[String(node.state || '')] || 0.65) : 0.92),
-            stroke: nebulaMode
-              ? (selected ? color : blendColor(color, 'white', 0.4))
-              : (selected || centered ? '#111827' : color),
-            strokeOpacity: nebulaMode ? (selected ? 1 : 0.5 * opacityScale) : 1,
-            lineWidth: nebulaMode
-              ? (selected ? 1.2 : 0.6)
-              : (selected || centered ? 2.4 : Math.max(0.7, layoutSettings.edgeWidth * 0.8)),
-            size: nebulaMode
-              ? (selected ? nebulaSize + 4 : nebulaSize)
-              : nodeVisualSize(node, layoutSettings, selected, centered),
-            shadowColor: nebulaMode ? nebulaShadowColor : 'transparent',
-            shadowBlur: nebulaMode ? nebulaShadowBlur : 0,
-            labelText: nebulaMode ? '' : (shouldShowNodeLabel(layoutSettings.labelMode, {
-              selected,
-              centered,
-              denseMode: layoutSettings.denseMode,
-            }) ? node.name : ''),
-            labelFill: '#111827',
-            labelFontSize: nodeLabelFontSize(layoutSettings, selected, centered),
-            labelFontWeight: selected || centered ? 700 : 600,
-            labelMaxWidth: '260%',
-            labelPlacement: 'bottom' as const,
-            labelOffsetY: layoutSettings.denseMode ? 4 : 5,
-            labelStroke: '#fff',
-            labelLineWidth: layoutSettings.denseMode ? 2 : 3,
-            labelWordWrap: true,
-            cursor: 'pointer',
+            ...graphNodeVisualStyle(
+              node,
+              layoutSettings,
+              selectedNodeIdRef.current,
+              centerSkillIdRef.current,
+              nebulaModeRef.current,
+            ),
           },
         }
       })
 
       const edges = filteredEdges.map(edge => {
-        const selected = edge.id === selectedEdgeId
-        const color = EDGE_COLOR[edge.edge_type] || '#8c8c8c'
-        const edgeOpacityByDepth = nebulaMode ? 0.35 : layoutSettings.edgeOpacity
-        const edgeWidthByDepth = nebulaMode ? 0.9 : undefined
         return {
           id: edge.id,
           source: edge.source,
           target: edge.target,
           data: { edgeType: edge.edge_type, weight: edge.weight },
-          style: {
-            stroke: color,
-            strokeOpacity: nebulaMode
-              ? (selected ? 0.9 : edgeOpacityByDepth)
-              : (selected ? 1 : layoutSettings.edgeOpacity),
-            lineWidth: nebulaMode
-              ? (selected ? 1.2 : (edgeWidthByDepth ?? 0.5))
-              : (selected
-                ? Math.max(2.4, layoutSettings.edgeWidth + Number(edge.weight || 0) * 1.8)
-                : Math.max(0.4, layoutSettings.edgeWidth + Number(edge.weight || 0) * 0.7)),
-            endArrow: !nebulaMode,
-            labelText: nebulaMode ? '' : formatEdgeLabel(edge),
-            labelFontSize: 9,
-            labelFill: color,
-            label: false,
-            labelStroke: '#fff',
-            labelLineWidth: 3,
-            labelPlacement: 'center' as const,
-            labelOffsetX: 0,
-            labelOffsetY: -18,
-            badgeText: nebulaMode ? '' : formatEdgeLabel(edge),
-            badgeFontSize: 9,
-            badgeFill: color,
-            badgeBackgroundFill: '#fff',
-            badgeBackgroundOpacity: nebulaMode ? 0 : 0.9,
-            badgeBackgroundRadius: 4,
-            badgePadding: [1, 4, 1, 4],
-            badgePlacement: 'suffix' as const,
-            badgeOffsetX: 0,
-            badgeOffsetY: -18,
-            cursor: 'pointer',
-          },
+          style: graphEdgeVisualStyle(edge, layoutSettings, selectedEdgeIdRef.current, nebulaModeRef.current, true),
         }
       })
 
@@ -842,49 +923,233 @@ export default function SkillGraph() {
 
       let graphReady = false
       let edgeLabelsVisibleKey: string | null = null
+      let hoveredNodeId: string | null = null
+      let latestZoom = 1
+
+      const readGraphZoom = () => {
+        try {
+          const zoom = g.getZoom()
+          if (Number.isFinite(zoom)) latestZoom = zoom
+        } catch {
+          // G6 can emit transform events while its viewport controller is still settling.
+        }
+        return latestZoom
+      }
+
+      const cancelNodeHoverAnimation = (id: string) => {
+        const frameId = hoverAnimationFrames.get(id)
+        if (frameId !== undefined) {
+          window.cancelAnimationFrame(frameId)
+          hoverAnimationFrames.delete(id)
+        }
+      }
+
+      const drawNodePatch = (id: string, style: Record<string, unknown>) => {
+        if (disposed) return
+        g.updateNodeData([{ id, style }])
+        void Promise.resolve(g.draw())
+      }
+
+      const readRenderedNodeSize = (id: string) => {
+        const modelSize = Number(g.getNodeData(id)?.style?.size)
+        if (Number.isFinite(modelSize) && modelSize > 0) return modelSize
+
+        const renderedSize = Number(g.getElementRenderStyle(id)?.size)
+        if (Number.isFinite(renderedSize) && renderedSize > 0) return renderedSize
+
+        return null
+      }
+
+      const restoreNodeWithBounce = (
+        id: string,
+        node: GraphViewNodeData,
+        restSize: number,
+        labelText: string,
+        onComplete: () => void,
+      ) => {
+        cancelNodeHoverAnimation(id)
+
+        const restingStyle = {
+          labelText,
+          size: restSize,
+          shadowColor: nebulaModeRef.current ? (id === selectedNodeIdRef.current ? nodeColor(node) : 'transparent') : 'transparent',
+          shadowBlur: nebulaModeRef.current ? (id === selectedNodeIdRef.current ? 10 : 0) : 0,
+        }
+
+        if (prefersReducedMotion()) {
+          drawNodePatch(id, restingStyle)
+          onComplete()
+          return
+        }
+
+        const startTime = window.performance.now()
+        const peakSize = restSize * NODE_HOVER_BOUNCE_RATIO
+        const startSize = graphNodeHoverSize(restSize)
+
+        const step = (now: number) => {
+          if (disposed) return
+
+          const elapsed = now - startTime
+          const progress = Math.min(1, elapsed / NODE_HOVER_RETURN_MS)
+          const stretchProgress = Math.min(1, progress / NODE_HOVER_STRETCH_PHASE)
+          const settleProgress = progress <= NODE_HOVER_STRETCH_PHASE
+            ? 0
+            : (progress - NODE_HOVER_STRETCH_PHASE) / (1 - NODE_HOVER_STRETCH_PHASE)
+          const size = progress <= NODE_HOVER_STRETCH_PHASE
+            ? interpolateNumber(startSize, peakSize, easeOutCubic(stretchProgress))
+            : interpolateNumber(peakSize, restSize, easeOutCubic(settleProgress))
+
+          drawNodePatch(id, {
+            ...restingStyle,
+            size,
+          })
+
+          if (progress < 1) {
+            hoverAnimationFrames.set(id, window.requestAnimationFrame(step))
+            return
+          }
+
+          hoverAnimationFrames.delete(id)
+          drawNodePatch(id, restingStyle)
+          onComplete()
+        }
+
+        hoverAnimationFrames.set(id, window.requestAnimationFrame(step))
+      }
+
       const syncEdgeLabelVisibility = () => {
         if (disposed || !graphReady || filteredEdges.length === 0) return
+        const zoom = readGraphZoom()
+        const selectedEdgeId = selectedEdgeIdRef.current
+        const currentNebulaMode = nebulaModeRef.current
         const visibleIds = shouldShowEdgeLabels(
           layoutSettings.edgeLabelMode,
-          g.getZoom(),
+          zoom,
           filteredEdges,
           selectedEdgeId,
         )
-        const visibleKey = `${layoutSettings.edgeLabelMode}:${g.getZoom().toFixed(2)}:${selectedEdgeId || ''}:${visibleIds.size}`
+        const visibleKey = [
+          layoutSettings.edgeLabelMode,
+          zoom.toFixed(2),
+          selectedEdgeId || '',
+          currentNebulaMode ? 'nebula' : 'readable',
+          ...visibleIds,
+        ].join(':')
         if (edgeLabelsVisibleKey === visibleKey) return
 
         edgeLabelsVisibleKey = visibleKey
         g.updateEdgeData(filteredEdges.map(edge => ({
           id: edge.id,
-          style: { badgeText: visibleIds.has(edge.id) ? formatEdgeLabel(edge) : '' },
+          style: graphEdgeVisualStyle(
+            edge,
+            layoutSettings,
+            selectedEdgeId,
+            currentNebulaMode,
+            visibleIds.has(edge.id),
+          ),
+        })))
+        void Promise.resolve(g.draw())
+      }
+
+      const syncGraphVisualState = () => {
+        if (disposed || !graphReady) return
+        const zoom = readGraphZoom()
+        const selectedNodeId = selectedNodeIdRef.current
+        const selectedEdgeId = selectedEdgeIdRef.current
+        const currentCenterSkillId = centerSkillIdRef.current
+        const currentNebulaMode = nebulaModeRef.current
+        const visibleIds = shouldShowEdgeLabels(
+          layoutSettings.edgeLabelMode,
+          zoom,
+          filteredEdges,
+          selectedEdgeId,
+        )
+        edgeLabelsVisibleKey = [
+          layoutSettings.edgeLabelMode,
+          zoom.toFixed(2),
+          selectedEdgeId || '',
+          currentNebulaMode ? 'nebula' : 'readable',
+          ...visibleIds,
+        ].join(':')
+
+        g.updateNodeData(graphData.nodes.map(node => ({
+          id: node.id,
+          style: graphNodeVisualStyle(
+            node,
+            layoutSettings,
+            selectedNodeId,
+            currentCenterSkillId,
+            currentNebulaMode,
+          ),
+        })))
+        g.updateEdgeData(filteredEdges.map(edge => ({
+          id: edge.id,
+          style: graphEdgeVisualStyle(
+            edge,
+            layoutSettings,
+            selectedEdgeId,
+            currentNebulaMode,
+            visibleIds.has(edge.id),
+          ),
         })))
         void Promise.resolve(g.draw())
       }
 
-      const updateHoveredNodeLabel = (id: string | undefined, visible: boolean) => {
-        if (!id || layoutSettings.labelMode !== 'hover') return
-        const node = graphData.nodes.find(item => item.id === id)
+      const updateHoveredNodeState = (id: string | undefined, visible: boolean) => {
+        const activeId = id || hoveredNodeId || undefined
+        if (!activeId) return
+
+        if (!visible && hoveredNodeId !== activeId) return
+
+        const previousHoveredId = hoveredNodeId
+        if (visible && previousHoveredId && previousHoveredId !== activeId) {
+          updateHoveredNodeState(previousHoveredId, false)
+        }
+
+        if (visible) hoveredNodeId = activeId
+        if (!visible && hoveredNodeId === activeId) hoveredNodeId = null
+
+        const node = graphData.nodes.find(item => item.id === activeId)
         if (!node) return
-        const selected = id === selectedNodeId
-        const centered = id === centerSkillId
-        const shouldKeep = shouldShowNodeLabel(layoutSettings.labelMode, {
+
+        const selected = activeId === selectedNodeIdRef.current
+        const centered = activeId === centerSkillIdRef.current
+        const currentNebulaMode = nebulaModeRef.current
+        const labelShouldPersist = shouldShowNodeLabel(layoutSettings.labelMode, {
           selected,
           centered,
           denseMode: layoutSettings.denseMode,
         })
-        g.updateNodeData([{
-          id,
-          style: {
-            labelText: visible || shouldKeep ? node.name : '',
-            size: visible ? Math.max(nodeVisualSize(node, layoutSettings, selected, centered) + 5, 18) : nodeVisualSize(node, layoutSettings, selected, centered),
-          },
-        }])
-        void Promise.resolve(g.draw())
+        const labelText = layoutSettings.labelMode === 'hover'
+          ? (visible || labelShouldPersist ? node.name : '')
+          : (labelShouldPersist ? node.name : '')
+        const fallbackRestSize = graphNodeRestSize(node, layoutSettings, selected, centered, currentNebulaMode)
+
+        if (visible) {
+          cancelNodeHoverAnimation(activeId)
+          const restSize = hoverRestSizes.get(activeId) ?? readRenderedNodeSize(activeId) ?? fallbackRestSize
+          hoverRestSizes.set(activeId, restSize)
+          drawNodePatch(activeId, {
+            labelText,
+            size: graphNodeHoverSize(restSize),
+            shadowColor: currentNebulaMode ? nodeColor(node) : 'rgba(22, 119, 255, 0.28)',
+            shadowBlur: currentNebulaMode ? 12 : 8,
+          })
+          return
+        }
+
+        const restSize = hoverRestSizes.get(activeId) ?? fallbackRestSize
+        restoreNodeWithBounce(activeId, node, restSize, labelText, () => {
+          hoverRestSizes.delete(activeId)
+        })
       }
 
       g.on('node:click', event => {
         const id = event.target?.id
         if (id) {
+          selectedNodeIdRef.current = id
+          selectedEdgeIdRef.current = null
+          syncGraphVisualState()
           setSelectedNodeId(id)
           setSelectedEdgeId(null)
         }
@@ -893,15 +1158,25 @@ export default function SkillGraph() {
       g.on('edge:click', event => {
         const id = event.target?.id
         if (id) {
+          selectedEdgeIdRef.current = id
+          selectedNodeIdRef.current = null
+          syncGraphVisualState()
           setSelectedEdgeId(id)
           setSelectedNodeId(null)
         }
       })
 
-      g.on('node:pointerenter', event => updateHoveredNodeLabel(event.target?.id, true))
-      g.on('node:pointerleave', event => updateHoveredNodeLabel(event.target?.id, false))
+      g.on('node:pointerenter', event => updateHoveredNodeState(event.target?.id, true))
+      g.on('node:pointerleave', event => updateHoveredNodeState(event.target?.id, false))
+      g.on('node:pointerout', event => updateHoveredNodeState(event.target?.id, false))
+      g.on('edge:pointerenter', () => updateHoveredNodeState(undefined, false))
+      g.on('canvas:pointermove', () => updateHoveredNodeState(undefined, false))
+      g.on('canvas:pointerleave', () => updateHoveredNodeState(undefined, false))
 
       g.on('canvas:click', () => {
+        selectedNodeIdRef.current = null
+        selectedEdgeIdRef.current = null
+        syncGraphVisualState()
         setSelectedNodeId(null)
         setSelectedEdgeId(null)
       })
@@ -909,19 +1184,25 @@ export default function SkillGraph() {
       // Zoom → nebula mode transition
       g.on('aftertransform', () => {
         if (disposed) return
-        const zoom = g.getZoom()
-        setNebulaMode(zoom < NEBULA_ZOOM_THRESHOLD)
+        const zoom = readGraphZoom()
+        const nextNebulaMode = zoom < NEBULA_ZOOM_THRESHOLD
+        if (nebulaModeRef.current !== nextNebulaMode) {
+          nebulaModeRef.current = nextNebulaMode
+          setNebulaMode(nextNebulaMode)
+          syncGraphVisualState()
+          return
+        }
         syncEdgeLabelVisibility()
       })
 
       graphRef.current = g
+      syncGraphVisualStateRef.current = syncGraphVisualState
       void Promise.resolve(g.render()).then(() => {
         if (!disposed) {
           graphReady = true
           syncEdgeLabelVisibility()
           void Promise.resolve(g.fitView({ when: 'always' }, { duration: 160 })).then(() => {
             syncEdgeLabelVisibility()
-            g.on('aftertransform', syncEdgeLabelVisibility)
           })
         }
       })
@@ -929,12 +1210,16 @@ export default function SkillGraph() {
 
     return () => {
       disposed = true
+      syncGraphVisualStateRef.current = null
+      hoverAnimationFrames.forEach(frameId => window.cancelAnimationFrame(frameId))
+      hoverAnimationFrames.clear()
+      hoverRestSizes.clear()
       if (graphRef.current) {
         graphRef.current.destroy()
         graphRef.current = null
       }
     }
-  }, [canvasSize, centerSkillId, edgeFilter, graphData, layoutSettings, nebulaMode, selectedEdgeId, selectedNodeId])
+  }, [canvasSize, edgeFilter, graphData, layoutSettings])
 
   const handleViewChange = (nextView: GraphViewMode) => {
     setViewMode(nextView)
@@ -1177,7 +1462,7 @@ export default function SkillGraph() {
         >
           {loading && !graphData ? (
             <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
-              <Spin size="large" tip="Loading graph data..." />
+              <Spin size="large" description="Loading graph data..." />
             </div>
           ) : !hasNodes ? (
             <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', padding: 24 }}>
@@ -1375,6 +1660,7 @@ export default function SkillGraph() {
         {graphData && (
           <Space size={8} wrap>
             <span>{graphPresetName(layoutSettings)} preset</span>
+            {relationStrengthText && <span>{relationStrengthText}</span>}
             <span>{graphData.nodes.length} nodes / {graphData.edges.length} edges</span>
           </Space>
         )}
diff --git a/skillwiki-frontend/src/pages/SkillWiki.tsx b/skillwiki-frontend/src/pages/SkillWiki.tsx
index e1a0ca8..cb89169 100644
--- a/skillwiki-frontend/src/pages/SkillWiki.tsx
+++ b/skillwiki-frontend/src/pages/SkillWiki.tsx
@@ -416,7 +416,8 @@ export default function SkillWiki() {
           loading={loading}
           size="middle"
           pagination={{ pageSize: 15, showSizeChanger: true }}
-          style={{ borderRadius: 8, overflow: 'hidden' }}
+          className="skillwiki-table-contained"
+          scroll={{ x: 980 }}
         />
       </motion.div>
 
diff --git a/skillwiki-frontend/src/pages/VersionControl.tsx b/skillwiki-frontend/src/pages/VersionControl.tsx
index ff43655..1862d7c 100644
--- a/skillwiki-frontend/src/pages/VersionControl.tsx
+++ b/skillwiki-frontend/src/pages/VersionControl.tsx
@@ -745,6 +745,8 @@ export default function VersionControl() {
               loading={loadingVersions}
               size="small"
               pagination={false}
+              className="skillwiki-table-contained"
+              scroll={{ x: 760 }}
               locale={{ emptyText: selectedId ? 'No version records' : 'Select a Skill first' }}
             />
           </Card>
@@ -916,6 +918,8 @@ export default function VersionControl() {
                   loading={historyLoading}
                   size="small"
                   pagination={{ pageSize: 5 }}
+                  className="skillwiki-table-contained"
+                  scroll={{ x: 980 }}
                   locale={{ emptyText: 'No snapshot commits yet' }}
                 />