fix graphql bug, extend examples

Author: Tsche

runtime/pages/example/index.html

@@ -14,11 +14,15 @@ <h1>Feedback integration example</h1>
       <p>This page exercises batched native upvotes, multiple discussion threads, reactions, labels, polls, comments, minimized or deleted comments, replies, accepted answers, and GitHub links.</p>
       <p>API: <code id="api-origin"></code></p>
       <div id="authentication-status" class="authentication-status"></div>
+      <h2>Voting and reaction cards</h2>
+      <p>These cards use one anonymous batched counter request. The final card intentionally has no discussion.</p>
+      <section id="cards" class="cards"></section>
+      <h2>Full discussions</h2>
       <section id="thread" class="thread"></section>
       <form id="comment-form" class="comment-form">
         <label>Thread <select id="comment-key"></select></label>
         <textarea id="comment-body" rows="4" maxlength="16000" placeholder="Add a comment"></textarea>
-        <button type="submit">Sign in and comment</button>
+        <button id="comment-submit" type="submit">Sign in and comment</button>
         <button id="clear-reply" type="button" hidden>Cancel reply</button>
       </form>
       <p id="status" role="status">Loading…</p>

runtime/pages/example/style.css

@@ -15,26 +15,45 @@ main {
 }
 
 .authentication-status {
-  align-items: center;
-  background: #f1f5f8;
-  border: 1px solid #d7dbe0;
   display: flex;
-  gap: 0.75rem;
-  justify-content: space-between;
+  justify-content: flex-end;
   margin: 1rem 0;
-  padding: 0.75rem;
 }
 
