{
+ if let Some(board_config) = &*board_config {
+ board_config.iter().map(|component| match component {
+ Component::Button{id} => html!(),
+ Component::MonochromeLed{id} => html! {
+
+ };
+}
diff --git a/crates/runner-host/crates/web-client/src/board_components.rs b/crates/runner-host/crates/web-client/src/board_components.rs
new file mode 100644
index 00000000..f0e88b2f
--- /dev/null
+++ b/crates/runner-host/crates/web-client/src/board_components.rs
@@ -0,0 +1,16 @@
+// Copyright 2024 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+pub mod button;
+pub mod led;
diff --git a/crates/runner-host/crates/web-client/src/board_components/button.rs b/crates/runner-host/crates/web-client/src/board_components/button.rs
new file mode 100644
index 00000000..942c3f15
--- /dev/null
+++ b/crates/runner-host/crates/web-client/src/board_components/button.rs
@@ -0,0 +1,77 @@
+// Copyright 2024 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+use log::info;
+use web_common::{ButtonState, Event};
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq)]
+pub struct Props {
+ #[prop_or_default]
+ pub id: usize,
+ pub on_event: Callback{"Waiting for backend connection..."}
)
+ }
+ }
+ 
+ 
+
+ };
+}
diff --git a/crates/runner-host/crates/web-client/src/board_components/led.rs b/crates/runner-host/crates/web-client/src/board_components/led.rs
new file mode 100644
index 00000000..31f46e8f
--- /dev/null
+++ b/crates/runner-host/crates/web-client/src/board_components/led.rs
@@ -0,0 +1,58 @@
+// Copyright 2024 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+use log::info;
+use web_common::Command;
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq)]
+pub struct Props {
+ #[prop_or_default]
+ pub id: usize,
+ pub command_state: UseStateHandle
+
+
+
+
+
+ };
+}
diff --git a/crates/runner-host/crates/web-client/src/console.rs b/crates/runner-host/crates/web-client/src/console.rs
new file mode 100644
index 00000000..dbf570ed
--- /dev/null
+++ b/crates/runner-host/crates/web-client/src/console.rs
@@ -0,0 +1,74 @@
+// Copyright 2024 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+use log::info;
+use wasm_bindgen::JsCast;
+use web_common::Command;
+use web_sys::HtmlInputElement;
+use yew::prelude::*;
+use yew_hooks::prelude::*;
+
+#[derive(Properties, PartialEq)]
+
+pub struct Props {
+ #[prop_or_default]
+ pub id: usize,
+ pub command_state: UseStateHandle
+
+ }
+}
diff --git a/crates/runner-host/crates/web-client/src/hooks.rs b/crates/runner-host/crates/web-client/src/hooks.rs
new file mode 100644
index 00000000..6d3c19bc
--- /dev/null
+++ b/crates/runner-host/crates/web-client/src/hooks.rs
@@ -0,0 +1,59 @@
+// Copyright 2024 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+use log::{info, warn};
+use web_common::{Command, Event};
+use yew::prelude::*;
+use yew_hooks::prelude::*;
+
+#[derive(Clone)]
+pub struct UseRunnerConnectionHandle {
+ pub ws: UseWebSocketHandle,
+ pub command_state: UseStateHandle{ "Log history: " }
+ { for history.current().iter().map(|message| html!({ message }
)) } + +