feat(editor): per-script activity in the inspector

Selecting a script entity now shows its traffic inline under the editor:
the events it received and the commands it emitted, filtered from the same
journal the console log streams, scoped to that entity by id. Each row is
tagged command or event and hovers to its full detail, so you can watch one
script react without reading the whole global log.

Author: matthewjberger

apps/editor/public/styles.css

@@ -655,6 +655,79 @@ input[type="range"] {
   color: var(--text);
 }
 
+.script-activity-title {
+  font-size: 10.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  opacity: 0.55;
+  margin: 10px 0 4px;
+}
+
+.script-activity {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  max-height: 200px;
+  overflow-y: auto;
+  font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
+  font-size: 11px;
+}
+
+.script-activity-empty {
+  opacity: 0.45;
+  font-size: 11px;
+  padding: 6px 2px;
+}
+
+.script-activity-row {
+  display: grid;
+  grid-template-columns: 28px auto 1fr auto;
+  align-items: baseline;
+  gap: 7px;
+  padding: 2px 6px;
+  border-radius: 5px;
+  border-left: 2px solid transparent;
+}
+
+.script-activity-command {
+  border-left-color: #60a5fa;
+}
+
+.script-activity-event {
+  border-left-color: var(--accent);
+}
+
+.script-activity-tag {
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.script-activity-command .script-activity-tag {
+  color: #60a5fa;
+}
+
+.script-activity-event .script-activity-tag {
+  color: var(--accent);
+}
+
+.script-activity-label {
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.script-activity-detail {
+  opacity: 0.6;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.script-activity-count {
+  font-size: 9.5px;
+  opacity: 0.6;
+}
+
 .scripts-section {
   border-top: 1px solid var(--border, #2a3340);
   padding: 6px 8px 10px;

apps/editor/src/components/inspector.rs

@@ -417,7 +417,7 @@ fn EntitySections(
     let script = detail
         .script
         .clone()
-        .map(|source| view! { <ScriptSection bridge id source /> });
+        .map(|source| view! { <ScriptSection bridge state id source /> });
     let render_layer = detail.render_layer.map(|layer| {
         view! {
             <div class="section">
@@ -2028,6 +2028,7 @@ fn TextSection(
 #[component]
 fn ScriptSection(
     bridge: StoredValue<Option<Bridge>, LocalStorage>,
+    state: EditorState,
     id: u32,
     source: String,
 ) -> impl IntoView {
@@ -2059,6 +2060,59 @@ fn ScriptSection(
                     send_component(bridge, id, ComponentPatch::Script(value), true);
                 })
             />
+            <div class="script-activity-title">"Activity"</div>
+            <div class="script-activity">
+                {move || {
+                    let mut rows: Vec<_> = state
+                        .command_log
+                        .get()
+                        .into_iter()
+                        .filter(|(entry, _)| entry.entities.contains(&id))
+                        .collect();
+                    if rows.is_empty() {
+                        return view! {
+                            <div class="script-activity-empty">
+                                "No events or commands for this entity yet. Run scripts to see its traffic."
+                            </div>
+                        }
+                            .into_any();
+                    }
+                    rows.reverse();
+                    rows.truncate(24);
+                    rows.into_iter()
+                        .map(|(entry, count)| {
+                            let is_command = entry.kind
+                                == nightshade_api::editor::protocol::CommandLogKind::Command;
+                            let detail = entry.detail.clone();
+                            view! {
+                                <div
+                                    class=if is_command {
+                                        "script-activity-row script-activity-command"
+                                    } else {
+                                        "script-activity-row script-activity-event"
+                                    }
+                                    title=detail
+                                >
+                                    <span class="script-activity-tag">
+                                        {if is_command { "cmd" } else { "evt" }}
+                                    </span>
+                                    <span class="script-activity-label">{entry.label}</span>
+                                    <span class="script-activity-detail">{entry.detail}</span>
+                                    {(count > 1)
+                                        .then(|| {
+                                            view! {
+                                                <span class="script-activity-count">
+                                                    {format!("x{count}")}
+                                                </span>
+                                            }
+                                        })}
+                                </div>
+                            }
+                        })
+                        .collect_view()
+                        .into_any()
+                }}
+            </div>
         </div>
     }
 }