@rainbow-robotics/muscat-plugin-kit 1.10.1-dev.0 → 1.10.1

package/cli/templates/common/ui/content.tsx

@@ -1,216 +1,216 @@
-import { useMemo, useState } from "react";
-import {
-  RBCheckBox,
-  RBLabelButton,
-  RBRadioBox,
-  RBSelectBox,
-  RBSlider,
-  RBSwitch,
-  RBTextArea,
-  RBTextField,
-  RBTextInput,
-  Option
-} from "@rainbow-robotics/plugin-ui/react";
-import { useRb } from "@rainbow-robotics/plugin-ui/sdk";
-
-type RunMode = "inspect" | "assist" | "auto";
-
-const MODE_OPTIONS: Array<{ label: string; value: RunMode }> = [
-  { label: "Inspect", value: "inspect" },
-  { label: "Assist", value: "assist" },
-  { label: "Auto", value: "auto" },
-];
-
-const TASK_OPTIONS = [
-  { label: "Publish status", value: "publish" },
-  { label: "Run grip action", value: "grip" },
-  { label: "Save snapshot", value: "snapshot" },
-];
-
-// Export your UI as the default. The host mounts it (dev: with HMR).
-export default function App() {
-  const rb = useRb();
-  const [targetName, setTargetName] = useState("demo_target");
-  const [gripType, setGripType] = useState<string>();
-  const [gripWidth, setGripWidth] = useState(24);
-  const [speed, setSpeed] = useState(45);
-  const [mode, setMode] = useState<RunMode>("assist");
-  const [enabled, setEnabled] = useState(true);
-  const [tasks, setTasks] = useState<Array<string>>(["publish", "grip"]);
-  const [memo, setMemo] = useState("Use this area for operator notes.");
-
-  const payload = useMemo(
-    () => ({
-      targetName,
-      gripWidth,
-      speed,
-      mode,
-      enabled,
-      tasks,
-      memo,
-    }),
-    [targetName, gripWidth, speed, mode, enabled, tasks, memo],
-  );
-
-  const showRequestError = (error: unknown) => {
-    const message = error instanceof Error ? error.message : "Request failed";
-    rb.toast({ type: "danger", message });
-  };
-
-  const runAction = async () => {
-    try {
-      await rb.action("grip", payload);
-      rb.toast({ type: "success", message: `Sent ${targetName}` });
-    } catch (error) {
-      showRequestError(error);
-    }
-  };
-
-  const publishPreview = async () => {
-    try {
-      const isConfirm = await rb.confirm({
-        message: "Are you sure publish?",
-        buttonText: { yes: "confirm", no: "cancel" },
-      });
-
-      if (isConfirm) {
-        await rb.pub("event", payload);
-      }
-    } catch (error) {
-      showRequestError(error);
-    }
-  };
-
-  return (
-    <div className="max-h-[70vh] w-[420px] p-4 max-w-full overflow-y-auto bg-bg-elevated text-fg-default">
-      <div className="flex flex-col gap-5">
-        <header>
-          <div className="flex items-center justify-between gap-12">
-            <div>
-              <h2 className="typo-heading-xs-semibold">Demo Control</h2>
-              <p className="typo-body-xs2-normal text-fg-subtle">
-                Input patterns for Muscat plugin UIs
-              </p>
-            </div>
-            <RBSwitch
-              checked={enabled}
-              onCheckedChange={(next: boolean) => {
-                setEnabled(next);
-                rb.toast({message: next ? "Plugin enabled" : "Plugin paused"});
-              }}
-            />
-          </div>
-        </header>
-
-        <section className="flex flex-col gap-4">
-          <RBTextField
-            label="Target name"
-            required
-            helperText="Used as the backend action target."
-          >
-            <RBTextInput
-              name="targetName"
-              value={targetName}
-              placeholder="target id"
-              handleChange={(value) => setTargetName(String(value))}
-            />
-          </RBTextField>
-
-          <RBTextField label="Select Grip">
-            <RBSelectBox  className="w-full" value={gripType} handleChange={setGripType}>
-              <Option value="A">A Grip</Option>
-              <Option value="B">B Grip</Option>
-            </RBSelectBox>
-          </RBTextField>
-
-          <div className="flex gap-4">
-            <RBTextField className="flex-1" label="Grip width" helperText="0-100 mm">
-              <RBTextInput
-                className="w-full"
-                name="gripWidth"
-                type="number"
-                value={gripWidth}
-                validate={(value: number) =>
-                  Math.max(0, Math.min(100, Number(value) || 0))
-                }
-                handleChange={(value) => setGripWidth(Number(value) || 0)}
-              />
-            </RBTextField>
-
-            <RBTextField className="flex-1" label="Speed" helperText={`${speed}%`}>
-              <div className="flex items-center px-2">
-                <RBSlider
-                  value={[speed]}
-                  min={0}
-                  max={100}
-                  step={5}
-                  onValueChange={(values: number[]) =>
-                    setSpeed(values[0] ?? 0)
-                  }
-                />
-              </div>
-            </RBTextField>
-          </div>
-        </section>
-
-        <section className="mb-4">
-          <RBTextField label="Run mode">
-            <div className="flex justify-between border-1 border-border-subtle rounded-sm p-2">
-            {MODE_OPTIONS.map((item) => (
-              <RBRadioBox
-                key={item.value}
-                name="mode"
-                checkValue={item.value}
-                value={mode}
-                handleChange={(value) => setMode(value as RunMode)}
-              >
-                {item.label}
-              </RBRadioBox>
-            ))}
-          </div>
-          </RBTextField>
-        </section>
-
-        <section className="mb-4">
-          <RBTextField label="Tasks">
-            <div className="flex justify-between border-1 border-border-subtle rounded-sm p-2">
-              {TASK_OPTIONS.map((item) => (
-                <RBCheckBox
-                  key={item.value}
-                  name="tasks"
-                  checkValue={item.value}
-                  value={tasks}
-                  handleChange={(value) =>
-                    setTasks(Array.isArray(value) ? value.map(String) : [])
-                  }
-                >
-                  {item.label}
-                </RBCheckBox>
-              ))}
-            </div>
-          </RBTextField>
-          
-        </section>
-
-        <RBTextField label="Memo">
-          <RBTextArea
-            name="memo"
-            value={memo}
-            maxLength={120}
-            rows={4}
-            handleChange={setMemo}
-          />
-        </RBTextField>
-
-        <footer className="grid grid-cols-2 gap-8 pt-4">
-          <RBLabelButton variant="outlined" onClick={publishPreview}>
-            Publish
-          </RBLabelButton>
-          <RBLabelButton onClick={runAction} disabled={!enabled}>
-            Run Action
-          </RBLabelButton>
-        </footer>
-      </div>
-    </div>
-  );
-}
+import { useMemo, useState } from "react";
+import {
+  RBCheckBox,
+  RBLabelButton,
+  RBRadioBox,
+  RBSelectBox,
+  RBSlider,
+  RBSwitch,
+  RBTextArea,
+  RBTextField,
+  RBTextInput,
+  Option
+} from "@rainbow-robotics/plugin-ui/react";
+import { useRb } from "@rainbow-robotics/plugin-ui/sdk";
+
+type RunMode = "inspect" | "assist" | "auto";
+
+const MODE_OPTIONS: Array<{ label: string; value: RunMode }> = [
+  { label: "Inspect", value: "inspect" },
+  { label: "Assist", value: "assist" },
+  { label: "Auto", value: "auto" },
+];
+
+const TASK_OPTIONS = [
+  { label: "Publish status", value: "publish" },
+  { label: "Run grip action", value: "grip" },
+  { label: "Save snapshot", value: "snapshot" },
+];
+
+// Export your UI as the default. The host mounts it (dev: with HMR).
+export default function App() {
+  const rb = useRb();
+  const [targetName, setTargetName] = useState("demo_target");
+  const [gripType, setGripType] = useState<string>();
+  const [gripWidth, setGripWidth] = useState(24);
+  const [speed, setSpeed] = useState(45);
+  const [mode, setMode] = useState<RunMode>("assist");
+  const [enabled, setEnabled] = useState(true);
+  const [tasks, setTasks] = useState<Array<string>>(["publish", "grip"]);
+  const [memo, setMemo] = useState("Use this area for operator notes.");
+
+  const payload = useMemo(
+    () => ({
+      targetName,
+      gripWidth,
+      speed,
+      mode,
+      enabled,
+      tasks,
+      memo,
+    }),
+    [targetName, gripWidth, speed, mode, enabled, tasks, memo],
+  );
+
+  const showRequestError = (error: unknown) => {
+    const message = error instanceof Error ? error.message : "Request failed";
+    rb.toast({ type: "danger", message });
+  };
+
+  const runAction = async () => {
+    try {
+      await rb.action("grip", payload);
+      rb.toast({ type: "success", message: `Sent ${targetName}` });
+    } catch (error) {
+      showRequestError(error);
+    }
+  };
+
+  const publishPreview = async () => {
+    try {
+      const isConfirm = await rb.confirm({
+        message: "Are you sure publish?",
+        buttonText: { yes: "confirm", no: "cancel" },
+      });
+
+      if (isConfirm) {
+        await rb.pub("event", payload);
+      }
+    } catch (error) {
+      showRequestError(error);
+    }
+  };
+
+  return (
+    <div className="max-h-[70vh] w-[420px] p-4 max-w-full overflow-y-auto bg-bg-elevated text-fg-default">
+      <div className="flex flex-col gap-5">
+        <header>
+          <div className="flex items-center justify-between gap-12">
+            <div>
+              <h2 className="typo-heading-xs-semibold">Demo Control</h2>
+              <p className="typo-body-xs2-normal text-fg-subtle">
+                Input patterns for Muscat plugin UIs
+              </p>
+            </div>
+            <RBSwitch
+              checked={enabled}
+              onCheckedChange={(next: boolean) => {
+                setEnabled(next);
+                rb.toast({message: next ? "Plugin enabled" : "Plugin paused"});
+              }}
+            />
+          </div>
+        </header>
+
+        <section className="flex flex-col gap-4">
+          <RBTextField
+            label="Target name"
+            required
+            helperText="Used as the backend action target."
+          >
+            <RBTextInput
+              name="targetName"
+              value={targetName}
+              placeholder="target id"
+              handleChange={(value) => setTargetName(String(value))}
+            />
+          </RBTextField>
+
+          <RBTextField label="Select Grip">
+            <RBSelectBox  className="w-full" value={gripType} handleChange={setGripType}>
+              <Option value="A">A Grip</Option>
+              <Option value="B">B Grip</Option>
+            </RBSelectBox>
+          </RBTextField>
+
+          <div className="flex gap-4">
+            <RBTextField className="flex-1" label="Grip width" helperText="0-100 mm">
+              <RBTextInput
+                className="w-full"
+                name="gripWidth"
+                type="number"
+                value={gripWidth}
+                validate={(value: number) =>
+                  Math.max(0, Math.min(100, Number(value) || 0))
+                }
+                handleChange={(value) => setGripWidth(Number(value) || 0)}
+              />
+            </RBTextField>
+
+            <RBTextField className="flex-1" label="Speed" helperText={`${speed}%`}>
+              <div className="flex items-center px-2">
+                <RBSlider
+                  value={[speed]}
+                  min={0}
+                  max={100}
+                  step={5}
+                  onValueChange={(values: number[]) =>
+                    setSpeed(values[0] ?? 0)
+                  }
+                />
+              </div>
+            </RBTextField>
+          </div>
+        </section>
+
+        <section className="mb-4">
+          <RBTextField label="Run mode">
+            <div className="flex justify-between border-1 border-border-subtle rounded-sm p-2">
+            {MODE_OPTIONS.map((item) => (
+              <RBRadioBox
+                key={item.value}
+                name="mode"
+                checkValue={item.value}
+                value={mode}
+                handleChange={(value) => setMode(value as RunMode)}
+              >
+                {item.label}
+              </RBRadioBox>
+            ))}
+          </div>
+          </RBTextField>
+        </section>
+
+        <section className="mb-4">
+          <RBTextField label="Tasks">
+            <div className="flex justify-between border-1 border-border-subtle rounded-sm p-2">
+              {TASK_OPTIONS.map((item) => (
+                <RBCheckBox
+                  key={item.value}
+                  name="tasks"
+                  checkValue={item.value}
+                  value={tasks}
+                  handleChange={(value) =>
+                    setTasks(Array.isArray(value) ? value.map(String) : [])
+                  }
+                >
+                  {item.label}
+                </RBCheckBox>
+              ))}
+            </div>
+          </RBTextField>
+          
+        </section>
+
+        <RBTextField label="Memo">
+          <RBTextArea
+            name="memo"
+            value={memo}
+            maxLength={120}
+            rows={4}
+            handleChange={setMemo}
+          />
+        </RBTextField>
+
+        <footer className="grid grid-cols-2 gap-8 pt-4">
+          <RBLabelButton variant="outlined" onClick={publishPreview}>
+            Publish
+          </RBLabelButton>
+          <RBLabelButton onClick={runAction} disabled={!enabled}>
+            Run Action
+          </RBLabelButton>
+        </footer>
+      </div>
+    </div>
+  );
+}

