@readymadeit/mcp 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,183 @@
+import { useState } from "react";
+import ServiceUI from "hkp-frontend/src/ui-components/service/ServiceUI";
+import { ServiceUIProps } from "hkp-frontend/src/types";
+import Knob from "hkp-frontend/src/ui-components/Knob";
+import Select from "hkp-frontend/src/ui-components/Select";
+import { DRUM_TYPES } from "./Sound";
+import type { GeneratorType, WaveType } from "./Sound";
+
+const GENERATOR_TYPES: GeneratorType[] = ["drums", "synth"];
+const NO_TRIGGER = "none";
+const WAVE_TYPES: WaveType[] = ["sine", "triangle", "square", "sawtooth", "organ", "soft", "fifth"];
+const DURATION_UNITS = ["s", "beats"];
+
+type Envelope = {
+  attack: number;
+  release: number;
+  noteDuration: number;
+  noteDurationUnit: "s" | "beats";
+};
+
+const ENVELOPE_KEYS = ["attack", "release", "noteDuration", "noteDurationUnit"] as const;
+
+function pickEnvelope(from: any): Partial<Envelope> {
+  const picked: Partial<Envelope> = {};
+  for (const key of ENVELOPE_KEYS) {
+    if (from[key] !== undefined) {
+      (picked as any)[key] = from[key];
+    }
+  }
+  return picked;
+}
+
+export default function SoundUI(props: ServiceUIProps) {
+  const { service } = props;
+  const [volume, setVolume] = useState(0.7);
+  const [generator, setGenerator] = useState<GeneratorType>("drums");
+  const [waveType, setWaveType] = useState<WaveType>("sine");
+  const [trigger, setTrigger] = useState<string | null>(null);
+  const [latencyMs, setLatencyMs] = useState<number | null>(null);
+  const [envelope, setEnvelope] = useState<Envelope>({
+    attack: 0.01,
+    release: 0.03,
+    noteDuration: 0.3,
+    noteDurationUnit: "s",
+  });
+
+  const changeEnvelope = (change: Partial<Envelope>) => {
+    setEnvelope((current) => ({ ...current, ...change }));
+    service.configure(change);
+  };
+
+  return (
+    <ServiceUI
+      {...props}
+      onInit={(state: any) => {
+        if (state.volume !== undefined) { setVolume(state.volume); }
+        if (state.generator !== undefined) { setGenerator(state.generator); }
+        if (state.waveType !== undefined) { setWaveType(state.waveType); }
+        if (state.trigger !== undefined) { setTrigger(state.trigger); }
+        setEnvelope((current) => ({ ...current, ...pickEnvelope(state) }));
+      }}
+      onNotification={(n: any) => {
+        if (n.volume !== undefined) { setVolume(n.volume); }
+        if (n.generator !== undefined) { setGenerator(n.generator); }
+        if (n.waveType !== undefined) { setWaveType(n.waveType); }
+        if (n.trigger !== undefined) { setTrigger(n.trigger); }
+        if (n.outputLatencyMs !== undefined) { setLatencyMs(n.outputLatencyMs); }
+        const changed = pickEnvelope(n);
+        if (Object.keys(changed).length > 0) {
+          setEnvelope((current) => ({ ...current, ...changed }));
+        }
+      }}
+    >
+      <div style={{ padding: 8, fontFamily: "monospace", fontSize: 12 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          <Knob
+            value={volume}
+            min={0}
+            max={1}
+            width={52}
+            height={52}
+            label={`${Math.round(volume * 100)}%`}
+            onChange={(v) => {
+              setVolume(v);
+              service.configure({ volume: v });
+            }}
+          />
+          <span>Volume</span>
+        </div>
+
+        <div style={{ marginTop: 6, display: "flex", alignItems: "center", gap: 6 }}>
+          Generator:
+          <Select
+            options={GENERATOR_TYPES}
+            value={generator}
+            onChange={(v) => {
+              setGenerator(v as GeneratorType);
+              service.configure({ generator: v });
+            }}
+          />
+        </div>
+
+        {generator === "drums" && (
+          <div style={{ marginTop: 6, display: "flex", alignItems: "center", gap: 6 }}>
+            On any input:
+            <Select
+              options={[NO_TRIGGER, ...DRUM_TYPES]}
+              value={trigger ?? NO_TRIGGER}
+              onChange={(v) => {
+                const next = v === NO_TRIGGER ? null : v;
+                setTrigger(next);
+                service.configure({ trigger: next });
+              }}
+            />
+          </div>
+        )}
+
+        {latencyMs !== null && (
+          <div style={{ marginTop: 6, opacity: 0.7 }}>
+            Heard {latencyMs} ms after playing
+          </div>
+        )}
+
+        {generator === "synth" && (
+          <div style={{ marginTop: 6, display: "flex", alignItems: "center", gap: 6 }}>
+            Wave:
+            <Select
+              options={WAVE_TYPES}
+              value={waveType}
+              onChange={(v) => {
+                setWaveType(v as WaveType);
+                service.configure({ waveType: v });
+              }}
+            />
+          </div>
+        )}
+
+        {generator === "synth" && (
+          <div style={{ marginTop: 6, display: "flex", alignItems: "center", gap: 6 }}>
+            Held for:
+            <input
+              type="number"
+              min={0}
+              step={0.1}
+              value={envelope.noteDuration}
+              style={{ width: 56, fontFamily: "inherit", fontSize: "inherit" }}
+              onChange={(e) => {
+                const value = Number(e.target.value);
+                if (Number.isFinite(value) && value >= 0) {
+                  changeEnvelope({ noteDuration: value });
+                }
+              }}
+            />
+            <Select
+              options={DURATION_UNITS}
+              value={envelope.noteDurationUnit}
+              onChange={(v) => changeEnvelope({ noteDurationUnit: v as Envelope["noteDurationUnit"] })}
+            />
+          </div>
+        )}
+
+        {generator === "synth" && (
+          <div style={{ marginTop: 6, display: "flex", alignItems: "center", gap: 12 }}>
+            {(["attack", "release"] as const).map((key) => (
+              <div key={key} style={{ display: "flex", alignItems: "center", gap: 6 }}>
+                <Knob
+                  value={envelope[key]}
+                  min={0}
+                  max={key === "attack" ? 2 : 4}
+                  width={44}
+                  height={44}
+                  label={`${envelope[key].toFixed(2)} s`}
+                  onChange={(v) => changeEnvelope({ [key]: v })}
+                />
+                <span>{key === "attack" ? "Attack" : "Release"}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </ServiceUI>
+  );
+}

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

@@ -0,0 +1,56 @@
+import { AppInstance, ServiceClass } from "hkp-frontend/src/types";
+import ServiceBase from "./ServiceBase";
+
+import SpeechSynthUI from "./SpeechSynthUI";
+import { needsUpdate } from "hkp-frontend/src/ui-components/service/ServiceUI";
+
+const serviceName = "Speech Synth";
+const serviceId = "hookup.to/service/speech-synth";
+
+type State = {
+  voices: Array<SpeechSynthesisVoice>;
+};
+
+class SpeechSynth extends ServiceBase<State> {
+  constructor(
+    app: AppInstance,
+    board: string,
+    descriptor: ServiceClass,
+    id: string
+  ) {
+    super(app, board, descriptor, id, {
+      voices: [],
+    });
+  }
+
+  configure(config: any) {
+    if (needsUpdate(this.state.voices, config.voices)) {
+      this.state.voices = config.voices;
+      this.app.notify(this, { voices: this.state.voices });
+    }
+  }
+
+  async process(params: any) {
+    if (typeof params !== "string") {
+      this.pushErrorNotification("Speech prompt input must be of type string");
+      return null;
+    }
+
+    this.app.notify(this, { incoming: params });
+    return null;
+  }
+}
+
+const descriptor = {
+  serviceName,
+  serviceId,
+  create: (
+    app: AppInstance,
+    board: string,
+    descriptor: ServiceClass,
+    id: string
+  ) => new SpeechSynth(app, board, descriptor, id),
+  createUI: SpeechSynthUI,
+};
+
+export default descriptor;

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

@@ -0,0 +1,108 @@
+import { useState } from "react";
+
+import { ServiceUIProps } from "hkp-frontend/src/types";
+
+import ServiceUI, {
+  needsUpdate,
+} from "hkp-frontend/src/ui-components/service/ServiceUI";
+import SelectorField, {
+  OnChangeValue,
+  arrayToOptions,
+} from "hkp-frontend/src/components/shared/SelectorField";
+
+const defaultVoiceName = "Daniel";
+
+export default function SpeechSynthUI(props: ServiceUIProps) {
+  const [currentVoice, setCurrentVoice] = useState<SpeechSynthesisVoice | null>(
+    null
+  );
+  const [voices, setVoices] = useState<Array<SpeechSynthesisVoice>>([]);
+
+  const onSpeak = (msg: string) => {
+    const utter = new SpeechSynthesisUtterance(msg);
+    utter.voice = currentVoice || voices[0];
+    speechSynthesis.speak(utter);
+  };
+
+  const update = (state: any) => {
+    if (needsUpdate(state.voices, voices)) {
+      setVoices(state.voices);
+    }
+    if (state.incoming !== undefined) {
+      onSpeak(state.incoming);
+    }
+  };
+
+  const onInit = (state: any) => {
+    update(state);
+
+    let loaded = false;
+
+    const loadVoices = () => {
+      const all = speechSynthesis.getVoices();
+      if (all.length === 0) {
+        return;
+      }
+      if (loaded) {
+        return;
+      }
+      loaded = true;
+
+      // Prefer en-GB, fall back to any English, then all voices.
+      let pool = all.filter((v) => v.lang === "en-GB");
+      if (pool.length === 0) {
+        pool = all.filter((v) => v.lang.startsWith("en"));
+      }
+      if (pool.length === 0) {
+        pool = all;
+      }
+
+      const defaultVoice = pool.find((v) => v.name === defaultVoiceName) ?? pool[0];
+      props.service.configure({ voices: pool });
+      if (currentVoice === null && defaultVoice) {
+        setCurrentVoice(defaultVoice);
+      }
+    };
+
+    // Chrome/Firefox fire onvoiceschanged; Safari may have voices synchronously
+    // or never fire the event — poll as a fallback.
+    speechSynthesis.onvoiceschanged = loadVoices;
+    loadVoices();
+
+    // Safari fallback: poll until voices appear (up to ~3 s).
+    let attempts = 0;
+    const poll = setInterval(() => {
+      loadVoices();
+      if (loaded || ++attempts >= 15) {
+        clearInterval(poll);
+      }
+    }, 200);
+  };
+  const onNotification = (notification: any) => update(notification);
+
+  const options = arrayToOptions(voices.map((v) => v.name));
+
+  const onChangeVoice = ({ index }: OnChangeValue) => {
+    setCurrentVoice(voices[index]);
+  };
+
+  return (
+    <ServiceUI
+      className="pb-4"
+      {...props}
+      onInit={onInit}
+      onNotification={onNotification}
+      initialSize={{ width: 400, height: undefined }}
+    >
+      <div className="flex flex-col">
+        <h1>Speech</h1>
+        <SelectorField
+          label="Voice"
+          value={currentVoice?.name || ""}
+          onChange={onChangeVoice}
+          options={options}
+        />
+      </div>
+    </ServiceUI>
+  );
+}

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

@@ -0,0 +1,111 @@
+import SpotifyUI from "./SpotifyUI";
+
+import { getMySavedSongs, getUserProfile, getRecentSongs } from "./SpotifyAPI";
+import { AppInstance, ServiceClass } from "hkp-frontend/src/types";
+
+const serviceId = "hookup.to/service/spotify";
+const serviceName = "Spotify";
+
+const loginStateId = "spotify-login";
+const clientIdStateId = "spotify-client-id";
+const clientIDDefault = "e91207fc5f2e4a5db1ca562954e4c23e";
+
+class Spotify {
+  uuid: string;
+  board: string;
+  app: AppInstance;
+  token: string | undefined;
+  clientID: string | undefined;
+
+  constructor(
+    app: AppInstance,
+    board: string,
+    _descriptor: ServiceClass,
+    id: string,
+  ) {
+    this.uuid = id;
+    this.board = board;
+    this.app = app;
+
+    this.token = this.app.restoreServiceData(this.uuid, loginStateId);
+    this.clientID = this.app.restoreServiceData(this.uuid, clientIdStateId) ?? clientIDDefault;
+  }
+
+  destroy() {}
+
+  async configure(config: any) {
+    const { token, action, clientID } = config;
+    if (clientID !== undefined) {
+      this.clientID = clientID;
+      this.app.storeServiceData(this.uuid, clientIdStateId, clientID);
+      this.app.notify(this, { clientID });
+    }
+    if (token !== undefined) {
+      this.token = token;
+      this.app.storeServiceData(this.uuid, loginStateId, token);
+      this.app.notify(this, { token });
+    }
+    if (action !== undefined) {
+      this.dispatchAction(action);
+    }
+  }
+
+  onRequestFail = (err: any) => {
+    switch (err.status) {
+      case 401:
+        this.token = "";
+        this.app.removeServiceData(this.uuid, loginStateId);
+        this.app.notify(this, { token: "" });
+        return;
+      default:
+        console.log("Unhandled error", err);
+        return;
+    }
+  };
+
+  async dispatchAction(action: any) {
+    const token = this.token;
+    if (!token) {
+      return false;
+    }
+
+    switch (action) {
+      case "injectSavedSongs": {
+        const liked = await getMySavedSongs(token).catch(this.onRequestFail);
+        return liked && this.app.next(this, liked);
+      }
+      case "injectRecentSongs": {
+        const recents = await getRecentSongs(token).catch(this.onRequestFail);
+        return recents && this.app.next(this, recents);
+      }
+      case "getProfile": {
+        const profile = await getUserProfile(token).catch(this.onRequestFail);
+        this.app.notify(this, { profile });
+        break;
+      }
+      case "logout":
+        this.app.removeServiceData(this.uuid, loginStateId);
+        break;
+      default:
+        break;
+    }
+  }
+
+  async process(params: any) {
+    return params;
+  }
+}
+
+const descriptor = {
+  serviceName,
+  serviceId,
+  create: (
+    app: AppInstance,
+    board: string,
+    descriptor: ServiceClass,
+    id: string,
+  ) => new Spotify(app, board, descriptor, id),
+  createUI: SpotifyUI,
+};
+
+export default descriptor;

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

@@ -0,0 +1,113 @@
+import { makeQueryString, RequestError } from "./helpers";
+
+// PKCE helpers — no backend required, no client secret needed.
+
+export function generateCodeVerifier(): string {
+  const bytes = new Uint8Array(64);
+  crypto.getRandomValues(bytes);
+  return btoa(String.fromCharCode(...bytes))
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_")
+    .replace(/=/g, "");
+}
+
+export async function generateCodeChallenge(verifier: string): Promise<string> {
+  const data = new TextEncoder().encode(verifier);
+  const digest = await crypto.subtle.digest("SHA-256", data);
+  return btoa(String.fromCharCode(...new Uint8Array(digest)))
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_")
+    .replace(/=/g, "");
+}
+
+export function getAuthURL(
+  clientID: string,
+  redirectURI: string,
+  scopes: string[],
+  state: string,
+  codeChallenge: string
+): string {
+  const params = new URLSearchParams({
+    client_id: clientID,
+    response_type: "code",
+    redirect_uri: redirectURI,
+    scope: scopes.join(" "),
+    state,
+    code_challenge: codeChallenge,
+    code_challenge_method: "S256",
+  });
+  return `https://accounts.spotify.com/authorize?${params}`;
+}
+
+export async function exchangeCodeForToken(
+  code: string,
+  codeVerifier: string,
+  redirectURI: string,
+  clientID: string
+): Promise<string> {
+  const body = new URLSearchParams({
+    grant_type: "authorization_code",
+    code,
+    redirect_uri: redirectURI,
+    client_id: clientID,
+    code_verifier: codeVerifier,
+  });
+  const resp = await fetch("https://accounts.spotify.com/api/token", {
+    method: "POST",
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body,
+  });
+  if (!resp.ok) {
+    throw new RequestError("POST /api/token", resp.status);
+  }
+  const json = await resp.json();
+  return json.access_token as string;
+}
+
+async function makeRequest(
+  token: string,
+  url: string,
+  qp?: Record<string, any>
+): Promise<any> {
+  const baseURL = "https://api.spotify.com";
+  const fullURL = `${baseURL}${url}${qp ? "?" + makeQueryString(qp) : ""}`;
+  const resp = await fetch(fullURL, {
+    headers: { Authorization: "Bearer " + token },
+  });
+  if (!resp.ok) {
+    throw new RequestError(`GET ${fullURL}`, resp.status);
+  }
+  return await resp.json();
+}
+
+export function getUserProfile(token: string): Promise<any> {
+  return makeRequest(token, "/v1/me");
+}
+
+export async function getRecentSongs(token: string): Promise<any[]> {
+  const recents = await makeRequest(token, "/v1/me/player/recently-played");
+  return recents.items;
+}
+
+export async function getMySavedSongs(
+  token: string,
+  n?: number
+): Promise<any[]> {
+  let finished = false;
+  let result: any[] = [];
+  let offset = 0;
+  while (!finished) {
+    const limit = n || 50;
+    const songs = await makeRequest(token, "/v1/me/tracks", { offset, limit });
+    if (songs.items.length > 0) {
+      offset += limit;
+      result = result.concat(songs.items);
+    } else {
+      finished = true;
+    }
+    if (n && result.length >= n) {
+      finished = true;
+    }
+  }
+  return result;
+}

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

@@ -0,0 +1,104 @@
+import { useRef } from "react";
+import {
+  generateCodeVerifier,
+  generateCodeChallenge,
+  getAuthURL,
+  exchangeCodeForToken,
+} from "./SpotifyAPI";
+import { s, t } from "../../../styles";
+import {
+  canReceiveServiceRedirect,
+  openInBrowser,
+  serviceRedirectUri,
+} from "./helpers";
+import { toast } from "sonner";
+import MessageReceiver from "../../../MessageReceiver";
+import Button from "hkp-frontend/src/ui-components/Button";
+
+/**
+ * Where Spotify sends the user back after login.
+ *
+ * Spotify accepts a loopback callback only as a literal 127.0.0.1, never as
+ * "localhost" — hence the override for a plain-http page. In the desktop app
+ * the helper returns a loopback address of its own (the app's own HTTP server),
+ * which satisfies the same rule.
+ */
+export function spotifyRedirectUri(): string {
+  return serviceRedirectUri(
+    window.location.protocol === "http:"
+      ? `http://127.0.0.1:${window.location.port}`
+      : undefined,
+  );
+}
+
+const scopesDefault = [
+  "user-library-read",
+  "playlist-read-private",
+  "user-read-recently-played",
+];
+
+type SpotifyOAuthProps = {
+  onToken: (token: string) => void;
+  clientID?: string;
+  /** Defaults to `spotifyRedirectUri`. */
+  redirectURI?: string;
+  scopes?: string[];
+  state: string;
+};
+
+export function SpotifyOAuth({
+  onToken,
+  clientID = "e91207fc5f2e4a5db1ca562954e4c23e",
+  redirectURI = spotifyRedirectUri(),
+  scopes = scopesDefault,
+  state: loginStateId,
+}: SpotifyOAuthProps): JSX.Element {
+  // Holds the PKCE code_verifier generated at login time so we can exchange
+  // the authorization code that comes back from Spotify.
+  const codeVerifierRef = useRef<string | null>(null);
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column" }}>
+      <Button
+        className="hkp-svc-btn"
+        style={s(t.ls1, t.fs12)}
+        onClick={async () => {
+          if (!canReceiveServiceRedirect()) {
+            toast.error("Another Readymade instance is running", {
+              description:
+                "It holds the port Spotify would send you back to, so this window would never see the login. Quit it and try again.",
+            });
+            return;
+          }
+
+          const verifier = generateCodeVerifier();
+          codeVerifierRef.current = verifier;
+          const challenge = await generateCodeChallenge(verifier);
+          const url = getAuthURL(clientID, redirectURI, scopes, loginStateId, challenge);
+          openInBrowser(url);
+        }}
+      >
+        Login
+      </Button>
+      <MessageReceiver
+        state={loginStateId}
+        onData={async (data: Record<string, unknown>) => {
+          // PKCE flow: Spotify redirects with ?code=… (not #access_token=…)
+          if (data.code && codeVerifierRef.current) {
+            try {
+              const token = await exchangeCodeForToken(
+                data.code as string,
+                codeVerifierRef.current,
+                redirectURI,
+                clientID
+              );
+              onToken(token);
+            } catch (err) {
+              console.error("Spotify token exchange failed", err);
+            }
+          }
+        }}
+      />
+    </div>
+  );
+}