@readymadeit/mcp 0.0.0-stage → 0.1.0

package/bundle/hkp-frontend/src/runtime/browser/services/MapUI.tsx

@@ -0,0 +1,334 @@
+import { useEffect, useMemo, useState } from "react";
+import { Braces, SquarePlay, Table2 } from "lucide-react";
+
+import { ServiceUIProps } from "hkp-frontend/src/types";
+import ServiceUI, {
+  needsUpdate,
+} from "hkp-frontend/src/ui-components/service/ServiceUI";
+
+import PillRadioGroup from "hkp-frontend/src/ui-components/PillRadioGroup";
+import MappingTable, { Template } from "../../../components/MappingTable";
+import MenuIcon from "hkp-frontend/src/ui-components/MenuIcon";
+import { globalScopeFunctions } from "hkp-frontend/src/runtime/browser/services/base/eval.ts";
+import SelectorField from "hkp-frontend/src/components/shared/SelectorField";
+
+enum Mode {
+  REPLACE = "replace",
+  OVERWRITE = "overwrite",
+  ADD = "add",
+}
+
+enum EditorMode {
+  TABLE = "table",
+  JSON = "json",
+}
+
+const ADD_ITEM_ACTION = "__add_item__";
+const REMOVE_ITEM_ACTION = "__remove_item__";
+
+function isObjectTemplate(template: any): template is Template {
+  return !!template && typeof template === "object" && !Array.isArray(template);
+}
+
+export default function MapUI(props: ServiceUIProps) {
+  const { service } = props;
+
+  const [template, setTemplate] = useState<any>({});
+  const [structuredTemplateText, setStructuredTemplateText] = useState("");
+  const [structuredTemplateError, setStructuredTemplateError] = useState("");
+  const [editorMode, setEditorMode] = useState<EditorMode>(EditorMode.TABLE);
+  const [selectedArrayIndex, setSelectedArrayIndex] = useState(0);
+  const [mode, setMode] = useState<Mode>(Mode.REPLACE);
+  const [isSensingMode, setIsSensingMode] = useState(false);
+  // What the last pass said about itself: notified by the service in every
+  // runtime, never part of the state a board saves.
+  const [error, setError] = useState("");
+  const [warnings, setWarnings] = useState<string[]>([]);
+
+  const editableItems = useMemo(() => {
+    if (isObjectTemplate(template)) {
+      return [template as Template];
+    }
+
+    if (Array.isArray(template) && template.every(isObjectTemplate)) {
+      return template as Template[];
+    }
+
+    return null;
+  }, [template]);
+
+  useEffect(() => {
+    if (!editableItems) {
+      setSelectedArrayIndex(0);
+      return;
+    }
+
+    if (editableItems.length === 0) {
+      setSelectedArrayIndex(0);
+      return;
+    }
+
+    setSelectedArrayIndex((idx) => Math.min(idx, editableItems.length - 1));
+  }, [editableItems]);
+
+  const updateState = (newState: any) => {
+    if (needsUpdate(newState.mode, mode)) {
+      setMode(newState.mode);
+    }
+
+    if (needsUpdate(newState.template, template)) {
+      setTemplate(newState.template);
+      if (
+        Array.isArray(newState.template) ||
+        typeof newState.template === "object"
+      ) {
+        setStructuredTemplateText(JSON.stringify(newState.template, null, 2));
+      }
+      setStructuredTemplateError("");
+    }
+
+    if (needsUpdate(newState.sensingMode, isSensingMode)) {
+      setIsSensingMode(newState.sensingMode);
+    }
+
+    if (typeof newState.error === "string") {
+      setError(newState.error);
+    }
+
+    if (Array.isArray(newState.warnings)) {
+      setWarnings(newState.warnings);
+    }
+  };
+
+  const onInit = (initialState: any) => updateState(initialState);
+
+  const onNotification = (notification: any) => updateState(notification);
+
+  const onModeChange = (newMode: string) => {
+    setMode(newMode as Mode);
+    service.configure({ mode: newMode as Mode });
+  };
+
+  const mappingOptions = [Mode.REPLACE, Mode.OVERWRITE, Mode.ADD];
+
+  const onEditorModeChange = (nextMode: EditorMode) => {
+    setEditorMode(nextMode);
+  };
+
+  const onToggleSensingMode = () => {
+    service.configure({ sensingMode: !isSensingMode });
+  };
+
+  const onStructuredTemplateBlur = () => {
+    try {
+      const parsed = JSON.parse(structuredTemplateText);
+      service.configure({ template: parsed });
+      setStructuredTemplateError("");
+    } catch (err: any) {
+      setStructuredTemplateError(err?.message || "Invalid JSON");
+    }
+  };
+
+  const persistItems = (items: Template[]) => {
+    const sanitized = items.length > 0 ? items : [{}];
+    const nextTemplate = sanitized.length === 1 ? sanitized[0] : sanitized;
+    setTemplate(nextTemplate);
+    setStructuredTemplateText(JSON.stringify(nextTemplate, null, 2));
+    service.configure({ template: nextTemplate });
+  };
+
+  const onArrayItemTemplateChanged = (newTemplate: Template) => {
+    if (!editableItems) {
+      return;
+    }
+
+    const next = [...editableItems];
+    next[selectedArrayIndex] = newTemplate;
+    persistItems(next);
+  };
+
+  const addItem = () => {
+    const next = [...(editableItems ?? [{}]), {}];
+    setSelectedArrayIndex(next.length - 1);
+    persistItems(next);
+  };
+
+  const removeCurrentItem = () => {
+    if (!editableItems || editableItems.length === 0) {
+      return;
+    }
+
+    if (editableItems.length === 1) {
+      const next = [{}];
+      setSelectedArrayIndex(0);
+      persistItems(next);
+      return;
+    }
+
+    const next = editableItems.filter(
+      (_: any, idx: number) => idx !== selectedArrayIndex,
+    );
+    setSelectedArrayIndex((idx) => Math.max(0, Math.min(idx, next.length - 1)));
+    persistItems(next);
+  };
+
+  const onItemSelectorChange = (value: string) => {
+    if (value === ADD_ITEM_ACTION) {
+      addItem();
+      return;
+    }
+
+    if (value === REMOVE_ITEM_ACTION) {
+      removeCurrentItem();
+      return;
+    }
+
+    setSelectedArrayIndex(Number(value));
+  };
+
+  const itemSelectorOptions = useMemo(() => {
+    if (!editableItems) {
+      return {} as { [key: string]: string };
+    }
+
+    const options: { [key: string]: string } = {};
+    editableItems.forEach((_: any, idx: number) => {
+      options[String(idx)] = String(idx);
+    });
+    options[ADD_ITEM_ACTION] = "+ Add new item";
+    options[REMOVE_ITEM_ACTION] = "- Remove current item";
+    return options;
+  }, [editableItems]);
+
+  const customMenuEntries = [
+    {
+      name: editorMode === EditorMode.TABLE ? "Editor: JSON" : "Editor: Table",
+      icon:
+        editorMode === EditorMode.TABLE ? (
+          <MenuIcon icon={Braces} />
+        ) : (
+          <MenuIcon icon={Table2} />
+        ),
+      onClick: () =>
+        onEditorModeChange(
+          editorMode === EditorMode.TABLE ? EditorMode.JSON : EditorMode.TABLE,
+        ),
+    },
+    {
+      name: "Inject Data",
+      icon: <MenuIcon icon={SquarePlay} />,
+      onClick: () => {
+        service.configure({
+          command: {
+            action: "inject",
+            params: {},
+          },
+        });
+      },
+    },
+  ];
+
+  return (
+    <ServiceUI
+      {...props}
+      initialSize={{ width: 380, height: undefined }}
+      onInit={onInit}
+      onNotification={onNotification}
+      customMenuEntries={customMenuEntries}
+    >
+      <div
+        style={{
+          width: "100%",
+          overflow: "auto",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <PillRadioGroup
+          title="Mode"
+          options={mappingOptions}
+          value={mode}
+          onChange={onModeChange}
+        />
+
+        {editorMode === EditorMode.JSON ? (
+          <div className="mb-2 flex flex-col gap-2">
+            <div
+              className="font-sans-clean text-[11px] font-semibold tracking-[0.06em] uppercase"
+              style={{ color: "var(--text-dim)" }}
+            >
+              Mapping (Structured JSON)
+            </div>
+            <textarea
+              className="w-full min-h-[180px] rounded-md border border-gray-300 bg-white p-2 font-mono text-xs"
+              value={structuredTemplateText}
+              onChange={(e) => setStructuredTemplateText(e.target.value)}
+              onBlur={onStructuredTemplateBlur}
+              spellCheck={false}
+            />
+            {structuredTemplateError && (
+              <div className="text-xs text-red-600">
+                {structuredTemplateError}
+              </div>
+            )}
+          </div>
+        ) : editableItems ? (
+          <div className="mb-2 flex flex-col gap-2">
+            {editableItems.length > 0 ? (
+              <MappingTable
+                className="mb-2"
+                id={`${service.uuid}-array-${selectedArrayIndex}`}
+                title="Mapping"
+                titleTrailing={
+                  <SelectorField
+                    value={String(selectedArrayIndex)}
+                    options={itemSelectorOptions}
+                    className="items-center"
+                    triggerClassName="h-[24px] min-h-[24px] px-3 py-0 rounded-md"
+                    disabled={editableItems.length === 0}
+                    onChange={({ value }) => onItemSelectorChange(value)}
+                  />
+                }
+                tooltip="Edit one output mapping item"
+                sensingMode={isSensingMode}
+                onToggleSensingMode={onToggleSensingMode}
+                template={editableItems[selectedArrayIndex] || {}}
+                onTemplateChanged={onArrayItemTemplateChanged}
+                autoCompleteValueSuggestions={{
+                  params: "the incoming data",
+                  ...globalScopeFunctions,
+                }}
+              />
+            ) : (
+              <div
+                className="text-left py-1 text-[11.5px] italic font-sans-clean"
+                style={{ color: "var(--text-dim)" }}
+              >
+                No mapping items yet.
+              </div>
+            )}
+          </div>
+        ) : (
+          <div
+            className="text-left py-1 text-[11.5px] italic font-sans-clean"
+            style={{ color: "var(--text-dim)" }}
+          >
+            Current template cannot be rendered as mapping rows. Use JSON
+            editor.
+          </div>
+        )}
+
+        {error && (
+          <div role="alert" className="text-xs text-red-600 break-words">
+            {error}
+          </div>
+        )}
+        {warnings.map((warning) => (
+          <div key={warning} className="text-xs text-amber-600 break-words">
+            {warning}
+          </div>
+        ))}
+      </div>
+    </ServiceUI>
+  );
+}

package/bundle/hkp-frontend/src/runtime/browser/services/MapUIModeAssist.tsx

@@ -0,0 +1,61 @@
+import JSONCode from "hkp-frontend/src/ui-components/JSONCode";
+import SimpleTable from "hkp-frontend/src/ui-components/SimpleTable";
+
+export default function MapUIModeAssist() {
+  return (
+    <div className="flex flex-col font-serif text-[14px] tracking-wider overflow-y-scroll">
+      <div className="mb-4">
+        The Mode service supports the following three modes:
+      </div>
+      <div className="w-[80%] px-8">
+        <SimpleTable
+          columns={["Mode", "Behavior"]}
+          rows={[
+            [
+              "Replace",
+              "Replaces the whole incoming data with the defined mapping.",
+            ],
+            [
+              "Overwrite",
+              "Overwrites properties of the incoming data, with the defined mapped, if the property in the incoming data as well.",
+            ],
+            [
+              "Add",
+              "Never overwrites properties from the incoming data, but adds the defined mapped properties to the incoming data.",
+            ],
+          ]}
+        />
+      </div>
+      <div className="flex flex-col gap-2 py-6 font-serif text-[14px] w-[80%]">
+        <div>
+          Typically you use the Map service to adapt incoming, structured JSON
+          data, to generate a different shape. By this you can select, remove
+          others, or rename properties freely. You do this by defining mapping
+          properties. Each mapping row defines a property that will be part in
+          the transformed data.
+        </div>
+        <div>
+          With the three modes you are able to control the way how incoming
+          properties are handled on conflicts. Note that you can add dynamic and
+          static mappings. The key of a dynamic mapping must end with a `=`
+          sign. Further you can access the incomging data via the variable name
+          `params`. For example,
+          <SimpleTable
+            className="w-[50%] m-auto"
+            columns={["Key", "Value"]}
+            rows={[
+              ["dynamicValue=", "params.name + params.age"],
+              ["staticValue", "42"],
+            ]}
+          />
+          <div className="flex flex-col gap-4 mt-2">
+            For the following incoming data:{" "}
+            <JSONCode value={{ name: "Edgar", age: 42 }} />
+            the Map service will generate the following output data:
+            <JSONCode value={{ dynamicValue: "Edgar42", staticValue: 42 }} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/bundle/hkp-frontend/src/runtime/browser/services/MatchFilter.ts

@@ -0,0 +1,11 @@
+import MatchFilterDescriptor from "hkp-frontend/src/runtime/browser/services/base/MatchFilter";
+import { AppImpl, ServiceClass } from "hkp-frontend/src/types";
+
+const descriptor = {
+  serviceName: MatchFilterDescriptor.serviceName,
+  serviceId: MatchFilterDescriptor.serviceId,
+  create: (app: AppImpl, board: string, service: ServiceClass, id: string) =>
+    new MatchFilterDescriptor.service(app, board, service, id),
+};
+
+export default descriptor;

package/bundle/hkp-frontend/src/runtime/browser/services/MicrophoneMonitor.ts

@@ -0,0 +1,190 @@
+import { AppInstance, ServiceClass } from "hkp-frontend/src/types";
+import ServiceBase from "./ServiceBase";
+import MicrophoneMonitorUI from "./MicrophoneMonitorUI";
+
+const serviceId = "hookup.to/service/microphone-monitor";
+const serviceName = "Microphone Monitor";
+
+type State = {
+  interval: number;
+  running: boolean;
+  status: string | null;
+  level: number | null;
+  levelDb: number | null;
+};
+
+type TimeDomainDataBuffer = Parameters<
+  AnalyserNode["getFloatTimeDomainData"]
+>[0];
+
+class MicrophoneMonitor extends ServiceBase<State> {
+  private audioContext: AudioContext | null = null;
+  private analyser: AnalyserNode | null = null;
+  private stream: MediaStream | null = null;
+  private intervalId: ReturnType<typeof setInterval> | null = null;
+  private dataArray: TimeDomainDataBuffer | null = null;
+
+  constructor(
+    app: AppInstance,
+    board: string,
+    descriptor: ServiceClass,
+    id: string,
+  ) {
+    super(app, board, descriptor, id, {
+      interval: 500,
+      running: false,
+      status: null,
+      level: null,
+      levelDb: null,
+    });
+  }
+
+  private async startCapture(): Promise<void> {
+    if (this.audioContext) {
+      return;
+    }
+
+    if (!navigator.mediaDevices?.getUserMedia) {
+      const msg = "Microphone requires a secure context (HTTPS or localhost)";
+      this.state.status = `error: ${msg}`;
+      this.app.notify(this, { status: this.state.status });
+      throw new Error(msg);
+    }
+
+    this.state.status = "requesting mic...";
+    this.app.notify(this, { status: this.state.status });
+
+    try {
+      this.stream = await navigator.mediaDevices.getUserMedia({
+        audio: true,
+        video: false,
+      });
+      this.audioContext = new AudioContext();
+      this.analyser = this.audioContext.createAnalyser();
+      this.analyser.fftSize = 2048;
+
+      const source = this.audioContext.createMediaStreamSource(this.stream);
+      source.connect(this.analyser);
+
+      this.dataArray = new Float32Array(this.analyser.fftSize);
+
+      this.state.status = "active";
+      this.app.notify(this, { status: this.state.status });
+    } catch (err: any) {
+      this.state.status = `error: ${err.message}`;
+      this.app.notify(this, { status: this.state.status });
+      throw err;
+    }
+  }
+
+  private measureLevel(): { level: number; levelDb: number } {
+    if (!this.analyser || !this.dataArray) {
+      return { level: 0, levelDb: -Infinity };
+    }
+
+    this.analyser.getFloatTimeDomainData(this.dataArray);
+
+    let sum = 0;
+    for (let i = 0; i < this.dataArray.length; i++) {
+      sum += this.dataArray[i] * this.dataArray[i];
+    }
+    const rms = Math.sqrt(sum / this.dataArray.length);
+    const levelDb = 20 * Math.log10(Math.max(rms, 1e-10));
+
+    return { level: rms, levelDb };
+  }
+
+  private startMeasuring(): void {
+    this.stopMeasuring();
+
+    this.intervalId = setInterval(() => {
+      const { level, levelDb } = this.measureLevel();
+      this.state.level = level;
+      this.state.levelDb = levelDb;
+      this.app.notify(this, { level, levelDb });
+      this.app.next(this, { level, levelDb, timestamp: Date.now() });
+    }, this.state.interval);
+
+    this.state.running = true;
+    this.app.notify(this, { running: true });
+  }
+
+  private stopMeasuring(): void {
+    if (this.intervalId !== null) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+  }
+
+  private stopCapture(): void {
+    this.stopMeasuring();
+    if (this.stream) {
+      this.stream.getTracks().forEach((t) => t.stop());
+      this.stream = null;
+    }
+    if (this.audioContext) {
+      this.audioContext.close();
+      this.audioContext = null;
+    }
+    this.analyser = null;
+    this.dataArray = null;
+    this.state.running = false;
+    this.state.status = null;
+    this.app.notify(this, { running: false, status: null });
+  }
+
+  async configure(config: any) {
+    const { interval, running, start, stop } = config;
+
+    const doStop = stop || (this.state.running && running === false);
+    let doStart = start || running === true;
+
+    if (interval !== undefined && interval !== this.state.interval) {
+      this.state.interval = interval;
+      this.app.notify(this, { interval });
+      if (this.state.running) {
+        // restart interval with new period without re-requesting mic
+        this.stopMeasuring();
+        doStart = true;
+      }
+    }
+
+    if (doStop) {
+      this.stopCapture();
+      return this.state;
+    }
+
+    if (doStart) {
+      try {
+        await this.startCapture();
+        this.startMeasuring();
+      } catch {
+        // error already notified in startCapture
+      }
+    }
+
+    return this.state;
+  }
+
+  process(params: any) {
+    return params;
+  }
+
+  destroy(): void {
+    this.stopCapture();
+  }
+}
+
+export default {
+  serviceName,
+  serviceId,
+  create(
+    app: AppInstance,
+    board: string,
+    descriptor: ServiceClass,
+    id: string,
+  ) {
+    return new MicrophoneMonitor(app, board, descriptor, id);
+  },
+  createUI: MicrophoneMonitorUI,
+};

package/bundle/hkp-frontend/src/runtime/browser/services/MicrophoneMonitorUI.tsx

@@ -0,0 +1,94 @@
+import { useState } from "react";
+
+import { ServiceUIProps } from "hkp-frontend/src/types";
+import ServiceUI, {
+  needsUpdate,
+} from "hkp-frontend/src/ui-components/service/ServiceUI";
+import { Button } from "hkp-frontend/src/ui-components/primitives/button";
+import Slider from "hkp-frontend/src/ui-components/Slider";
+
+export default function MicrophoneMonitorUI(props: ServiceUIProps) {
+  const { service } = props;
+
+  const [running, setRunning] = useState(false);
+  const [interval, setIntervalMs] = useState(500);
+  const [status, setStatus] = useState<string | null>(null);
+  const [levelDb, setLevelDb] = useState<number | null>(null);
+  const [_level, setLevel] = useState<number | null>(null);
+
+  const update = (state: any) => {
+    if (needsUpdate(state.running, running)) {
+      setRunning(!!state.running);
+    }
+    if (needsUpdate(state.interval, interval)) {
+      setIntervalMs(state.interval);
+    }
+    if (state.status !== undefined) {
+      setStatus(state.status);
+    }
+    if (state.levelDb !== undefined) {
+      setLevelDb(state.levelDb);
+    }
+    if (state.level !== undefined) {
+      setLevel(state.level);
+    }
+  };
+
+  // Map dB range [-60, 0] to [0, 100]%
+  const levelPercent =
+    levelDb !== null ? Math.min(Math.max((levelDb + 60) / 60, 0), 1) * 100 : 0;
+  const dbDisplay = levelDb !== null ? `${levelDb.toFixed(1)} dB` : "--";
+
+  return (
+    <ServiceUI
+      {...props}
+      initialSize={{ width: 278, height: 185 }}
+      service={service}
+      onInit={update}
+      onNotification={update}
+    >
+      <div className="flex flex-col gap-3 h-full">
+        <Slider
+          title="Interval (ms)"
+          value={interval}
+          min={100}
+          max={2000}
+          onChange={(v: number) => {
+            setIntervalMs(v);
+            service.configure({ interval: v });
+          }}
+        />
+        <div className="flex gap-2">
+          <Button
+            className="hkp-svc-btn w-full"
+            variant="outline"
+            onClick={() => service.configure({ start: true, interval })}
+            disabled={running}
+          >
+            Start
+          </Button>
+          <Button
+            className="hkp-svc-btn w-full"
+            variant="outline"
+            onClick={() => service.configure({ stop: true })}
+            disabled={!running}
+          >
+            Stop
+          </Button>
+        </div>
+        <div className="flex flex-col gap-1">
+          <div className="h-3 bg-muted rounded overflow-hidden">
+            <div
+              className="h-full bg-primary transition-all duration-100"
+              style={{ width: `${levelPercent}%` }}
+            />
+          </div>
+          <div className="flex justify-between text-xs text-muted-foreground">
+            <span>{dbDisplay}</span>
+            <span>{status ?? (running ? "monitoring" : "stopped")}</span>
+          </div>
+        </div>
+      </div>
+    </ServiceUI>
+  );
+}

package/bundle/hkp-frontend/src/runtime/browser/services/Monitor.tsx

@@ -0,0 +1,15 @@
+import { AppImpl, ServiceClass } from "hkp-frontend/src/types";
+
+import MonitorDescriptor from "hkp-frontend/src/runtime/browser/services/base/Monitor";
+import MonitorUI from "./MonitorUI";
+
+const { serviceName, serviceId, service: Monitor } = MonitorDescriptor;
+const descriptor = {
+  serviceName,
+  serviceId,
+  create: (app: AppImpl, board: string, descriptor: ServiceClass, id: string) =>
+    new Monitor(app, board, descriptor, id),
+  createUI: MonitorUI,
+};
+
+export default descriptor;