diff --git a/crates/runtime-dashboard/src/actor_detail_html.rs b/crates/runtime-dashboard/src/actor_detail_html.rs
new file mode 100644
index 0000000..788a54e
--- /dev/null
+++ b/crates/runtime-dashboard/src/actor_detail_html.rs
@@ -0,0 +1,403 @@
+pub const ACTOR_DETAIL_HTML: &str = r##"
+
+
+
+
+Actor Detail — Swactor Dashboard
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Message Rate
+
+
+
+
+
Mailbox Depth
+
+
+
+
+
+
+
+ Logs
+ (0)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+"##;
diff --git a/crates/runtime-dashboard/src/actors_html.rs b/crates/runtime-dashboard/src/actors_html.rs
index 7fb6100..7b0f011 100644
--- a/crates/runtime-dashboard/src/actors_html.rs
+++ b/crates/runtime-dashboard/src/actors_html.rs
@@ -60,7 +60,7 @@ pub const ACTORS_HTML: &str = r##"
.panel {
background: #161822; border: 1px solid #2a2d3e; border-radius: 6px;
- padding: 14px; overflow: hidden;
+ padding: 14px; overflow: visible;
}
.panel h2 { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
@@ -75,7 +75,7 @@ pub const ACTORS_HTML: &str = r##"
.stat-card .value { font-size: 22px; font-weight: 700; color: #fff; }
.stat-card .label { font-size: 10px; color: #888; text-transform: uppercase; margin-top: 2px; }
- canvas { width: 100%; height: 200px; }
+ canvas { width: 100%; height: 220px; }
.search-wrap { margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }
.search-input {
@@ -109,7 +109,12 @@ pub const ACTORS_HTML: &str = r##"
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: #1a1d2c; }
- .detail-panel { display: none; }
+ .detail-panel {
+ display: none; position: fixed; bottom: 12px; right: 12px;
+ width: 420px; max-height: 320px; overflow-y: auto;
+ background: #161822; border: 1px solid #2a2d3e; border-radius: 6px;
+ padding: 14px; z-index: 100; box-shadow: 0 4px 24px rgba(0,0,0,0.5);
+ }
.detail-panel.visible { display: block; }
.detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.detail-close {
@@ -118,17 +123,17 @@ pub const ACTORS_HTML: &str = r##"
}
.detail-close:hover { color: #e0e0e0; border-color: #555; }
.detail-grid {
- display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px;
+ display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px;
}
- .detail-item { background: #1c1f2e; border-radius: 4px; padding: 8px 10px; }
+ .detail-item { background: #1c1f2e; border-radius: 4px; padding: 6px 8px; }
.detail-item .d-label { font-size: 10px; color: #888; text-transform: uppercase; }
- .detail-item .d-value { font-size: 14px; font-weight: 700; color: #fff; margin-top: 2px; word-break: break-all; }
+ .detail-item .d-value { font-size: 13px; font-weight: 700; color: #fff; margin-top: 2px; word-break: break-all; }
.poisoned-badge {
background: #f44336; color: #fff; font-size: 10px; font-weight: 700;
padding: 2px 6px; border-radius: 3px; letter-spacing: 0.5px;
}
.healthy-badge { color: #4caf50; font-size: 12px; }
- canvas.sparkline { width: 100%; height: 60px; }
+ canvas.sparkline { width: 100%; height: 50px; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0f1117; }
@@ -187,7 +192,16 @@ pub const ACTORS_HTML: &str = r##"
-
-
-
-
-
Mailbox Depth History
-
+
+
+
+
+
+