@readymadeit/mcp 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,186 @@
+import { useState } from "react";
+
+import { SpotifyOAuth, spotifyRedirectUri } from "./SpotifyComponents";
+
+import { s, t } from "../../../styles";
+import Button from "hkp-frontend/src/ui-components/Button";
+import Image from "hkp-frontend/src/ui-components/Image";
+import { ServiceInstance, ServiceUIProps } from "hkp-frontend/src/types";
+import ServiceUI from "hkp-frontend/src/ui-components/service/ServiceUI";
+import RadioGroup from "hkp-frontend/src/ui-components/RadioGroup";
+
+const loginStateId = "spotify-login";
+
+export default function SpotifyUI(props: ServiceUIProps) {
+  // Shown so it can be copied into the Spotify dashboard, which only redirects
+  // to an address registered there.
+  const redirectURI = spotifyRedirectUri();
+  const [token, setToken] = useState<string | null>(null);
+  const [clientID, setClientID] = useState<string>(
+    "e91207fc5f2e4a5db1ca562954e4c23e",
+  );
+  const [profile, setProfile] = useState<{
+    display_name: string;
+    followers: { total: number };
+    images: Array<{ url: string }>;
+  } | null>(null);
+  const [selectedAction, setSelectedAction] =
+    useState<string>("injectSavedSongs");
+
+  const onInit = (initialState: any) => {
+    const { token: t, clientID: c } = initialState;
+    if (t !== undefined) {
+      setToken(t);
+    }
+    if (c !== undefined) {
+      setClientID(c);
+    }
+  };
+
+  const onNotification = (notification: any) => {
+    const { token: t, profile: p, clientID: c } = notification;
+    if (t !== undefined) {
+      setToken(t);
+    }
+    if (p !== undefined) {
+      setProfile(p);
+    }
+    if (c !== undefined) {
+      setClientID(c);
+    }
+  };
+
+  const renderUser = (service: ServiceInstance) => {
+    if (!token) {
+      return (
+        <>
+          <div style={{ marginBottom: 8 }}>
+            <label
+              style={{ fontSize: 11, color: "hsl(var(--muted-foreground))" }}
+            >
+              Client ID
+            </label>
+            <input
+              type="text"
+              placeholder="Spotify app Client ID"
+              value={clientID}
+              onChange={(e) => service.configure({ clientID: e.target.value })}
+              style={{
+                display: "block",
+                width: "100%",
+                fontSize: 12,
+                padding: "4px 6px",
+                border: "1px solid hsl(var(--border))",
+                borderRadius: 4,
+                background: "hsl(var(--background))",
+                color: "hsl(var(--foreground))",
+                marginTop: 2,
+              }}
+            />
+          </div>
+          <div style={{ marginBottom: 8 }}>
+            <label
+              style={{ fontSize: 11, color: "hsl(var(--muted-foreground))" }}
+            >
+              Redirect URI (register this in your Spotify app)
+            </label>
+            <div
+              style={{
+                fontSize: 11,
+                padding: "3px 6px",
+                border: "1px solid hsl(var(--border))",
+                borderRadius: 4,
+                background: "hsl(var(--muted))",
+                color: "hsl(var(--foreground))",
+                marginTop: 2,
+                wordBreak: "break-all",
+                cursor: "text",
+                userSelect: "all",
+              }}
+            >
+              {redirectURI}
+            </div>
+          </div>
+          <SpotifyOAuth
+            clientID={clientID || undefined}
+            onToken={(t: string) => {
+              service.configure({ token: t });
+            }}
+            state={loginStateId}
+          />
+        </>
+      );
+    }
+
+    if (!profile) {
+      service.configure({ action: "getProfile" });
+      return <div style={s(t.ls1, t.fs12)}>Loading profile</div>;
+    }
+    const { display_name: name, images: allImages } = profile;
+    const image = allImages[0];
+    return (
+      <div className="mb-4">
+        <div className="flex flex-col">
+          {image && (
+            <div style={s(t.tc, t.w100, t.p10)}>
+              <Image src={image.url} size={400} />
+            </div>
+          )}
+        </div>
+        <div className="flex gap-2 justify-evenly">
+          <div>{name}</div>
+          <Button
+            size="xs"
+            className="hkp-svc-btn px-2"
+            onClick={() => {
+              service.configure({ action: "logout" });
+              setToken(null);
+            }}
+          >
+            Logout
+          </Button>
+        </div>
+      </div>
+    );
+  };
+
+  const renderActions = (service: ServiceInstance) => {
+    const actions = {
+      injectSavedSongs: "Get liked songs",
+      injectRecentSongs: "Get recent songs",
+    };
+    return (
+      <div>
+        <RadioGroup
+          title="Actions"
+          options={actions}
+          value={selectedAction}
+          onChange={(newAction) => setSelectedAction(newAction)}
+        />
+
+        <Button
+          className="hkp-svc-btn"
+          style={s(t.ls1, t.fs12, t.w100, t.mt5)}
+          onClick={() => service.configure({ action: selectedAction })}
+        >
+          Do it
+        </Button>
+      </div>
+    );
+  };
+
+  return (
+    <ServiceUI
+      {...props}
+      initialSize={{ width: 300, height: undefined }}
+      className="pb-2"
+      onInit={onInit}
+      onNotification={onNotification}
+    >
+      <>
+        {renderUser(props.service)}
+        {token && renderActions(props.service)}
+      </>
+    </ServiceUI>
+  );
+}

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

