@readymadeit/mcp 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,134 @@
+import { useRef, useState } from "react";
+
+import Editor, { EditorHandle } from "../../../components/shared/Editor/index";
+import ServiceUI, {
+  needsUpdate,
+} from "hkp-frontend/src/ui-components/service/ServiceUI";
+import { ServiceInstance, ServiceUIProps } from "hkp-frontend/src/types";
+import { Size } from "hkp-frontend/src/common";
+import { HealthStatus } from "./Hacker";
+
+export default function HackerUI(props: ServiceUIProps) {
+  const [buffer, setBuffer] = useState("");
+  const [healthStatus, setHealthStatus] = useState<HealthStatus>({
+    error: false,
+  });
+  const [size, setSize] = useState([300, 150]);
+
+  const onInit = (service: ServiceInstance) => {
+    const { buffer, size } = service;
+    if (buffer !== undefined) {
+      setBuffer(buffer);
+    }
+
+    if (size !== undefined) {
+      setSize([size[0], size[1]]);
+    }
+  };
+
+  const onNotification = (notification: any) => {
+    console.log("HackerUI.onNotification", notification);
+    if (needsUpdate(notification.healthStatus, healthStatus)) {
+      setHealthStatus(notification.healthStatus);
+    }
+
+    if (needsUpdate(notification.size, size)) {
+      setSize(notification.size);
+    }
+    if (needsUpdate(notification.buffer, buffer)) {
+      setBuffer(notification.buffer);
+    }
+  };
+
+  const onResize = (
+    service: ServiceInstance,
+    { width = 0, height = 0 }: Size
+  ) => {
+    const resized = { size: [Number(width), Number(height)] };
+    service.configure(resized);
+  };
+
+  const onChange = (buffer: string) => props.service.configure({ buffer });
+
+  return (
+    <ServiceUI
+      {...props}
+      onNotification={onNotification}
+      onInit={onInit}
+      resizable={true}
+      onResize={onResize}
+    >
+      <HackerUIPanel
+        buffer={buffer}
+        healthStatus={healthStatus}
+        onChange={onChange}
+      />
+    </ServiceUI>
+  );
+}
+
+type Props = {
+  buffer: string;
+  healthStatus: { error: boolean; message?: string };
+  title?: string;
+  onChange: (updatedBuffer: string) => void;
+};
+export function HackerUIPanel({
+  buffer,
+  healthStatus,
+  title = "Health",
+  onChange,
+}: Props) {
+  const editorRef = useRef<EditorHandle>(null);
+  return (
+    <div
+      className="select-none"
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+      }}
+    >
+      <div className="flex items-center">
+        <div>{title}</div>
+        <div
+          className="ml-2"
+          style={{
+            fontFamily: "Arial",
+            fontSize: "30px",
+            color: healthStatus.error ? "red" : "green",
+          }}
+        >
+          •
+        </div>
+        <div
+          className="ml-2"
+          style={{
+            color: "orange",
+            textTransform: "none",
+          }}
+        >
+          {healthStatus.error && `[${healthStatus.message}]`}
+        </div>
+        <div
+          style={{
+            marginLeft: "auto",
+            display: !healthStatus.error ? "none" : undefined,
+          }}
+        >
+          <button className="hkp-svc-btn" onClick={() => onChange(editorRef.current?.getValue())}>
+            fixed
+          </button>
+        </div>
+      </div>
+      <div className="w-full h-full mb-2">
+        <Editor
+          ref={editorRef}
+          value={buffer}
+          language="javascript"
+          onChange={(buffer) => buffer && onChange(buffer)}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,134 @@
+import { AppInstance, ServiceClass } from "hkp-frontend/src/types";
+import ServiceBase from "./ServiceBase";
+import HashUI from "./HashUI";
+
+/**
+ * Service Documentation
+ * Service ID: hookup.to/service/hash
+ * Service Name: Hash
+ * Input:  any — stringified before hashing (Uint8Array/ArrayBuffer hashed directly)
+ * Output: hex or base64 string
+ * Config: method ("sha-256" | "sha-384" | "sha-512" | "sha-1" | "sha-256p"),
+ *         encoding ("hex" | "base64")
+ *
+ * sha-256p is a progressive mode: chunks are buffered and the final hash is
+ * produced when configure({ finalize: true }) is called, emitting the result
+ * via app.next.
+ */
+
+const serviceId = "hookup.to/service/hash";
+const serviceName = "Hash";
+
+const METHODS = ["sha-256", "sha-256p", "sha-1", "sha-384", "sha-512"] as const;
+type Method = (typeof METHODS)[number];
+const ENCODINGS = ["hex", "base64"] as const;
+type Encoding = (typeof ENCODINGS)[number];
+
+type State = {
+  methods: readonly string[];
+  method: Method;
+  encodings: readonly string[];
+  encoding: Encoding;
+};
+
+// SubtleCrypto algorithm name for each method
+const ALGO: Partial<Record<Method, string>> = {
+  "sha-256":  "SHA-256",
+  "sha-256p": "SHA-256",
+  "sha-1":    "SHA-1",
+  "sha-384":  "SHA-384",
+  "sha-512":  "SHA-512",
+};
+
+function toHex(buffer: ArrayBuffer): string {
+  return Array.from(new Uint8Array(buffer))
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+}
+
+function toBase64(buffer: ArrayBuffer): string {
+  return btoa(String.fromCharCode(...new Uint8Array(buffer)));
+}
+
+function encode(buffer: ArrayBuffer, encoding: Encoding): string {
+  return encoding === "base64" ? toBase64(buffer) : toHex(buffer);
+}
+
+class Hash extends ServiceBase<State> {
+  private _progressiveChunks: Uint8Array<ArrayBuffer>[] = [];
+
+  constructor(app: AppInstance, board: string, descriptor: ServiceClass, id: string) {
+    super(app, board, descriptor, id, {
+      methods: METHODS,
+      method: "sha-256",
+      encodings: ENCODINGS,
+      encoding: "hex",
+    });
+  }
+
+  configure(config: any) {
+    if (config.method !== undefined) {
+      this.state.method = config.method;
+      this._progressiveChunks = [];
+      this.app.notify(this, { method: config.method });
+    }
+    if (config.encoding !== undefined) {
+      this.state.encoding = config.encoding;
+      this.app.notify(this, { encoding: config.encoding });
+    }
+    if (config.finalize === true && this.state.method === "sha-256p") {
+      this.finalizeProgressive();
+    }
+  }
+
+  async process(params: any): Promise<string | null> {
+    const algo = ALGO[this.state.method];
+    if (!algo) {
+      console.warn("Hash: unknown method", this.state.method);
+      return null;
+    }
+
+    const data = this.toBytes(params);
+
+    if (this.state.method === "sha-256p") {
+      this._progressiveChunks.push(data);
+      return null; // accumulates until finalize
+    }
+
+    const digest = await crypto.subtle.digest(algo, data);
+    return encode(digest, this.state.encoding);
+  }
+
+  private async finalizeProgressive() {
+    if (this._progressiveChunks.length === 0) { return; }
+    const totalLength = this._progressiveChunks.reduce((n, c) => n + c.length, 0);
+    const combined = new Uint8Array(totalLength);
+    let offset = 0;
+    for (const chunk of this._progressiveChunks) {
+      combined.set(chunk, offset);
+      offset += chunk.length;
+    }
+    this._progressiveChunks = [];
+    const digest = await crypto.subtle.digest("SHA-256", combined);
+    this.app.next(this, encode(digest, this.state.encoding));
+  }
+
+  private toBytes(params: any): Uint8Array<ArrayBuffer> {
+    // WebCrypto rejects views over a SharedArrayBuffer; the bytes reaching a
+    // service are always over a plain ArrayBuffer, which the narrowing loses.
+    if (params instanceof Uint8Array) { return params as Uint8Array<ArrayBuffer>; }
+    if (params instanceof ArrayBuffer) { return new Uint8Array(params); }
+    const msg = typeof params === "string" ? params : JSON.stringify(params);
+    return new TextEncoder().encode(msg);
+  }
+}
+
+const descriptor = {
+  serviceName,
+  serviceId,
+  create: (app: AppInstance, board: string, descriptor: ServiceClass, id: string) =>
+    new Hash(app, board, descriptor, id),
+  createUI: HashUI,
+};
+
+export default descriptor;

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

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import ServiceUI from "hkp-frontend/src/ui-components/service/ServiceUI";
+import { ServiceUIProps } from "hkp-frontend/src/types";
+import SelectorField from "hkp-frontend/src/components/shared/SelectorField";
+import { Button } from "hkp-frontend/src/ui-components/primitives/button";
+
+export default function HashUI(props: ServiceUIProps) {
+  const { service } = props;
+  const [state, setState] = useState<any>({});
+
+  const toOptions = (arr: string[] = []) =>
+    arr.reduce((a: any, c: string) => ({ ...a, [c]: c }), {});
+
+  return (
+    <ServiceUI
+      {...props}
+      onInit={(s: any) => setState(s)}
+      onNotification={(n: any) => setState((prev: any) => ({ ...prev, ...n }))}
+    >
+      <div style={{ minWidth: 250 }}>
+        <SelectorField
+          label="Method"
+          options={toOptions(state.methods)}
+          value={state.method}
+          onChange={({ value }) => service.configure({ method: value })}
+        />
+        <SelectorField
+          label="Encoding"
+          options={toOptions(state.encodings)}
+          value={state.encoding}
+          onChange={({ value }) => service.configure({ encoding: value })}
+        />
+        {state.method === "sha-256p" && (
+          <Button
+            variant="outline"
+            className="hkp-svc-btn w-full mt-2"
+            onClick={() => service.configure({ finalize: true })}
+          >
+            Finalize
+          </Button>
+        )}
+      </div>
+    </ServiceUI>
+  );
+}

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