package/cli/templates/common/ui/style.css

@@ -1,6 +1,6 @@
-@layer theme, utilities;
-
-@import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities);
-
-@source "./**/*.{ts,tsx}";
+@layer theme, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+@source "./**/*.{ts,tsx}";

package/cli/templates/common/vite.config.ts

@@ -1,10 +1,10 @@
-import { defineConfig } from "vite";
-import tailwindcss from "@tailwindcss/vite";
-import { muscat } from "@rainbow-robotics/muscat-plugin-kit/vite";
-
-// The muscat() preset wires react-refresh, ui/ entry discovery, and marks the
-// host-provided runtime (plugin-ui, react) as external. Add your own plugins or
-// overrides here as needed.
-export default defineConfig({
-  plugins: [tailwindcss(), muscat()],
-});
+import { defineConfig } from "vite";
+import tailwindcss from "@tailwindcss/vite";
+import { muscat } from "@rainbow-robotics/muscat-plugin-kit/vite";
+
+// The muscat() preset wires react-refresh, ui/ entry discovery, and marks the
+// host-provided runtime (plugin-ui, react) as external. Add your own plugins or
+// overrides here as needed.
+export default defineConfig({
+  plugins: [tailwindcss(), muscat()],
+});

package/cli/templates/cpp/cpp/main.cpp

