Robot.json auf WebPage

public/style.css

@@ -163,4 +163,97 @@ h1 {
 .state-grid span:first-child {
     color: var(--accent);
     font-weight: bold;
+}
+
+/* ── Robot.json Tree ─────────────────────────────────────────────────────── */
+
+#robotJsonLabel {
+    font-size: 11px;
+    font-weight: normal;
+    opacity: 0.6;
+    margin-left: 6px;
+}
+
+.section.collapsed #robotJsonTree {
+    display: none;
+}
+
+.json-tree {
+    margin-top: 10px;
+}
+
+.json-tree details {
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+}
+
+.json-tree details > summary {
+    cursor: pointer;
+    color: var(--accent);
+    font-weight: bold;
+    padding: 5px 0;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.json-tree details > summary::before {
+    content: "▶";
+    font-size: 10px;
+    display: inline-block;
+    transition: transform 0.15s ease;
+}
+
+.json-tree details[open] > summary::before {
+    transform: rotate(90deg);
+}
+
+.json-tree details > pre {
+    margin: 2px 0 6px 16px;
+    font-size: 11px;
+    white-space: pre-wrap;
+    word-break: break-all;
+    color: var(--text);
+    opacity: 0.8;
+    line-height: 1.5;
+}
+
+.json-tree .json-scalar {
+    display: flex;
+    justify-content: space-between;
+    padding: 4px 0;
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+    font-size: 13px;
+}
+
+.json-tree .json-scalar .json-key {
+    color: var(--accent);
+    font-weight: bold;
+}
+
+.json-tree .json-scalar .json-val {
+    opacity: 0.85;
+}
+
+/* ── Robot.json History ──────────────────────────────────────────────────── */
+
+#robotHistoryList li {
+    cursor: pointer;
+    font-size: 13px;
+    font-family: monospace;
+    transition: color 0.1s;
+}
+
+#robotHistoryList li:hover {
+    color: #7ec8e3;
+}
+
+#robotHistoryList li.rh-active {
+    color: #7ec8e3;
+    font-weight: bold;
+}
+
+#robotHistoryList li.rh-active::before {
+    content: "▶ ";
+    font-size: 10px;
 }