@readymadeit/mcp 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,332 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+} from "hkp-frontend/src/ui-components/primitives/dialog";
+import { SettingsButton } from "hkp-frontend/src/ui-components/settings/kit";
+import { InspectedRows, InspectedTable, TableUse } from "./sql-inspect";
+import "./sql-inspector.css";
+
+/**
+ * What a SQL service's database holds, opened from the service's panel.
+ *
+ * The tables down the side, the ones this service's statement writes or reads
+ * first; the rows of the one picked beside them, a page at a time. Read only:
+ * it is for seeing what a pipeline left behind, and the SQL Explorer board is
+ * where rows are changed. It looks again when the service reports a pass — at
+ * most once a second — so a table being written fills in while it is watched.
+ */
+
+const PAGE = 100;
+
+/**
+ * How often an open inspector looks again while the service keeps reporting.
+ * Every look counts every table, so a board passing many times a second would
+ * otherwise have the inspector re-reading the whole database as often.
+ */
+export const LOOK_EVERY_MS = 1000;
+
+/**
+ * `value`, changing at most once every `ms`. The first change after a quiet
+ * spell arrives at once; the last one of a burst still arrives, after the wait.
+ */
+function useThrottled<T>(value: T, ms: number): T {
+  const [shown, setShown] = useState(value);
+  const shownRef = useRef(value);
+  const last = useRef(0);
+  useEffect(() => {
+    if (Object.is(value, shownRef.current)) {
+      return;
+    }
+    const show = () => {
+      last.current = Date.now();
+      shownRef.current = value;
+      setShown(value);
+    };
+    const wait = last.current + ms - Date.now();
+    if (wait <= 0) {
+      show();
+      return;
+    }
+    const timer = setTimeout(show, wait);
+    return () => clearTimeout(timer);
+  }, [value, ms]);
+  return shown;
+}
+
+/** The first row of the last page a table of `total` rows has. */
+function lastPageStart(total: number): number {
+  return Math.max(0, Math.floor((total - 1) / PAGE) * PAGE);
+}
+
+/** Sized like the service configuration dialog, which it sits beside. */
+const frameStyle: React.CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  width: "min(1280px, 92vw)",
+  maxWidth: "none",
+  height: "min(900px, 86vh)",
+  padding: 0,
+  gap: 0,
+  overflow: "hidden",
+  borderRadius: 16,
+};
+
+/** What the panel's service offers the inspector. */
+export type InspectableSql = {
+  inspectTables(): Promise<{ database: string; tables: InspectedTable[] }>;
+  inspectRows(table: string, offset: number, limit: number): Promise<InspectedRows>;
+};
+
+type Props = {
+  service: InspectableSql;
+  isOpen: boolean;
+  /** Changes whenever the service reports a pass; the inspector looks again. */
+  revision: number;
+  onClose: () => void;
+};
+
+const USE_LABELS: Record<NonNullable<TableUse>, string> = {
+  writes: "written here",
+  reads: "read here",
+};
+
+/** A cell as text, and whether it is a value at all or a stand-in for one. */
+export function cellText(value: unknown): { text: string; placeholder: boolean } {
+  if (value === null || value === undefined) {
+    return { text: "NULL", placeholder: true };
+  }
+  if (value instanceof Uint8Array) {
+    return { text: `[${value.length} bytes]`, placeholder: true };
+  }
+  if (typeof value === "object") {
+    return { text: JSON.stringify(value), placeholder: false };
+  }
+  return { text: String(value), placeholder: false };
+}
+
+function rowCount(n: number): string {
+  return `${n} row${n === 1 ? "" : "s"}`;
+}
+
+function sentence(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}
+
+export default function SqlInspector({ service, isOpen, revision, onClose }: Props) {
+  const [database, setDatabase] = useState("");
+  const [tables, setTables] = useState<InspectedTable[] | null>(null);
+  const [picked, setPicked] = useState<string | null>(null);
+  const [offset, setOffset] = useState(0);
+  const [rows, setRows] = useState<InspectedRows | null>(null);
+  const [showSql, setShowSql] = useState(false);
+  const [error, setError] = useState("");
+  const [looks, setLooks] = useState(0);
+  const lookAgain = useCallback(() => setLooks((n) => n + 1), []);
+  const reported = useThrottled(revision, LOOK_EVERY_MS);
+
+  // The tables: on opening, on every pass the service reports, on Refresh.
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    let current = true;
+    service
+      .inspectTables()
+      .then((found) => {
+        if (!current) {
+          return;
+        }
+        setDatabase(found.database);
+        setTables(found.tables);
+        setError("");
+        // Keeps the table being looked at while it is still there; otherwise
+        // the first, which is the one this service uses if it uses any.
+        setPicked((was) =>
+          was && found.tables.some((t) => t.name === was)
+            ? was
+            : (found.tables[0]?.name ?? null),
+        );
+      })
+      .catch((err) => current && setError(sentence(err)));
+    return () => {
+      current = false;
+    };
+  }, [service, isOpen, reported, looks]);
+
+  // The rows of the table picked, at the page shown.
+  useEffect(() => {
+    if (!isOpen || !picked) {
+      setRows(null);
+      return;
+    }
+    let current = true;
+    service
+      .inspectRows(picked, offset, PAGE)
+      .then((page) => {
+        if (!current) {
+          return;
+        }
+        // The table shrank below the page being looked at: go to its last
+        // page, which looks again, rather than calling it empty.
+        if (offset > 0 && offset >= page.total) {
+          setOffset(lastPageStart(page.total));
+          return;
+        }
+        setRows(page);
+        setError("");
+      })
+      .catch((err) => current && setError(sentence(err)));
+    return () => {
+      current = false;
+    };
+  }, [service, isOpen, picked, offset, reported, looks]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  const pick = (name: string) => {
+    setPicked(name);
+    setOffset(0);
+  };
+  const table = tables?.find((t) => t.name === picked) ?? null;
+  const total = rows?.total ?? 0;
+  const last = Math.min(offset + PAGE, total);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent
+        className="hkp-set hkp-set-dialog hkp-sql-inspector"
+        style={frameStyle}
+        onPointerDownOutside={(e) => e.preventDefault()}
+        onInteractOutside={(e) => e.preventDefault()}
+      >
+        <div className="hkp-set-frame">
+          <div className="hkp-set-nav">
+            <DialogPrimitive.Title className="hkp-set-nav-title">
+              {database || "Database"}
+            </DialogPrimitive.Title>
+            <DialogDescription className="sr-only">
+              The tables in the database this SQL service uses, and their rows.
+            </DialogDescription>
+            <div className="hkp-set-nav-list" role="group" aria-label="Tables">
+              {(tables ?? []).map((t) => (
+                <button
+                  key={t.name}
+                  className="hkp-set-nav-item hkp-sqli-table"
+                  data-state={t.name === picked ? "active" : undefined}
+                  aria-current={t.name === picked ? "true" : undefined}
+                  onClick={() => pick(t.name)}
+                >
+                  <span className="hkp-sqli-table-name">{t.name}</span>
+                  <span className="hkp-sqli-table-meta">
+                    {t.type === "view" ? "view" : rowCount(t.rows ?? 0)}
+                    {t.use ? (
+                      <span className={`hkp-sqli-use hkp-sqli-use--${t.use}`}>
+                        {USE_LABELS[t.use]}
+                      </span>
+                    ) : null}
+                  </span>
+                </button>
+              ))}
+            </div>
+            {tables && tables.length === 0 ? (
+              <p className="hkp-set-hint hkp-sqli-empty">
+                No tables yet. A service's schema creates them the first time
+                the board runs it.
+              </p>
+            ) : null}
+          </div>
+
+          <div className="hkp-set-pane">
+            <div className="hkp-set-pane-header hkp-sqli-header">
+              <div className="hkp-sqli-heading">
+                <h3 className="hkp-set-pane-title">{table?.name ?? "No table"}</h3>
+                {table ? (
+                  <span className="hkp-set-hint">
+                    {table.type === "view" ? "view · " : ""}
+                    {rowCount(total)}
+                    {table.use ? ` · ${USE_LABELS[table.use]}` : ""}
+                  </span>
+                ) : null}
+              </div>
+              <div className="hkp-sqli-actions">
+                {table ? (
+                  <SettingsButton onClick={() => setShowSql((v) => !v)}>
+                    {showSql ? "Hide definition" : "Definition"}
+                  </SettingsButton>
+                ) : null}
+                <SettingsButton onClick={lookAgain}>Refresh</SettingsButton>
+              </div>
+            </div>
+
+            {error ? <div className="hkp-sqli-error">{error}</div> : null}
+
+            {table && showSql ? (
+              <pre className="hkp-sqli-definition">{table.sql}</pre>
+            ) : null}
+
+            <div className="hkp-sqli-grid">
+              {rows && rows.columns.length > 0 ? (
+                <table>
+                  <thead>
+                    <tr>
+                      {rows.columns.map((column) => (
+                        <th key={column}>{column}</th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {rows.rows.map((row, r) => (
+                      <tr key={offset + r}>
+                        {row.map((value, c) => {
+                          const cell = cellText(value);
+                          return (
+                            <td
+                              key={c}
+                              title={cell.text}
+                              className={cell.placeholder ? "hkp-sqli-null" : undefined}
+                            >
+                              {cell.text}
+                            </td>
+                          );
+                        })}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              ) : null}
+              {rows && rows.rows.length === 0 && table ? (
+                <p className="hkp-set-hint hkp-sqli-empty">This table is empty.</p>
+              ) : null}
+            </div>
+
+            {total > PAGE ? (
+              <div className="hkp-sqli-pager">
+                <span className="hkp-set-hint">
+                  {offset + 1}–{last} of {total}
+                </span>
+                <SettingsButton
+                  disabled={offset === 0}
+                  onClick={() => setOffset(Math.max(0, offset - PAGE))}
+                >
+                  Previous
+                </SettingsButton>
+                <SettingsButton
+                  disabled={last >= total}
+                  onClick={() => setOffset(offset + PAGE)}
+                >
+                  Next
+                </SettingsButton>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,226 @@
+import { useState } from "react";
+
+import { ServiceUIProps } from "hkp-frontend/src/types";
+import ServiceUI, {
+  needsUpdate,
+} from "hkp-frontend/src/ui-components/service/ServiceUI";
+import InputField from "hkp-frontend/src/components/shared/InputField";
+import Button from "hkp-frontend/src/ui-components/Button";
+import GroupLabel from "hkp-frontend/src/ui-components/GroupLabel";
+import PillRadioGroup from "hkp-frontend/src/ui-components/PillRadioGroup";
+import Editor from "hkp-frontend/src/components/shared/Editor";
+import { EMITS, FORMATS, MODES } from "./sql-modes";
+import SqlInspector, { InspectableSql } from "./SqlInspector";
+
+/**
+ * The browser SQL service's panel.
+ *
+ * The statement first, because it is what the service is; the schema below it,
+ * because most services on a board leave it to one other. Run tries the
+ * statement with no parameters and shows what it did — the rest of the
+ * pipeline is not called, so trying a DELETE here changes the tables but
+ * nothing downstream. Inspect opens what the database holds, beside the
+ * service rather than in a board of its own.
+ */
+
+const MODE_LABELS: Record<string, string> = {
+  query: "Query",
+  run: "Run",
+  exec: "Exec",
+  databases: "Databases",
+  export: "Export",
+  import: "Import",
+};
+
+/** Modes that run what the panel's statement field holds. */
+const USES_STATEMENT = new Set(["query", "run", "exec"]);
+
+const FORMAT_LABELS: Record<string, string> = {
+  sql: "SQL text",
+  sqlite: "SQLite file",
+};
+
+const EMIT_LABELS: Record<string, string> = {
+  result: "Result",
+  input: "Input",
+};
+
+/** One line saying what the last statement did. */
+function describe(result: any): string | null {
+  if (typeof result?.exported === "string") {
+    const unit = result.format === "sqlite" ? "bytes" : "characters";
+    return `exported ${result.exported} (${result.bytes} ${unit})`;
+  }
+  if (typeof result?.count === "number") {
+    return `${result.count} row${result.count === 1 ? "" : "s"}`;
+  }
+  if (typeof result?.changes === "number") {
+    return `${result.changes} change${result.changes === 1 ? "" : "s"}`;
+  }
+  if (result?.executed === true) {
+    return "executed";
+  }
+  return null;
+}
+
+export default function SqlUI(props: ServiceUIProps) {
+  const [mode, setMode] = useState<string>("query");
+  const [emit, setEmit] = useState<string>("result");
+  const [format, setFormat] = useState<string>("sql");
+  const [database, setDatabase] = useState("");
+  const [statement, setStatement] = useState("");
+  const [schema, setSchema] = useState("");
+  const [outcome, setOutcome] = useState("");
+  const [error, setError] = useState("");
+  const [inspecting, setInspecting] = useState(false);
+  // Moves on every pass the service reports, so an open inspector looks again.
+  const [revision, setRevision] = useState(0);
+
+  const update = (config: any) => {
+    if (
+      typeof config?.mode === "string" &&
+      (MODES as readonly string[]).includes(config.mode)
+    ) {
+      setMode(config.mode);
+    }
+    if (
+      typeof config?.emit === "string" &&
+      (EMITS as readonly string[]).includes(config.emit)
+    ) {
+      setEmit(config.emit);
+    }
+    if (
+      typeof config?.format === "string" &&
+      (FORMATS as readonly string[]).includes(config.format)
+    ) {
+      setFormat(config.format);
+    }
+    if (
+      config?.database !== undefined &&
+      needsUpdate(config.database, database)
+    ) {
+      setDatabase(config.database);
+    }
+    if (
+      config?.statement !== undefined &&
+      needsUpdate(config.statement, statement)
+    ) {
+      setStatement(config.statement);
+    }
+    if (config?.schema !== undefined && needsUpdate(config.schema, schema)) {
+      setSchema(config.schema);
+    }
+    // A result replaces whatever the last pass said, failure included.
+    const done = describe(config);
+    if (done !== null) {
+      setOutcome(done);
+      setError("");
+      setRevision((n) => n + 1);
+    }
+    if (typeof config?.error === "string") {
+      setOutcome("");
+      setError(config.error);
+    }
+  };
+
+  const configure = (config: any) => props.service.configure(config);
+
+  return (
+    <ServiceUI
+      {...props}
+      onInit={update}
+      onNotification={update}
+      initialSize={{ width: 420, height: undefined }}
+    >
+      <div
+        className="h-full flex flex-col my-2 gap-2"
+        style={{ width: "100%", textAlign: "left" }}
+      >
+        <PillRadioGroup
+          title="Mode"
+          options={MODE_LABELS}
+          value={mode}
+          onChange={(value) => configure({ mode: value })}
+        />
+
+        {mode === "export" ? (
+          <PillRadioGroup
+            title="Format"
+            options={FORMAT_LABELS}
+            value={format}
+            onChange={(value) => configure({ format: value })}
+          />
+        ) : null}
+
+        <PillRadioGroup
+          title="Passes on"
+          options={EMIT_LABELS}
+          value={emit}
+          onChange={(value) => configure({ emit: value })}
+        />
+
+        <InputField
+          value={database}
+          label="Database"
+          onChange={(value) => configure({ database: value })}
+        />
+
+        {USES_STATEMENT.has(mode) ? (
+          <div className="flex flex-col gap-1">
+            <GroupLabel className="hkp-svc-field-label" size={4}>
+              Statement
+            </GroupLabel>
+            <div className="h-[140px] w-full">
+              <Editor
+                value={statement}
+                onChange={(value) => configure({ statement: value || "" })}
+                language="sql"
+              />
+            </div>
+          </div>
+        ) : null}
+
+        <div className="flex flex-col gap-1">
+          <GroupLabel className="hkp-svc-field-label" size={4}>
+            Schema
+          </GroupLabel>
+          <div className="h-[100px] w-full">
+            <Editor
+              value={schema}
+              onChange={(value) => configure({ schema: value || "" })}
+              language="sql"
+            />
+          </div>
+        </div>
+
+        <div className="flex gap-2">
+          <Button
+            className="hkp-svc-btn flex-1"
+            onClick={() => props.service.process({})}
+          >
+            Run
+          </Button>
+          <Button
+            className="hkp-svc-btn flex-1"
+            onClick={() => setInspecting(true)}
+          >
+            Inspect database
+          </Button>
+        </div>
+
+        {outcome || error ? (
+          <div className="text-xs">
+            <span className="opacity-60">{outcome}</span>
+            {error ? <span style={{ color: "#ef4444" }}>{error}</span> : null}
+          </div>
+        ) : null}
+      </div>
+      <SqlInspector
+        service={props.service as unknown as InspectableSql}
+        isOpen={inspecting}
+        revision={revision}
+        onClose={() => setInspecting(false)}
+      />
+    </ServiceUI>
+  );
+}

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

@@ -0,0 +1,149 @@
+import { AppInstance, ServiceClass } from "../../../types";
+
+const serviceId = "hookup.to/service/state";
+const serviceName = "State";
+
+interface MacroTemplate {
+  [key: string]: any;
+}
+
+interface Macro {
+  variables: string[];
+  template: MacroTemplate | MacroTemplate[];
+}
+
+interface MacroMap {
+  [name: string]: Macro;
+}
+
+class State {
+  uuid: string;
+  board: string;
+  app: AppInstance;
+  state: Record<string, any>;
+  macros: MacroMap | undefined;
+
+  constructor(
+    app: AppInstance,
+    board: string,
+    _descriptor: ServiceClass,
+    id: string
+  ) {
+    this.uuid = id;
+    this.board = board;
+    this.app = app;
+
+    this.state = {};
+  }
+
+  configure(config: { macros?: MacroMap } | null): void {
+    const { macros } = config || {};
+    if (macros) {
+      this.macros = Object.keys(macros).reduce<MacroMap>(
+        (all, macro) => ({ ...all, [macro]: macros[macro] }),
+        {}
+      );
+    }
+  }
+
+  replaceMacroVariables(
+    variables: string[],
+    item: Record<string, any>,
+    template: MacroTemplate,
+    key: string
+  ): any {
+    const regex = /\$value/gi;
+    const templateValue = template[key];
+    if (variables.indexOf(key) === -1) {
+      return templateValue;
+    }
+
+    if (!regex.test(templateValue)) {
+      return templateValue;
+    }
+
+    const replacement = item[key];
+    return replacement ? templateValue.replace(regex, replacement) : undefined;
+  }
+
+  processMacros(input: any[]): any[] {
+    return input
+      .map((item) => {
+        const type = item.type || "";
+        if (item.type && type.startsWith("macro:")) {
+          const name = type.split("macro:")[1];
+          const macro = this.macros && this.macros[name];
+          if (!macro) {
+            console.error(
+              `Could not find macro with name: ${name} in macros: ${JSON.stringify(
+                this.macros
+              )}`
+            );
+            return undefined;
+          }
+          // set item to macro and replace variables
+          const templates = Array.isArray(macro.template)
+            ? macro.template
+            : [macro.template];
+          return templates.map((template) =>
+            Object.keys(template).reduce((obj: Record<string, any>, key) => {
+              const value = this.replaceMacroVariables(
+                macro.variables,
+                item,
+                template,
+                key
+              );
+              return value !== undefined ? { ...obj, [key]: value } : obj;
+            }, {})
+          );
+        }
+        return item;
+      })
+      .flat();
+  }
+
+  process(objectOrArray: any): any {
+    if (!objectOrArray) {
+      return undefined;
+    }
+
+    if (!Array.isArray(objectOrArray)) {
+      return this.process([objectOrArray]);
+    }
+
+    const preProcessed = this.processMacros(objectOrArray);
+    return preProcessed.map((item) => {
+      const id = item && item.id;
+      const ref = item && item.ref;
+      if (!id && !ref) {
+        return item;
+      }
+
+      if (id) {
+        this.state[id] = item;
+        return item;
+      }
+
+      // item references the internal state
+      const state = this.state[ref];
+      if (!state) {
+        console.error(`Referenced state does not exist: ${ref}`);
+        return item;
+      }
+
+      return Object.keys(item).reduce(
+        (all: Record<string, any>, key) => ({ ...all, [key]: item[key] }),
+        state
+      );
+    });
+  }
+}
+
+const descriptor = {
+  serviceName,
+  serviceId,
+  create: (app: AppInstance, board: string, desc: ServiceClass, id: string) =>
+    new State(app, board, desc, id),
+};
+
+export default descriptor;