feat(editor): command reference and inline docs in the console

The builder listed command names but said nothing about them. It now reads
the command manifest, the one source the bindings are generated from, so
the docs cannot drift. The selected command shows its signature, each field
input is labeled with its type and carries a tooltip, and a Reference toggle
opens a searchable list of every command and its signature that fills the
builder when picked.

Author: matthewjberger

apps/editor/public/styles.css

@@ -1457,6 +1457,70 @@ input[type="range"] {
   color: var(--accent);
 }
 
+.console-header-actions {
+  display: flex;
+  gap: 6px;
+}
+
+.console-clear.console-clear-active {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.console-signature {
+  font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
+  font-size: 11px;
+  color: var(--text);
+  opacity: 0.7;
+  padding: 1px 2px 4px;
+  word-break: break-word;
+}
+
+.console-field-type {
+  font-size: 9.5px;
+  font-weight: 400;
+  letter-spacing: 0;
+  text-transform: none;
+  opacity: 0.7;
+}
+
+.console-reference {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--panel-border);
+  max-height: 42vh;
+  min-height: 0;
+}
+
+.console-reference-list {
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.console-reference-item {
+  text-align: left;
+  font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
+  font-size: 11px;
+  padding: 4px 8px;
+  border-radius: 5px;
+  border: none;
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.console-reference-item:hover {
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+  color: var(--accent);
+}
+
 .console-log {
   flex: 1;
   overflow-y: auto;

apps/editor/src/components/console.rs

@@ -4,11 +4,44 @@ use leptos::prelude::*;
 use nightshade_api::editor::protocol::{
     ClientMessage, CommandLogEntry, CommandLogKind, EditorAction,
 };
+use nightshade_api::prelude::CommandSpec;
 use serde_json::{Value, json};
 
 use crate::bridge::{Bridge, act, send};
 use crate::state::{EditorState, InspectorTab};
 
+/// The command reference, keyed by name, from the one manifest the bindings are
+/// generated from, so the docs cannot drift from the commands.
+fn command_docs() -> HashMap<String, CommandSpec> {
+    nightshade_api::prelude::command_manifest()
+        .into_iter()
+        .map(|spec| (spec.name.to_string(), spec))
+        .collect()
+}
+
+/// A command's one-line signature: name, fields with their types, and reply.
+fn signature(spec: &CommandSpec) -> String {
+    let fields = spec
+        .fields
+        .iter()
+        .map(|field| format!("{}: {}", field.name, field.type_name))
+        .collect::<Vec<_>>()
+        .join(", ");
+    if spec.reply == "none" {
+        format!("{}({fields})", spec.name)
+    } else {
+        format!("{}({fields}) \u{2192} {}", spec.name, spec.reply)
+    }
+}
+
+/// A command's field types, keyed by field name, for the per-field tooltips.
+fn field_types(spec: &CommandSpec) -> HashMap<String, String> {
+    spec.fields
+        .iter()
+        .map(|field| (field.name.to_string(), field.type_name.to_string()))
+        .collect()
+}
+
 /// Every command variant the api exposes, as (name, arguments schema), read
 /// from the one source: `command_schema`. The builder lists all of them, so it
 /// always matches the `Command` enum instead of a hand-picked subset.
@@ -150,6 +183,7 @@ fn defaults_for(args: &Value, selected: Option<u32>) -> HashMap<String, String>
 fn field_input(
     name: String,
     schema: Value,
+    type_name: String,
     fields: RwSignal<HashMap<String, String>>,
     state: EditorState,
 ) -> AnyView {
@@ -171,7 +205,7 @@ fn field_input(
         };
         return view! {
             <div class="console-field">
-                <label class="console-field-label">{name.clone()}</label>
+                <label class="console-field-label" title=type_name.clone()>{name.clone()} <span class="console-field-type">{type_name.clone()}</span></label>
                 <div class="console-field-row">
                     <input
                         class="console-input"
@@ -201,7 +235,7 @@ fn field_input(
     if let Some(options) = enum_options(&schema) {
         return view! {
             <div class="console-field">
-                <label class="console-field-label">{name.clone()}</label>
+                <label class="console-field-label" title=type_name.clone()>{name.clone()} <span class="console-field-type">{type_name.clone()}</span></label>
                 <select
                     class="console-select"
                     prop:value=read
@@ -220,7 +254,7 @@ fn field_input(
     if schema.get("type").and_then(Value::as_str) == Some("boolean") {
         return view! {
             <div class="console-field console-field-inline">
-                <label class="console-field-label">{name.clone()}</label>
+                <label class="console-field-label" title=type_name.clone()>{name.clone()} <span class="console-field-type">{type_name.clone()}</span></label>
                 <input
                     type="checkbox"
                     prop:checked=move || read() == "true"
@@ -242,7 +276,7 @@ fn field_input(
         .unwrap_or_default();
     view! {
         <div class="console-field">
-            <label class="console-field-label">{name.clone()}</label>
+            <label class="console-field-label" title=type_name.clone()>{name.clone()} <span class="console-field-type">{type_name.clone()}</span></label>
             <input
                 class="console-input"
                 r#type=if numeric { "number" } else { "text" }
@@ -263,6 +297,9 @@ pub fn Console(
     state: EditorState,
 ) -> impl IntoView {
     let catalog = StoredValue::new(command_catalog());
+    let docs = StoredValue::new(command_docs());
+    let reference_open = RwSignal::new(false);
+    let reference_filter = RwSignal::new(String::new());
     let names: Vec<String> =
         catalog.with_value(|c| c.iter().map(|(name, _)| name.clone()).collect());
     let first = names.first().cloned().unwrap_or_default();
@@ -328,10 +365,68 @@ pub fn Console(
         >
             <div class="console-header">
                 <span class="console-title">"Commands and Events"</span>
-                <button class="console-clear" on:click=move |_| state.command_log.set(Vec::new())>
-                    "Clear"
-                </button>
+                <div class="console-header-actions">
+                    <button
+                        class=move || {
+                            if reference_open.get() {
+                                "console-clear console-clear-active"
+                            } else {
+                                "console-clear"
+                            }
+                        }
+                        title="Browse every command and its signature"
+                        on:click=move |_| reference_open.update(|open| *open = !*open)
+                    >
+                        "Reference"
+                    </button>
+                    <button
+                        class="console-clear"
+                        on:click=move |_| state.command_log.set(Vec::new())
+                    >
+                        "Clear"
+                    </button>
+                </div>
             </div>
+            <Show when=move || reference_open.get() fallback=|| ()>
+                <div class="console-reference">
+                    <input
+                        class="console-input"
+                        placeholder="filter commands"
+                        prop:value=move || reference_filter.get()
+                        on:input=move |event| reference_filter.set(event_target_value(&event))
+                    />
+                    <div class="console-reference-list">
+                        {move || {
+                            let filter = reference_filter.get().to_lowercase();
+                            docs.with_value(|map| {
+                                let mut specs: Vec<CommandSpec> = map
+                                    .values()
+                                    .filter(|spec| spec.name.to_lowercase().contains(&filter))
+                                    .cloned()
+                                    .collect();
+                                specs.sort_by_key(|spec| spec.name);
+                                specs
+                                    .into_iter()
+                                    .map(|spec| {
+                                        let name = spec.name.to_string();
+                                        view! {
+                                            <button
+                                                class="console-reference-item"
+                                                on:click=move |_| {
+                                                    choose(name.clone());
+                                                    reference_open.set(false);
+                                                }
+                                            >
+                                                {signature(&spec)}
+                                            </button>
+                                        }
+                                    })
+                                    .collect_view()
+                            })
+                        }}
+                    </div>
+                </div>
+            </Show>
             <div class="console-log">
                 <Show when=move || state.command_log.with(|log| log.is_empty()) fallback=|| ()>
                     <div class="console-empty">
@@ -394,13 +489,24 @@ pub fn Console(
                         .map(|name| view! { <option value=name.clone()>{name.clone()}</option> })
                         .collect_view()}
                 </select>
+                <div class="console-signature">
+                    {move || {
+                        docs.with_value(|map| map.get(&selected.get()).map(signature)).unwrap_or_default()
+                    }}
+                </div>
                 <div class="console-fields">
                     {move || {
                         let name = selected.get();
+                        let types = docs
+                            .with_value(|map| map.get(&name).map(field_types))
+                            .unwrap_or_default();
                         match args_for(&name) {
                             Some(args) => variant_fields(&args)
                                 .into_iter()
-                                .map(|(field, schema)| field_input(field, schema, fields, state))
+                                .map(|(field, schema)| {
+                                    let type_name = types.get(&field).cloned().unwrap_or_default();
+                                    field_input(field, schema, type_name, fields, state)
+                                })
                                 .collect_view()
                                 .into_any(),
                             None => ().into_any(),