feat: add MCP research access and browser key management

frontend/src/pages/mcp-keys.css

@@ -0,0 +1,118 @@
+.mcp-keys-page {
+  overflow: auto;
+  width: 100%;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.mcp-keys-page > header,
+.mcp-key-address {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+.mcp-keys-page h1 {
+  margin: 0 0 8px;
+  font-size: 24px;
+}
+.mcp-keys-page h2 {
+  margin: 0 0 16px;
+  font-size: 16px;
+}
+.mcp-keys-page p {
+  color: var(--semi-color-text-2);
+  line-height: 1.6;
+}
+.mcp-key-card {
+  padding: 20px;
+  border: 1px solid var(--semi-color-border);
+  border-radius: 10px;
+  background: var(--semi-color-bg-1);
+}
+.mcp-key-fields {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  margin-bottom: 20px;
+}
+.mcp-key-fields > label {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 200px;
+}
+.mcp-key-fields input[type="number"] {
+  padding: 6px 12px;
+  border: 1px solid var(--semi-color-border);
+  border-radius: 4px;
+  background: var(--semi-color-fill-0);
+  color: var(--semi-color-text-0);
+  font: inherit;
+}
+.mcp-key-card fieldset {
+  border: 0;
+  padding: 0;
+  margin: 0 0 20px;
+}
+.mcp-key-card legend {
+  margin-bottom: 12px;
+}
+.mcp-key-permissions {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 16px;
+}
+.mcp-key-permissions label {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  cursor: pointer;
+}
+.mcp-key-card small {
+  display: block;
+  margin-top: 4px;
+  color: var(--semi-color-text-2);
+}
+.mcp-key-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 16px;
+}
+.mcp-key-table {
+  overflow: auto;
+}
+.mcp-key-table table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+}
+.mcp-key-table th,
+.mcp-key-table td {
+  padding: 12px;
+  border-bottom: 1px solid var(--semi-color-border);
+  vertical-align: top;
+}
+.mcp-key-table th {
+  color: var(--semi-color-text-2);
+  font-weight: 500;
+  white-space: nowrap;
+}
+.mcp-key-count {
+  color: var(--semi-color-text-2);
+  font-weight: 400;
+}
+.mcp-key-address code {
+  overflow-wrap: anywhere;
+}
+@media (max-width: 700px) {
+  .mcp-keys-page {
+    padding: 12px;
+  }
+  .mcp-key-address {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}