diff --git a/packages/ui-default/pages/record_detail.page.ts b/packages/ui-default/pages/record_detail.page.tsx
similarity index 68%
rename from packages/ui-default/pages/record_detail.page.ts
rename to packages/ui-default/pages/record_detail.page.tsx
index 67826790a..933b14787 100644
--- a/packages/ui-default/pages/record_detail.page.ts
+++ b/packages/ui-default/pages/record_detail.page.tsx
@@ -1,7 +1,10 @@
 import $ from 'jquery';
+import React from 'react';
+import { InfoDialog } from 'vj/components/dialog';
 import { NamedPage } from 'vj/misc/Page';
+import { tpl } from 'vj/utils';
 
-const page = new NamedPage('record_detail', async () => {
+export default new NamedPage('record_detail', async () => {
   if (!UiContext.socketUrl) return;
   const [{ default: WebSocket }, { DiffDOM }] = await Promise.all([
     import('../components/socket'),
@@ -20,6 +23,11 @@ const page = new NamedPage('record_detail', async () => {
     dd.apply(oldSummary[0], dd.diff(oldSummary[0], newSummary[0]));
     if (typeof msg.status === 'number' && window.parent) window.parent.postMessage({ status: msg.status });
   };
+  $(document).on('click', '.subtask-case', function () {
+    const data = $(this).find('.message').text();
+    if (!data?.trim()) return;
+    new InfoDialog({
+      $body: tpl(<pre>{data}</pre>),
+    }).open();
+  });
 });
-
-export default page;
diff --git a/packages/ui-default/templates/record_detail_status.html b/packages/ui-default/templates/record_detail_status.html
index 01c3cb946..8fb363af2 100644
--- a/packages/ui-default/templates/record_detail_status.html
+++ b/packages/ui-default/templates/record_detail_status.html
@@ -79,7 +79,7 @@
                 {{ (rdoc.subtasks[subtaskId]['score'] if _key != 'id' else rcdoc.score)|default(0) }}
               </span>
               {% endif %}
-              <span>{{ formatJudgeTexts([rcdoc.message]) if rcdoc.message else '' }}</span>
+              <span class="message">{{ formatJudgeTexts([rcdoc.message]) if rcdoc.message else '' }}</span>
             </td>
             <td class="col--time">{% if rcdoc['status'] == STATUS.STATUS_TIME_LIMIT_EXCEEDED or rcdoc['status'] == STATUS.STATUS_MEMORY_LIMIT_EXCEEDED or rcdoc['status'] == STATUS.STATUS_OUTPUT_LIMIT_EXCEEDED %}&ge;{% endif %}{{ rcdoc.time|round|int }}ms</td>
             <td class="col--memory">{% if rcdoc['status'] == STATUS.STATUS_TIME_LIMIT_EXCEEDED or rcdoc['status'] == STATUS.STATUS_MEMORY_LIMIT_EXCEEDED or rcdoc['status'] == STATUS.STATUS_OUTPUT_LIMIT_EXCEEDED %}&ge;{% endif %}{{ size(rcdoc.memory, 1024) }}</td>