@@ -0,0 +1,288 @@
+/**
+ * Service Documentation
+ * Service ID: hookup.to/service/hold
+ * Service Name: Hold
+ * Modes: none — either a slot with a declared role, or a property that discriminates
+ * Key Config: slot + op (+ value), or property
+ * IO: in=any -> out=the held value, or null while nothing is held
+ *
+ * Sample-and-hold: a pipeline entered from two sides — a producer that runs on
+ * its own schedule and a consumer that arrives whenever it arrives — needs the
+ * producer's latest value to survive between runs. Hold keeps it.
+ *
+ * **Which side is calling can be said two ways**, and a board picks one.
+ *
+ * With a `slot`, the board says outright: `op` is `write` or `read`, and two
+ * Holds naming one slot are the two ends of it. Nothing inspects the value, so
+ * anything can be held — bytes, a document, null — and the two ends may sit in
+ * pipelines that never meet. Where the cells live is the runtime's to decide:
+ * the scope holding both pipelines, or failing that the runtime.
+ *
+ * With a `property` and no slot, the input says: an input carrying that
+ * property is the producer, its value replaces what is held, and every call —
+ * that one included — emits the held value under the same property name, so
+ * the services after Hold cannot tell the two sides apart. It is the only one
+ * available where the two sides share one pipeline, since there is nothing but
+ * the value to tell them apart. A null held value is an empty one, so a
+ * producer cannot hold null: an input carrying the property as null reads like
+ * any other.
+ *
+ * A writing end given a `value` writes it into its slot when configured, as
+ * though that value had arrived as input — so a board can set what a slot
+ * holds from the start, and a control can change it. The board keeps the
+ * value, so the slot holds it again after a reload.
+ *
+ * Mirrors hkp-node's src/services/hold.ts, hkp-python's services/hold.py and
+ * hkp-rt's services/hold.h.
+ */
+import { AppInstance, ServiceClass } from "hkp-frontend/src/types";
+import ServiceBase from "./ServiceBase";
+import HoldUI from "./HoldUI";
+
+const serviceId = "hookup.to/service/hold";
+const serviceName = "Hold";
+
+/** Longer than this and what is held is described rather than reported. */
+const REPORTABLE_LIMIT = 2048;
+
+type State = {
+  property: string;
+  slot: string;
+  op: "read" | "write";
+  /** Written into the slot on configure; only a slot's writing end has one. */
+  value?: unknown;
+};
+
+class Hold extends ServiceBase<State> {
+  /** What is held when no slot names somewhere else to hold it. */
+  private own: unknown = null;
+  private readCount = 0;
+  private writeCount = 0;
+
+  constructor(
+    app: AppInstance,
+    board: string,
+    descriptor: ServiceClass,
+    id: string,
+  ) {
+    super(app, board, descriptor, id, { property: "", slot: "", op: "read" });
+  }
+
+  configure(config: Partial<State> & { action?: string }) {
+    if (typeof config.property === "string") {
+      if (config.property !== this.state.property) {
+        // What is held belongs to the property it was written for.
+        this.forget();
+      }
+      this.state.property = config.property;
+    }
+
+    if (typeof config.slot === "string") {
+      if (config.slot !== this.state.slot) {
+        // A slot is an address, and what was held belongs to the old one — but
+        // it belongs to whoever else is still reading it, so only this
+        // service's own cell is cleared, never the runtime's.
+        this.own = null;
+        this.readCount = 0;
+        this.writeCount = 0;
+      }
+      this.state.slot = config.slot;
+    }
+
+    if (config.op === "read" || config.op === "write") {
+      this.state.op = config.op;
+    }
+
+    if (
+      config.value !== undefined &&
+      this.state.slot &&
+      this.state.op === "write"
+    ) {
+      this.state.value = config.value;
+      this.write(config.value);
+      this.writeCount += 1;
+    }
+
+    if (config.action === "clear") {
+      this.forget();
+    }
+
+    this.report();
+  }
+
+  process(input: unknown): unknown {
+    if (this.state.slot) {
+      return this.useSlot(input);
+    }
+
+    // Nothing named is nothing to hold: an unconfigured Hold is a wire.
+    if (!this.state.property) {
+      return input;
+    }
+
+    const incoming = carriedValue(input, this.state.property);
+    if (incoming !== null && incoming !== undefined) {
+      this.write(incoming);
+      this.writeCount += 1;
+    } else {
+      this.readCount += 1;
+    }
+
+    this.report();
+
+    const held = this.read();
+    return held === null ? null : { [this.state.property]: held };
+  }
+
+  destroy() {
+    // Only what this service holds itself. A slot belongs to the runtime, and
+    // the other end of it outlives this one — a pipeline rebuilt while a board
+    // is running destroys the services in it, and that must not empty a cell
+    // the service on the other side is still answering from.
+    this.own = null;
+    this.readCount = 0;
+    this.writeCount = 0;
+  }
+
+  /**
+   * A call on a Hold whose role is declared rather than inferred.
+   *
+   * A write emits **its input unchanged**, so the pass it belongs to carries on
+   * as though the Hold were not there; a read emits what is held, **raw**, so
+   * it can be the whole of what a pipeline answers with. Neither looks at the
+   * value, which is what lets a slot hold what a property never could.
+   */
+  private useSlot(input: unknown): unknown {
+    if (this.state.op === "write") {
+      this.write(input);
+      this.writeCount += 1;
+      this.report();
+      return input;
+    }
+
+    this.readCount += 1;
+    this.report();
+    // Nothing held is nothing to pass on, the same as everywhere else — a
+    // consumer that arrives before the producer has run stops here.
+    return this.read() ?? null;
+  }
+
+  /** What is held, from wherever this Hold holds it. */
+  private read(): unknown {
+    if (!this.state.slot) {
+      return this.own;
+    }
+    const store = this.app.slots?.();
+    return (store ? store.get(this.state.slot) : this.own) ?? null;
+  }
+
+  private write(value: unknown): void {
+    const store = this.state.slot ? this.app.slots?.() : null;
+    if (store) {
+      store.set(this.state.slot, value);
+      return;
+    }
+    // No store to share through — a Hold in a runtime that provides none still
+    // holds, for itself alone, rather than dropping what it was given.
+    this.own = value;
+  }
+
+  /**
+   * Back to how the service started. The counts go with the value: they say how
+   * often each side has called for what is held now, and left running across a
+   * clear they would describe a value that is gone.
+   */
+  private forget(): void {
+    this.own = null;
+    if (this.state.slot) {
+      this.app.slots?.().set(this.state.slot, null);
+    }
+    this.readCount = 0;
+    this.writeCount = 0;
+  }
+
+  /**
+   * What a board keeps of this Hold: the arrangement in use and not the other
+   * one, the same as its panel is told.
+   */
+  getConfiguration = async () => {
+    return { ...this.arrangement(), bypass: this.bypass };
+  };
+
+  /**
+   * The fields of the arrangement in use. A state property a service does not
+   * act on is one a board keeps and a reader has to discount.
+   */
+  private arrangement(): Partial<State> {
+    if (!this.state.slot) {
+      return { property: this.state.property };
+    }
+    return this.state.op === "write" && this.state.value !== undefined
+      ? { slot: this.state.slot, op: this.state.op, value: this.state.value }
+      : { slot: this.state.slot, op: this.state.op };
+  }
+
+  /** What this Hold is doing, for its panel. */
+  private report(): void {
+    this.app.notify(this as any, {
+      ...this.arrangement(),
+      held: reportable(this.read()),
+      readCount: this.readCount,
+      writeCount: this.writeCount,
+    });
+  }
+}
+
+/**
+ * The value an input carries for the held property, if it carries one at all —
+ * anything else makes the call a read rather than a write.
+ */
+function carriedValue(input: unknown, property: string): unknown {
+  if (typeof input !== "object" || input === null || Array.isArray(input)) {
+    return undefined;
+  }
+  return (input as Record<string, unknown>)[property];
+}
+
+/**
+ * What is held, as something safe to put in a notification.
+ *
+ * A panel draws what it is told and a board keeps it, so a value that does not
+ * survive being written down is described rather than sent.
+ */
+function reportable(value: unknown): unknown {
+  if (value instanceof Uint8Array) {
+    return `[${value.byteLength} bytes]`;
+  }
+  try {
+    const json = JSON.stringify(value);
+    if (json === undefined) {
+      return null;
+    }
+    if (json.length > REPORTABLE_LIMIT) {
+      return `[${describe(value)}, ${json.length} characters]`;
+    }
+    return JSON.parse(json);
+  } catch {
+    return `[${describe(value)}]`;
+  }
+}
+
+function describe(value: unknown): string {
+  if (Array.isArray(value)) {
+    return `array of ${value.length}`;
+  }
+  return typeof value;
+}
+
+export default {
+  serviceName,
+  serviceId,
+  create: (
+    app: AppInstance,
+    board: string,
+    descriptor: ServiceClass,
+    id: string,
+  ) => new Hold(app, board, descriptor, id),
+  createUI: HoldUI,
+};

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