@@ -0,0 +1,117 @@
+/**
+ * Service Documentation
+ * Service ID: spread
+ * Service Name: Spread
+ * Modes: none
+ * Key Config: itemsFrom
+ * IO: in=an array, or a single item -> out=one { item, group, index, total } per item, each sent on by itself
+ *
+ * One value in, as many out as it has items.
+ *
+ * A pipeline pass carries one value, and so does a value leaving a runtime:
+ * an array of a hundred chunks crosses to the next runtime as one message, as
+ * large as the file it was cut from. Spread sends each item down the rest of
+ * the board on its own — the services after it, and the runtimes after this
+ * one — so each crosses as a message of its own. A coordinator that drops a
+ * message above its frame limit then sees a hundred small ones instead.
+ *
+ * It is not an Iterator. An Iterator runs a pipeline of its own once per item
+ * and comes back with their answers, so one value still leaves it. Spread holds
+ * no pipeline: what follows it on the board is what each item goes through,
+ * and nothing comes back. It returns null and continues the run itself, once
+ * per item — the pull pattern — so every item goes on in the run that reached
+ * it, and with the caller that run carries.
+ *
+ * **Each item goes on wrapped**, as `{ item, group, index, total }`: the item
+ * itself, untouched, and where it sat in the array. That is what lets a Gather
+ * on the far side put the array back together, in order, once it has seen the
+ * whole group; a service in between reads the item as `params.item`.
+ *
+ * **A single item is an array of one**, as for an Iterator, so a board fed
+ * sometimes one value and sometimes several does not change shape.
+ */
+
+import { AppInstance, ServiceClass } from "hkp-frontend/src/types";
+import ServiceBase from "./ServiceBase";
+import SpreadUI from "./SpreadUI";
+import { generateUUID } from "./helpers";
+
+const serviceId = "spread";
+const serviceName = "Spread";
+
+type State = {
+  itemsFrom: string;
+};
+
+/** The value at a dotted path, or undefined where the path does not lead. */
+function valueAt(input: unknown, path: string): unknown {
+  let current: unknown = input;
+  for (const step of path.split(".")) {
+    if (current === null || typeof current !== "object") {
+      return undefined;
+    }
+    current = (current as Record<string, unknown>)[step];
+  }
+  return current;
+}
+
+class Spread extends ServiceBase<State> {
+  constructor(
+    app: AppInstance,
+    board: string,
+    descriptor: ServiceClass,
+    id: string,
+  ) {
+    super(app, board, descriptor, id, { itemsFrom: "" });
+  }
+
+  configure(config: Partial<State>) {
+    if (typeof config.itemsFrom === "string") {
+      this.state.itemsFrom = config.itemsFrom;
+      this.app.notify(this, { itemsFrom: config.itemsFrom });
+    }
+  }
+
+  async process(input: any): Promise<null> {
+    // Before anything is awaited: the run this call is in is only this call's
+    // until it gives up control. Without it, two Spreads overlapping — two
+    // files picked in quick succession — leave the runtime unable to say whose
+    // run this service is in, and the items would go on as the board's.
+    const run = this.app.currentContext?.(this);
+    const items = this.items(input);
+    if (items.length > 0) {
+      const group = generateUUID();
+      const total = items.length;
+      for (const [index, item] of items.entries()) {
+        // One at a time, each awaited: the services after this one see the
+        // items in order, and a hundred chunks are not all in flight at once.
+        await this.app.next(this, { item, group, index, total }, { run });
+      }
+      this.app.notify(this, { lastTotal: total });
+    }
+    // Every item has gone on already; there is nothing left to pass.
+    return null;
+  }
+
+  private items(input: unknown): unknown[] {
+    const source = this.state.itemsFrom
+      ? valueAt(input, this.state.itemsFrom)
+      : input;
+    if (source === null || source === undefined) {
+      return [];
+    }
+    return Array.isArray(source) ? source : [source];
+  }
+}
+
+export default {
+  serviceName,
+  serviceId,
+  create: (
+    app: AppInstance,
+    board: string,
+    descriptor: ServiceClass,
+    id: string,
+  ) => new Spread(app, board, descriptor, id),
+  createUI: SpreadUI,
+};

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

@@ -0,0 +1,38 @@
+import { useState } from "react";
+import ServiceUI from "hkp-frontend/src/ui-components/service/ServiceUI";
+import { ServiceUIProps } from "hkp-frontend/src/types";
+import InputField from "hkp-frontend/src/components/shared/InputField";
+
+export default function SpreadUI(props: ServiceUIProps) {
+  const { service } = props;
+  const [itemsFrom, setItemsFrom] = useState("");
+  const [lastTotal, setLastTotal] = useState<number | undefined>(undefined);
+
+  const read = (state: any) => {
+    if (typeof state?.itemsFrom === "string") {
+      setItemsFrom(state.itemsFrom);
+    }
+    if (typeof state?.lastTotal === "number") {
+      setLastTotal(state.lastTotal);
+    }
+  };
+
+  return (
+    <ServiceUI {...props} onInit={read} onNotification={read}>
+      <div className="flex flex-col" style={{ minWidth: 220 }}>
+        {/* Empty means the input itself; a path reaches into a result that
+            says more than the list. */}
+        <InputField
+          label="Items from"
+          value={itemsFrom}
+          onChange={(value) => service.configure({ itemsFrom: value })}
+        />
+        <div className="hkp-svc-field-label" style={{ fontSize: 12, marginTop: 6 }}>
+          {lastTotal === undefined
+            ? "Nothing spread yet"
+            : `Last sent on ${lastTotal} item${lastTotal === 1 ? "" : "s"}`}
+        </div>
+      </div>
+    </ServiceUI>
+  );
+}