@@ -1,73 +1,73 @@
-// __PLUGIN_NAME__ — C++ plugin back end.
-//
-// The Rainbow Robotics C++ SDK (apt: rainbow-rb-sdk-dev) is installed in the
-// dev container and linked via CMake (rb_sdk::rb_sdk). Headers live under
-// <rainbow/rb_sdk/...>:
-//   - plugin/rb_plugin.hpp               rb_plugin::RBPluginCall — plugin UI <-> backend
-//                                        (serve/subscribe/publish) and external endpoints (router)
-//   - manipulate/rb_manipulate_sdk.hpp   RBManipulateSDK — control the robot
-//   - program/plugin_program_context.hpp rb_plugin::PluginProgramContext —
-//                                        program.panel commands (done/pause/stop,
-//                                        program variables)
-
-#include <rainbow/rb_sdk/manipulate/rb_manipulate_sdk.hpp>
-#include <rainbow/rb_sdk/plugin/rb_plugin.hpp>
-
-#include <nlohmann/json.hpp>
-
-#include <chrono>
-#include <cstdlib>
-#include <iostream>
-#include <string>
-#include <thread>
-
-using nlohmann::json;
-using rb_plugin::RBPluginCall;
-
-int main() {
-  const std::string name = "__PLUGIN_NAME__";
-
-  // Remote dev: connect before registering handlers (connect() reopens the session).
-  RBManipulateSDK manipulate;
-  const char* host = std::getenv("MUSCAT_ROBOT_HOST");
-  const char* token = std::getenv("MUSCAT_ROBOT_TOKEN");
-  if (host && token) manipulate.connect({.token = token, .host = host});
-
-  // plugin id comes from RB_PLUGIN_ID.
-  auto plugin = RBPluginCall::get_instance(RBPluginCall::resolve_plugin_id(std::nullopt));
-
-  // --- Plugin UI <-> backend (not reachable from outside Muscat) ---
-
-  // UI: await rb.action("grip", { width })
-  plugin->serve("grip", [&](const json& payload) {
-    const int width = payload.is_object() ? payload.value("width", 20) : 20;
-    std::cout << "[" << name << "] grip requested: width=" << width << std::endl;
-    plugin->publish("state", {{"ready", true}, {"last_grip_width", width}});  // -> rb.sub("state")
-    return json{{"ok", true}, {"width", width}};
-  });
-
-  // UI: rb.pub("event", ...)
-  auto event_sub = plugin->subscribe("event", [&](const std::string&, const json& payload) {
-    std::cout << "[" << name << "] event: " << payload.dump() << std::endl;
-  });
-
-  // --- External endpoints (REST / Socket.IO / TCP / MQTT / WebRTC) ---
-  //   curl -X POST http://<robot>/common/plugin/<plugin_id>/hello -d '{"name":"kim"}'
-  plugin->router().on("/hello", [](const json& payload, const json& meta) {
-    const std::string who = payload.is_object() ? payload.value("name", std::string("there")) : "there";
-    return json{{"msg", "hi " + who}, {"via", meta.value("transport", std::string())}};
-  });
-
-  // Example: robot control (not called automatically — add safety checks first).
-  //   IPC::MoveInput_TargetT t; t.tar_values = {0, 0, 0, 0, 0, 0};
-  //   manipulate.move.call_move_j("C500920", t);
-
-  plugin->publish("state", {{"ready", true}, {"plugin", name}});
-  std::cout << "[" << name << "] backend ready" << std::endl;
-
-  // Keep the process alive.
-  while (true) {
-    std::this_thread::sleep_for(std::chrono::seconds(1));
-  }
-  return 0;
-}
+// __PLUGIN_NAME__ — C++ plugin back end.
+//
+// The Rainbow Robotics C++ SDK (apt: rainbow-rb-sdk-dev) is installed in the
+// dev container and linked via CMake (rb_sdk::rb_sdk). Headers live under
+// <rainbow/rb_sdk/...>:
+//   - plugin/rb_plugin.hpp               rb_plugin::RBPluginCall — plugin UI <-> backend
+//                                        (serve/subscribe/publish) and external endpoints (router)
+//   - manipulate/rb_manipulate_sdk.hpp   RBManipulateSDK — control the robot
+//   - program/plugin_program_context.hpp rb_plugin::PluginProgramContext —
+//                                        program.panel commands (done/pause/stop,
+//                                        program variables)
+
+#include <rainbow/rb_sdk/manipulate/rb_manipulate_sdk.hpp>
+#include <rainbow/rb_sdk/plugin/rb_plugin.hpp>
+
+#include <nlohmann/json.hpp>
+
+#include <chrono>
+#include <cstdlib>
+#include <iostream>
+#include <string>
+#include <thread>
+
+using nlohmann::json;
+using rb_plugin::RBPluginCall;
+
+int main() {
+  const std::string name = "__PLUGIN_NAME__";
+
+  // Remote dev: connect before registering handlers (connect() reopens the session).
+  RBManipulateSDK manipulate;
+  const char* host = std::getenv("MUSCAT_ROBOT_HOST");
+  const char* token = std::getenv("MUSCAT_ROBOT_TOKEN");
+  if (host && token) manipulate.connect({.token = token, .host = host});
+
+  // plugin id comes from RB_PLUGIN_ID.
+  auto plugin = RBPluginCall::get_instance(RBPluginCall::resolve_plugin_id(std::nullopt));
+
+  // --- Plugin UI <-> backend (not reachable from outside Muscat) ---
+
+  // UI: await rb.action("grip", { width })
+  plugin->serve("grip", [&](const json& payload) {
+    const int width = payload.is_object() ? payload.value("width", 20) : 20;
+    std::cout << "[" << name << "] grip requested: width=" << width << std::endl;
+    plugin->publish("state", {{"ready", true}, {"last_grip_width", width}});  // -> rb.sub("state")
+    return json{{"ok", true}, {"width", width}};
+  });
+
+  // UI: rb.pub("event", ...)
+  auto event_sub = plugin->subscribe("event", [&](const std::string&, const json& payload) {
+    std::cout << "[" << name << "] event: " << payload.dump() << std::endl;
+  });
+
+  // --- External endpoints (REST / Socket.IO / TCP / MQTT / WebRTC) ---
+  //   curl -X POST http://<robot>/common/plugin/<plugin_id>/hello -d '{"name":"kim"}'
+  plugin->router().on("/hello", [](const json& payload, const json& meta) {
+    const std::string who = payload.is_object() ? payload.value("name", std::string("there")) : "there";
+    return json{{"msg", "hi " + who}, {"via", meta.value("transport", std::string())}};
+  });
+
+  // Example: robot control (not called automatically — add safety checks first).
+  //   IPC::MoveInput_TargetT t; t.tar_values = {0, 0, 0, 0, 0, 0};
+  //   manipulate.move.call_move_j("C500920", t);
+
+  plugin->publish("state", {{"ready", true}, {"plugin", name}});
+  std::cout << "[" << name << "] backend ready" << std::endl;
+
+  // Keep the process alive.
+  while (true) {
+    std::this_thread::sleep_for(std::chrono::seconds(1));
+  }
+  return 0;
+}