@@ -0,0 +1,43 @@
+import { useCallback, useState } from "react";
+
+import ServiceUI from "hkp-frontend/src/ui-components/service/ServiceUI";
+import { ServiceUIProps } from "hkp-frontend/src/types";
+import HoldPanel, {
+  EMPTY_HOLD_STATE,
+  HOLD_PANEL_SIZE,
+  HoldPanelState,
+  readHoldState,
+} from "../../ui/HoldPanel";
+
+/**
+ * A Hold in the browser runtime.
+ *
+ * The panel itself is shared with the REST runtime's — Hold is one service,
+ * and the two differ in how a panel reaches it rather than in what there is to
+ * see. What is here is the wrapper and the route to the service, which for a
+ * browser service is a direct call on a live object.
+ */
+export default function HoldUI(props: ServiceUIProps) {
+  const [state, setState] = useState<HoldPanelState>(EMPTY_HOLD_STATE);
+
+  const onUpdate = useCallback((next: any) => {
+    setState((previous) => readHoldState(next, previous));
+  }, []);
+
+  return (
+    <ServiceUI
+      {...props}
+      initialSize={HOLD_PANEL_SIZE}
+      onInit={onUpdate}
+      onNotification={onUpdate}
+    >
+      <HoldPanel
+        state={state}
+        onLocalChange={(next) =>
+          setState((previous) => ({ ...previous, ...next }))
+        }
+        configure={(config) => props.service.configure(config)}
+      />
+    </ServiceUI>
+  );
+}