@softure-ai/mcp-access 0.1.5 → 0.1.7

package/src/ui/consent-form.tsx

@@ -0,0 +1,103 @@
+import { formatMessage } from "@softure-ai/core";
+import { Button, Checkbox, type ClassNames, createSlotClassGetter } from "@softure-ai/ui";
+import type { McpAccessMessages } from "../messages/index.js";
+
+// The OAuth consent screen's body: which app (its registered name and where the code goes, which
+// the app cannot fake), which account (two accounts in one browser happen) and what access (read
+// always, change only when the client asked, the app allows it and the person ticks it). A plain
+// HTML form posting to the decision route, so the `303` to the client works without JavaScript and
+// with native app schemes. Server-safe: no hooks.
+
+export type ConsentFormSlot = "root" | "details" | "term" | "value" | "note" | "actions" | "text" | "link";
+
+export interface ConsentFormProps {
+  /** The decision route the form posts to. */
+  readonly action: string;
+  /** The authorization request's parameters, carried in hidden fields. */
+  readonly params: readonly (readonly [string, string])[];
+  readonly clientName: string;
+  /** Where the code goes: the host for http(s), the whole URI for a native scheme. */
+  readonly redirectTarget: string;
+  readonly accountEmail: string;
+  /** Offer the change checkbox: the client asked for `mcp:write` and the app allows writes. */
+  readonly isWriteOffered: boolean;
+  readonly messages: McpAccessMessages;
+  readonly classNames?: ClassNames<ConsentFormSlot>;
+  readonly unstyled?: boolean;
+}
+
+const DEFAULT_CLASSES: Readonly<Record<ConsentFormSlot, string>> = {
+  root: "sft:flex sft:flex-col sft:gap-4 sft:font-sans",
+  details: "sft:m-0 sft:flex sft:flex-col sft:gap-3 sft:text-sm",
+  term: "sft:text-muted",
+  value: "sft:m-0 sft:font-medium sft:text-foreground",
+  note: "sft:font-normal sft:text-muted",
+  actions: "sft:flex sft:flex-col sft:gap-3",
+  text: "sft:m-0 sft:text-sm sft:text-muted",
+  link: "sft:font-medium sft:text-accent",
+};
+
+export function ConsentForm({ action, params, clientName, redirectTarget, accountEmail, isWriteOffered, messages, classNames, unstyled }: ConsentFormProps) {
+  const slot = createSlotClassGetter({ defaults: DEFAULT_CLASSES, classNames, unstyled });
+  const copy = messages.consent;
+  return (
+    <form method="post" action={action} className={slot("root")}>
+      {params.map(([name, value]) => (
+        <input key={name} type="hidden" name={name} value={value} />
+      ))}
+      <dl className={slot("details")}>
+        <div>
+          <dt className={slot("term")}>{copy.app}</dt>
+          <dd className={slot("value")}>
+            {clientName} <span className={slot("note")}>({formatMessage(copy.returnsTo, { target: redirectTarget })})</span>
+          </dd>
+        </div>
+        <div>
+          <dt className={slot("term")}>{copy.account}</dt>
+          <dd className={slot("value")}>{accountEmail}</dd>
+        </div>
+        <div>
+          <dt className={slot("term")}>{copy.access}</dt>
+          <dd className={slot("value")}>{copy.readAccess}</dd>
+        </div>
+      </dl>
+      {isWriteOffered ? <Checkbox name="canWrite" label={copy.allowWrite} description={copy.allowWriteHint} unstyled={unstyled} /> : null}
+      <div className={slot("actions")}>
+        <Button type="submit" name="decision" value="allow" variant="primary" size="lg" fullWidth unstyled={unstyled}>
+          {copy.allow}
+        </Button>
+        <Button type="submit" name="decision" value="deny" variant="secondary" size="lg" fullWidth unstyled={unstyled}>
+          {copy.deny}
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+export interface ConsentErrorProps {
+  readonly message: string;
+  /** The client's redirect URI with the error, when the client was confirmed; a link, never automatic. */
+  readonly backLocation?: string;
+  readonly backTarget?: string;
+  readonly messages: McpAccessMessages;
+  readonly classNames?: ClassNames<ConsentFormSlot>;
+  readonly unstyled?: boolean;
+}
+
+/** Why the request cannot go on. Nothing was granted; going back to the client is the person's click. */
+export function ConsentError({ message, backLocation, backTarget, messages, classNames, unstyled }: ConsentErrorProps) {
+  const slot = createSlotClassGetter({ defaults: DEFAULT_CLASSES, classNames, unstyled });
+  return (
+    <div className={slot("root")}>
+      <p className={slot("text")}>{message}</p>
+      <p className={slot("text")}>{messages.consent.nothingGranted}</p>
+      {backLocation === undefined || backTarget === undefined ? null : (
+        <p className={slot("text")}>
+          <a href={backLocation} className={slot("link")}>
+            {formatMessage(messages.consent.backToApp, { target: backTarget })}
+          </a>
+        </p>
+      )}
+    </div>
+  );
+}

package/src/ui/index.ts

@@ -1,7 +1,10 @@
 // The token manager, to compose into the app's own page. It takes the server actions from
 // `@softure-ai/mcp-access/next` as props: no `next/*` import here (docs/02-module-standard.md §5).
+export { ConsentError, ConsentForm, type ConsentErrorProps, type ConsentFormProps, type ConsentFormSlot } from "./consent-form.js";
 export {
   TokenManager,
+  type RevokeGrantAction,
+  type TokenManagerGrant,
   type IssueTokenAction,
   type RevokeTokenAction,
   type TokenManagerProps,

package/src/ui/token-manager.tsx

@@ -3,18 +3,20 @@
 import { formatMessage, type Locale } from "@softure-ai/core";
 import { Button, ButtonLink, Checkbox, type ClassNames, createSlotClassGetter, FormError, TextField } from "@softure-ai/ui";
 import { useActionState, useState } from "react";
-import type { IssuedToken, IssueTokenFormState, RevokeTokenFormState } from "../contract.js";
+import type { IssuedToken, IssueTokenFormState, RevokeGrantFormState, RevokeTokenFormState } from "../contract.js";
 import { getTokenErrorMessage, type McpAccessMessages } from "../messages/index.js";
 import { MAX_TOKEN_NAME_LENGTH } from "../options.js";
 
 // The token page's client part: the tool catalog, the issue form, the token just issued with its
-// setup snippets, and the owner's tokens with a revoke button each. Both forms submit to their
+// setup snippets, the owner's tokens with a revoke button each, and, with OAuth on, the apps
+// connected through OAuth with a disconnect button each. Both forms submit to their
 // server actions through `useActionState`. The plaintext lives only in the issue form's state:
 // "Done" or leaving the page drops it. Copy comes from the module's messages; styling only from
 // @softure-ai/ui classes.
 
 export type IssueTokenAction = (previous: IssueTokenFormState, formData: FormData) => Promise<IssueTokenFormState>;
 export type RevokeTokenAction = (previous: RevokeTokenFormState, formData: FormData) => Promise<RevokeTokenFormState>;
+export type RevokeGrantAction = (previous: RevokeGrantFormState, formData: FormData) => Promise<RevokeGrantFormState>;
 
 export type TokenManagerSlot = "root" | "section" | "heading" | "text" | "list" | "item" | "itemHeader" | "badge" | "details" | "snippet" | "code";
 
@@ -39,6 +41,16 @@ export interface TokenManagerRow {
   readonly details: readonly string[];
 }
 
+/** One app connected through OAuth, prepared on the server. */
+export interface TokenManagerGrant {
+  readonly id: string;
+  readonly clientName: string;
+  /** Read only, or read and change, already in the app's copy. */
+  readonly scopeText: string;
+  /** Connected on and last used, already formatted. */
+  readonly details: readonly string[];
+}
+
 export interface TokenManagerProps {
   readonly tools: readonly TokenManagerTool[];
   readonly tokens: readonly TokenManagerRow[];
@@ -48,6 +60,10 @@ export interface TokenManagerProps {
   readonly maxTokens: number;
   readonly issueAction: IssueTokenAction;
   readonly revokeAction: RevokeTokenAction;
+  /** The connected apps; leave out while OAuth is off, and the section is not shown. */
+  readonly grants?: readonly TokenManagerGrant[];
+  /** Disconnects one app; needed with `grants`. */
+  readonly revokeGrantAction?: RevokeGrantAction;
   readonly messages: McpAccessMessages;
   /** Locale of the built-in copy of the ui primitives. */
   readonly locale?: Locale;
@@ -214,7 +230,52 @@ function TokenItem({
   );
 }
 
-export function TokenManager({ tools, tokens, allowWrites, maxTokens, issueAction, revokeAction, messages, locale, classNames, unstyled }: TokenManagerProps) {
+function GrantItem({
+  grant,
+  action,
+  messages,
+  slot,
+  unstyled,
+}: {
+  grant: TokenManagerGrant;
+  action: RevokeGrantAction;
+  messages: McpAccessMessages;
+  slot: Slot;
+  unstyled: boolean | undefined;
+}) {
+  const [state, formAction, isPending] = useActionState(action, { status: "idle" });
+  return (
+    <li className={slot("item")} data-grant-id={grant.id}>
+      <div className={slot("itemHeader")}>
+        <p className={slot("heading")}>{grant.clientName}</p>
+        <form action={formAction}>
+          <input type="hidden" name="id" value={grant.id} />
+          <Button type="submit" variant="danger" size="sm" pending={isPending} aria-label={`${messages.grants.disconnect}: ${grant.clientName}`} unstyled={unstyled}>
+            {isPending ? messages.grants.disconnecting : messages.grants.disconnect}
+          </Button>
+        </form>
+      </div>
+      <p className={slot("badge")}>{grant.scopeText}</p>
+      <p className={slot("details")}>{grant.details.join(" · ")}</p>
+      <FormError message={state.status === "error" ? getTokenErrorMessage(messages, state.error) : undefined} unstyled={unstyled} />
+    </li>
+  );
+}
+
+export function TokenManager({
+  tools,
+  tokens,
+  allowWrites,
+  maxTokens,
+  issueAction,
+  revokeAction,
+  grants,
+  revokeGrantAction,
+  messages,
+  locale,
+  classNames,
+  unstyled,
+}: TokenManagerProps) {
   const slot = createSlotClassGetter({ defaults: DEFAULT_CLASSES, classNames, unstyled });
   return (
     <div className={slot("root")}>
@@ -249,6 +310,21 @@ export function TokenManager({ tools, tokens, allowWrites, maxTokens, issueActio
           </ul>
         )}
       </section>
+      {grants === undefined || revokeGrantAction === undefined ? null : (
+        <section className={slot("section")}>
+          <h2 className={slot("heading")}>{messages.grants.title}</h2>
+          <p className={slot("text")}>{messages.grants.lead}</p>
+          {grants.length === 0 ? (
+            <p className={slot("text")}>{messages.grants.empty}</p>
+          ) : (
+            <ul className={slot("list")}>
+              {grants.map((grant) => (
+                <GrantItem key={grant.id} grant={grant} action={revokeGrantAction} messages={messages} slot={slot} unstyled={unstyled} />
+              ))}
+            </ul>
+          )}
+        </section>
+      )}
     </div>
   );
 }