{
+ 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..10592212
--- /dev/null
+++ b/crates/runner-host/crates/web-client/src/board_components/button.rs
@@ -0,0 +1,76 @@
+// 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
+ 
+ 
+
+ }
+}
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..fe816da3
--- /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..bc9b0bc3
--- /dev/null
+++ b/crates/runner-host/crates/web-client/src/console.rs
@@ -0,0 +1,87 @@
+// 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..c7eb49a7
--- /dev/null
+++ b/crates/runner-host/crates/web-client/src/hooks.rs
@@ -0,0 +1,83 @@
+// 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{
+ for history.current().iter().rev().map(|message| html!(
+
+ { message }
))
+ }