-.authentication-status small {
-  color: #555;
-  margin-right: auto;
+.feedback-authentication-dot {
+  background: #c9362b;
+  border: 2px solid #8f241d;
+  border-radius: 50%;
+  height: 1.25rem;
+  padding: 0;
+  width: 1.25rem;
+}
+
+.feedback-authentication-dot.authenticated {
+  background: #2b9b4b;
+  border-color: #17632e;
 }
 
 .thread {
   display: grid;
   gap: 1rem;
 }
 
+.cards {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  margin-bottom: 2rem;
+}
+
+.ranking-card {
+  border: 1px solid #d7dbe0;
+  border-radius: 0.5rem;
+  padding: 1rem;
+}
+
+.ranking-card h3 { margin-top: 0; }
+
 .discussion { border: 1px solid #ddd; border-radius: 0.5rem; padding: 1rem; }
 .own-post { border-color: #356fc0; box-shadow: inset 4px 0 #356fc0; }
 .controls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
@@ -51,6 +70,12 @@ main {
   margin-top: 1rem;
 }
 
+.reaction-control {
+  border: 1px solid #c7ced8;
+  border-radius: 0.25rem;
+  padding: 0.35rem 0.55rem;
+}
+
 .poll-option {
   border: 1px solid #d7dbe0;
   margin-top: 0.5rem;

runtime/src/auth/status.ts

@@ -22,22 +22,21 @@ export function createAuthenticationStatus(
 ): AuthenticationStatusController {
   const element = document.createElement("section");
   element.className = "feedback-authentication-status";
-  const message = document.createElement("span");
   const action = document.createElement("button");
   action.type = "button";
-  element.append(message, action);
+  action.className = "feedback-authentication-dot";
+  element.append(action);
   options.mount.replaceChildren(element);
 
   const refresh = (): void => {
     const token = options.authentication.token();
     const signedIn = token !== null;
-    message.textContent = signedIn
+    const status = signedIn
       ? (options.signedInLabel?.(token.viewerId) ?? "Authenticated")
       : (options.signedOutLabel ?? "Not authenticated");
-    action.textContent = signedIn
-      ? (options.logoutLabel ?? "Log out")
-      : (options.loginLabel ?? "Log in");
-    action.setAttribute("aria-label", action.textContent);
+    action.classList.toggle("authenticated", signedIn);
+    action.title = `${status}. ${signedIn ? (options.logoutLabel ?? "Log out") : (options.loginLabel ?? "Log in")}`;
+    action.setAttribute("aria-label", action.title);
     action.onclick = () => {
       if (options.authentication.token() !== null) {
         options.authentication.clear();
@@ -59,11 +58,7 @@ export function createAuthenticationStatus(
     };
   };
 
-  if (options.explanation) {
-    const explanation = document.createElement("small");
-    explanation.textContent = options.explanation;
-    element.insertBefore(explanation, message);
-  }
+  if (options.explanation) element.title = options.explanation;
   refresh();
   return { element, refresh };
 }

runtime/src/example/page.ts

@@ -3,8 +3,8 @@ import type { ReactionState } from "../api/client.js";
 import { trustedOrigin } from "../auth/origin.js";
 import { Authentication } from "../auth/controller.js";
 import { createAuthenticationStatus } from "../auth/status.js";
-import { viewerSubjectStates } from "../protocol/github.js";
-import type { ViewerSubjectState } from "../protocol/github.js";
+import { setReaction, viewerSubjectStates } from "../protocol/github.js";
+import type { Reaction, ViewerSubjectState } from "../protocol/github.js";
 
 const parameters = new URLSearchParams(location.search);
 const site = parameters.get("site") ?? "feedback-cpp-social";
@@ -21,13 +21,14 @@ const client = new FeedbackClient({ apiOrigin, site });
 const authentication = new Authentication({ site, callbackOrigin: location.origin, service: client });
 const status = required("status");
 let replyTo: { key: string; id: string } | undefined;
+let cardViewerStates = new Map<string, ViewerSubjectState>();
 required("api-origin").textContent = apiOrigin;
 const authenticationStatus = createAuthenticationStatus({
   mount: required("authentication-status"),
   authentication,
   explanation: "Sign in is required to add comments or replies.",
   onError: (error) => { status.textContent = error instanceof Error ? error.message : "Authentication failed."; },
-  onChange: () => { void render(); },
+  onChange: () => { updateAuthenticationUi(); void render(); },
 });
 required("comment-form").addEventListener("submit", (event) => {
   event.preventDefault();
@@ -44,6 +45,7 @@ for (const key of keys) {
   option.textContent = key;
   commentKey.append(option);
 }
+updateAuthenticationUi();
 void render();
 
 async function submitComment(): Promise<void> {
@@ -53,6 +55,7 @@ async function submitComment(): Promise<void> {
     let token = authentication.token();
     token ??= await authentication.authenticate();
     authenticationStatus.refresh();
+    updateAuthenticationUi();
     const key = replyTo?.key ?? commentKey.value;
     await client.addComment(key, textarea.value, token, replyTo?.id);
     textarea.value = "";
@@ -70,12 +73,26 @@ async function render(): Promise<void> {
   try {
     let states = await client.reactions(keys);
     const token = authentication.token();
-    if (token !== null) states = await client.syncViewerUpvotes(keys, token);
+    if (token !== null) {
+      states = await client.syncViewerUpvotes(keys, token);
+      const ids = [...states.values()].flatMap((state) => state.id ? [state.id] : []);
+      cardViewerStates = new Map(await viewerSubjectStates(token, ids));
+    } else {
+      cardViewerStates.clear();
+    }
+    renderRankingCards(states);
     const existingKeys = keys.filter((key) => states.get(key)?.id);
-    const contents = await client.discussionContents(existingKeys);
     const root = required("thread");
     root.replaceChildren();
-    await Promise.all(keys.map(async (key) => {
+    let contents = new Map<string, { discussion: Record<string, unknown> }>();
+    let contentError: unknown;
+    try {
+      contents = new Map(await client.discussionContents(existingKeys));
+      await addViewerState([...contents.values()].map((value) => value.discussion));
+    } catch (error) {
+      contentError = error;
+    }
+    for (const key of keys) {
       const article = document.createElement("article");
       article.className = "discussion";
       root.append(article);
@@ -86,20 +103,77 @@ async function render(): Promise<void> {
       }
       try {
         const payload = contents.get(key);
-        if (!payload) throw new Error("Missing discussion content");
-        await addViewerState(payload.discussion);
+        if (!payload) {
+          throw contentError instanceof Error
+            ? contentError
+            : new Error("Missing discussion content");
+        }
         renderDiscussion(article, key, payload.discussion, state);
       } catch (error) {
         appendText(article, "h2", key);
         appendText(article, "p", error instanceof FeedbackError ? error.code : "Unable to load thread.");
       }
-    }));
-    status.textContent = "Ready.";
+    }
+    status.textContent = contentError === undefined ? "Ready." : "Counters loaded; discussions unavailable.";
   } catch (error) {
     status.textContent = error instanceof FeedbackError ? error.code : "Unable to load discussions.";
   }
 }
 
+function renderRankingCards(states: ReadonlyMap<string, ReactionState>): void {
+  const root = required("cards");
+  root.replaceChildren();
+  for (const key of keys) {
+    const state = states.get(key);
+    const card = document.createElement("article");
+    card.className = "ranking-card";
+    appendText(card, "h3", key);
+    const button = actionButton(
+      `${state?.viewerHasUpvoted === true ? "Remove upvote" : "Upvote"} · ${String(state?.upvotes ?? 0)}`,
+      () => upvote(key),
+    );
+    button.setAttribute("aria-pressed", String(state?.viewerHasUpvoted === true));
+    card.append(button);
+    const reactions = document.createElement("div");
+    reactions.className = "reactions";
+    for (const [name, count] of Object.entries(state?.reactions ?? {})) {
+      const selected = state?.id
+        ? cardViewerStates.get(state.id)?.reactions.has(name as Reaction) === true
+        : false;
+      const reaction = actionButton(
+        `${name}: ${String(count)}`,
+        () => react(key, name as Reaction, selected),
+      );
+      reaction.className = "reaction-control";
+      reaction.setAttribute("aria-pressed", String(selected));
+      reactions.append(reaction);
+    }
+    card.append(reactions);
+    if (!state?.id) appendText(card, "small", "No discussion yet; all counters are zero.");
+    root.append(card);
+  }
+}
+
+async function react(key: string, reaction: Reaction, selected: boolean): Promise<void> {
+  try {
+    const token = authentication.token() ?? await authentication.authenticate();
+    authenticationStatus.refresh();
+    updateAuthenticationUi();
+    const state = (await client.reactions([key])).get(key);
+    if (!state?.id) throw new Error("Create the discussion with an upvote before reacting.");
+    await setReaction(token, state.id, reaction, !selected);
+    status.textContent = `Updated ${reaction} on ${key}.`;
+    await render();
+  } catch (error) {
+    status.textContent = error instanceof Error ? error.message : "Unable to react.";
+  }
+}
+
+function updateAuthenticationUi(): void {
+  const authenticated = authentication.token() !== null;
+  required("comment-submit").textContent = authenticated ? "Comment" : "Sign in and comment";
+}
+
 function renderDiscussion(
   root: HTMLElement,
   key: string,
@@ -241,7 +315,7 @@ function renderComment(key: string, comment: Record<string, unknown>, depth: num
       const tag = appendText(
         article,
         "span",
-        `${string(value.content)}: ${String(integer(record(value.users)?.totalCount))}`,
+        `${string(value.content)}: ${String(integer(record(value.reactors)?.totalCount))}`,
         "tag",
       );
       if (value.viewerHasReacted === true) tag.classList.add("selected");
@@ -285,11 +359,11 @@ function isViewer(author: unknown): boolean {
   return viewerId !== undefined && string(record(author)?.id) === viewerId;
 }
 
-async function addViewerState(content: Record<string, unknown>): Promise<void> {
+async function addViewerState(contents: readonly Record<string, unknown>[]): Promise<void> {
   const token = authentication.token();
   if (token === null) return;
   const subjects = new Map<string, Record<string, unknown>>();
-  collectSubjects(content, subjects);
+  for (const content of contents) collectSubjects(content, subjects);
   const states = await viewerSubjectStates(token, [...subjects.keys()]);
   for (const [id, state] of states) overlayViewerState(subjects.get(id), state);
 }

src/feedback/protocol/github/client.py

@@ -92,6 +92,11 @@ async def graphql(
         if response.status_code >= 400:
             raise _response_error(response, "github_http_error")
         if data.get("errors"):
+            logger.warning(
+                "GitHub GraphQL operation rejected: errors=%s github_request_id=%s",
+                _safe_graphql_errors(data.get("errors")),
+                response.headers.get("x-github-request-id"),
+            )
             raise _response_error(response, "github_graphql_error")
         result = data.get("data")
         if not isinstance(result, dict):
@@ -184,6 +189,26 @@ def _json_object(response: httpx.Response) -> dict[str, Any]:
     return value
 
 
+def _safe_graphql_errors(value: object) -> str:
+    if not isinstance(value, list):
+        return "unknown"
+    result: list[str] = []
+    for error in value[:5]:
+        if not isinstance(error, dict):
+            result.append("unknown")
+            continue
+        kind = error.get("type")
+        path = error.get("path")
+        safe_kind = kind if isinstance(kind, str) and kind.isidentifier() else "unknown"
+        safe_path = (
+            ".".join(item for item in path if isinstance(item, str))
+            if isinstance(path, list)
+            else ""
+        )
+        result.append(f"{safe_kind}:{safe_path}" if safe_path else safe_kind)
+    return ",".join(result) or "unknown"
+
+
 def _response_error(
     response: httpx.Response, code: str, *, retry_after: float | None = None
 ) -> GitHubError:

src/feedback/protocol/github/discussions.py

@@ -89,7 +89,7 @@ async def create(
         return discussion
 
     async def content(
-        self, site: SiteConfig, discussion_ids: list[str], comments: int = 100
+        self, site: SiteConfig, discussion_ids: list[str], comments: int = 25
     ) -> dict[str, Any]:
         return await self._client.graphql(
             site.installation_id,
@@ -155,8 +155,8 @@ def _vote_counts(value: object) -> tuple[int, int, dict[str, int]]:
     for group in value:
         if not isinstance(group, dict) or not isinstance(group.get("content"), str):
             raise GitHubError("github_malformed_response")
-        users = group.get("users")
-        count = users.get("totalCount") if isinstance(users, dict) else None
+        reactors = group.get("reactors", group.get("users"))
+        count = reactors.get("totalCount") if isinstance(reactors, dict) else None
         if isinstance(count, bool) or not isinstance(count, int) or count < 0:
             raise GitHubError("github_malformed_response")
         counts[group["content"]] = count

src/feedback/protocol/github/queries/discussion.graphql

@@ -24,7 +24,7 @@ query FeedbackDiscussion(
       repository { id }
       category { id name }
       labels(first: 100) @include(if: $includeLabels) { nodes { id name color description } }
-      reactionGroups @include(if: $includeReactions) { content users { totalCount nodes { id } } }
+      reactionGroups @include(if: $includeReactions) { content reactors { totalCount } }
       upvoteCount
       poll @include(if: $includePolls) {
         question
@@ -44,7 +44,7 @@ query FeedbackDiscussion(
           isMinimized @include(if: $includeModeration)
           minimizedReason @include(if: $includeModeration)
           isAnswer @include(if: $includeAnswers)
-          reactionGroups @include(if: $includeCommentReactions) { content users { totalCount } }
+          reactionGroups @include(if: $includeCommentReactions) { content reactors { totalCount } }
           upvoteCount @include(if: $includeCommentUpvotes)
           replies(first: $comments) {
             totalCount
@@ -57,7 +57,7 @@ query FeedbackDiscussion(
               createdAt updatedAt deletedAt
               isMinimized @include(if: $includeModeration)
               minimizedReason @include(if: $includeModeration)
-              reactionGroups @include(if: $includeCommentReactions) { content users { totalCount } }
+              reactionGroups @include(if: $includeCommentReactions) { content reactors { totalCount } }
               upvoteCount @include(if: $includeCommentUpvotes)
             }
           }

src/feedback/protocol/github/queries/discussion_reactions.graphql

@@ -7,7 +7,7 @@ query FeedbackDiscussionReactions($ids: [ID!]!, $includeReactions: Boolean!) {
       upvoteCount
       reactionGroups @include(if: $includeReactions) {
         content
-        users { totalCount nodes { id } }
+        reactors { totalCount }
       }
     }
   }