more graphql fixes and some frontend changes

Author: Tsche

config/sites.dev.toml

@@ -19,7 +19,7 @@ repository_id = "R_kgDOUc9png"
 installation_id = 162105624
 default_category = "general"
 intents = ["upvotes", "reactions", "discussion", "comments", "answers", "polls", "authors", "moderation", "comment_reactions", "comment_upvotes", "labels", "github_link"]
-reaction_counters = ["LAUGH", "HOORAY", "CONFUSED", "HEART", "ROCKET", "EYES"]
+reaction_counters = ["THUMBS_UP", "THUMBS_DOWN", "LAUGH", "HOORAY", "CONFUSED", "HEART", "ROCKET", "EYES"]
 known_discussions = [
   { key = "feedback/example", id = "D_kwDOUc9pns4ApUHg", number = 1, category = "general", title = "feedback/example" },
   { key = "feedback/documentation", id = "D_kwDOUc9pns4ApVT9", number = 2, category = "general", title = "feedback/documentation" },

config/sites.example.toml

@@ -24,7 +24,7 @@ discussion_body = "Discussion for [{title}]({url})."
 # refresh_sweep_seconds = 86400
 # max_batch_size = 100
 intents = ["upvotes", "reactions", "discussion", "comments", "answers", "polls", "authors", "moderation", "comment_reactions", "comment_upvotes", "labels", "github_link"]
-reaction_counters = ["LAUGH", "HOORAY", "CONFUSED", "HEART", "ROCKET", "EYES"]
+reaction_counters = ["THUMBS_UP", "THUMBS_DOWN", "LAUGH", "HOORAY", "CONFUSED", "HEART", "ROCKET", "EYES"]
 # Optional: pre-register discussions whose stable numeric and node IDs are known
 # so anonymous reads work immediately after starting with an empty database.
 # known_discussions = [

config/sites.toml

@@ -18,7 +18,7 @@ installation_id = 162105624
 default_category = "general"
 discussion_body = "Feedback for [{title}]({url})"
 intents = ["upvotes", "reactions", "discussion", "comments", "answers", "polls", "authors", "moderation", "comment_reactions", "comment_upvotes", "labels", "github_link"]
-reaction_counters = ["LAUGH", "HOORAY", "CONFUSED", "HEART", "ROCKET", "EYES"]
+reaction_counters = ["THUMBS_UP", "THUMBS_DOWN", "LAUGH", "HOORAY", "CONFUSED", "HEART", "ROCKET", "EYES"]
 known_discussions = [
   { key = "feedback/example", id = "D_kwDOUc9pns4ApUHg", number = 1, category = "general", title = "feedback/example" },
   { key = "feedback/documentation", id = "D_kwDOUc9pns4ApVT9", number = 2, category = "general", title = "feedback/documentation" },

runtime/pages/example/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <meta name="referrer" content="no-referrer">
-    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; style-src 'self'; connect-src https://feedback-api.cpp.social https://api.github.com http://localhost:* http://127.0.0.1:*; base-uri 'none'; form-action 'none'; frame-ancestors 'none'">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; style-src 'self'; img-src https://avatars.githubusercontent.com https://user-images.githubusercontent.com https://github.com data:; connect-src https://feedback-api.cpp.social https://api.github.com http://localhost:* http://127.0.0.1:*; base-uri 'none'; form-action 'none'; frame-ancestors 'none'">
     <link rel="stylesheet" href="/example/style.css">
     <title>Feedback integration example</title>
   </head>
@@ -21,7 +21,11 @@ <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>
+        <div class="comment-box">
+          <div class="comment-box-header">Write</div>
+          <textarea id="comment-body" rows="4" maxlength="16000" placeholder="Leave a comment"></textarea>
+          <small>Markdown is supported. Content is rendered using GitHub's sanitized Markdown HTML.</small>
+        </div>
         <button id="comment-submit" type="submit">Sign in and comment</button>
         <button id="clear-reply" type="button" hidden>Cancel reply</button>
       </form>

runtime/pages/example/style.css

@@ -1,20 +1,21 @@
 body {
-  background: #fafafa;
-  color: #202124;
-  font: 16px system-ui, sans-serif;
+  background: #f6f8fa;
+  color: #1f2328;
+  font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   margin: 0 auto;
-  max-width: 42rem;
+  max-width: 72rem;
   padding: 3rem 1.5rem;
 }
 
 main {
   background: white;
-  border: 1px solid #ddd;
-  border-radius: 0.75rem;
+  border: 1px solid #d0d7de;
+  border-radius: 0.375rem;
   padding: 2rem;
 }
 
 .authentication-status {
+  align-items: center;
   display: flex;
   justify-content: flex-end;
   margin: 1rem 0;
@@ -24,9 +25,34 @@ main {
   background: #c9362b;
   border: 2px solid #8f241d;
   border-radius: 50%;
-  height: 1.25rem;
-  padding: 0;
-  width: 1.25rem;
+  display: inline-block;
+  height: 0.65rem;
+  width: 0.65rem;
+}
+
+.feedback-authentication-status > span:nth-child(2) {
+  align-items: center;
+  display: flex;
+  font-weight: 600;
+  gap: 0.4rem;
+  margin-left: 0.5rem;
+}
+
+.feedback-authentication-status > span:nth-child(2) a {
+  align-items: center;
+  color: inherit;
+  display: flex;
+  gap: 0.4rem;
+  text-decoration: none;
+}
+
+.feedback-authentication-status img,
+.comment-author img {
+  border-radius: 50%;
+}
+
+.feedback-authentication-action {
+  margin-left: 0.75rem;
 }
 
 .feedback-authentication-dot.authenticated {
@@ -47,14 +73,16 @@ main {
 }
 
 .ranking-card {
-  border: 1px solid #d7dbe0;
-  border-radius: 0.5rem;
+  background: #fff;
+  border: 1px solid #d0d7de;
+  border-radius: 0.375rem;
+  box-shadow: 0 1px 0 rgba(31, 35, 40, 0.04);
   padding: 1rem;
 }
 
 .ranking-card h3 { margin-top: 0; }
 
-.discussion { border: 1px solid #ddd; border-radius: 0.5rem; padding: 1rem; }
+.discussion { border: 1px solid #d0d7de; border-radius: 0.375rem; 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; }
 
@@ -66,14 +94,23 @@ main {
 .reactions {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.75rem;
+  gap: 0.35rem;
   margin-top: 1rem;
 }
 
 .reaction-control {
-  border: 1px solid #c7ced8;
-  border-radius: 0.25rem;
-  padding: 0.35rem 0.55rem;
+  background: #f6f8fa;
+  border: 1px solid #d0d7de;
+  border-radius: 2rem;
+  color: #0969da;
+  min-width: 3.25rem;
+  padding: 0.25rem 0.55rem;
+}
+
+.reaction-control:hover,
+.reaction-control[aria-pressed="true"] {
+  background: #ddf4ff;
+  border-color: #54aeff;
 }
 
 .poll-option {
@@ -94,27 +131,79 @@ main {
 }
 
 .comment {
-  border-left: 3px solid #d7dbe0;
+  border: 1px solid #d0d7de;
+  border-radius: 0.375rem;
   margin-top: 1.5rem;
-  padding-left: 1rem;
+  overflow: hidden;
+  padding: 0 1rem 1rem;
+}
+
+.comment-author {
+  align-items: center;
+  background: #f6f8fa;
+  border-bottom: 1px solid #d0d7de;
+  display: flex;
+  gap: 0.5rem;
+  margin: 0 -1rem 1rem;
+  padding: 0.55rem 1rem;
 }
 
+.comment-author time { color: #656d76; margin-left: auto; }
+
 .comment-form {
   display: grid;
   gap: 0.75rem;
   margin-top: 1.5rem;
 }
 
 textarea {
+  border: 1px solid #d0d7de;
+  border-radius: 0.375rem;
   font: inherit;
+  min-height: 7rem;
   padding: 0.75rem;
   resize: vertical;
 }
 
+.comment-box {
+  border: 1px solid #d0d7de;
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+
+.comment-box-header {
+  background: #f6f8fa;
+  border-bottom: 1px solid #d0d7de;
+  font-weight: 600;
+  padding: 0.6rem 0.9rem;
+}
+
+.comment-box textarea {
+  border: 0;
+  box-sizing: border-box;
+  display: block;
+  margin: 0;
+  width: 100%;
+}
+
+.comment-box small {
+  color: #656d76;
+  display: block;
+  padding: 0 0.75rem 0.65rem;
+}
+
 .reply {
   margin-left: 1.5rem;
 }
 
+.markdown-body { line-height: 1.5; overflow-wrap: anywhere; }
+.markdown-body pre { background: #f6f8fa; border-radius: 0.375rem; overflow: auto; padding: 1rem; }
+.markdown-body code { background: rgba(175, 184, 193, 0.2); border-radius: 0.375rem; padding: 0.15em 0.3em; }
+.markdown-body pre code { background: transparent; padding: 0; }
+.markdown-body img { max-width: 100%; }
+.markdown-body table { border-collapse: collapse; display: block; overflow: auto; }
+.markdown-body td, .markdown-body th { border: 1px solid #d0d7de; padding: 0.4rem 0.8rem; }
+
 .tag {
   background: #eef2f6;
   border-radius: 0.25rem;
@@ -123,13 +212,17 @@ textarea {
 }
 
 button {
+  background: #f6f8fa;
+  border: 1px solid rgba(31, 35, 40, 0.15);
+  border-radius: 0.375rem;
   cursor: pointer;
   font: inherit;
   padding: 0.6rem 1rem;
 }
 
 button[aria-pressed="true"] {
-  background: #fff4bd;
+  background: #ddf4ff;
+  border-color: #54aeff;
 }
 
 #status {

runtime/src/api/client.ts

@@ -54,6 +54,8 @@ export interface AccessToken {
   expiresAt: number;
   creationGrant: string;
   viewerId?: string;
+  viewerLogin?: string;
+  viewerAvatarUrl?: string;
 }
 
 export interface EnsuredDiscussion {

runtime/src/auth/controller.ts

@@ -96,8 +96,13 @@ export class Authentication {
         signal,
       );
       const token = await this.#service.exchange(code, authorization.state, verifier, signal);
-      const viewerId = await validateViewer(this.#fetch, token.value, signal);
-      const authenticated = { ...token, viewerId };
+      const viewer = await validateViewer(this.#fetch, token.value, signal);
+      const authenticated = {
+        ...token,
+        viewerId: viewer.id,
+        viewerLogin: viewer.login,
+        viewerAvatarUrl: viewer.avatarUrl,
+      };
       this.#tokens.set(authenticated);
       return authenticated;
     } catch (error) {
@@ -172,7 +177,7 @@ async function validateViewer(
   fetch: typeof globalThis.fetch,
   token: string,
   signal?: AbortSignal,
-): Promise<string> {
+): Promise<{ id: string; login: string; avatarUrl: string }> {
   const init: RequestInit = {
     method: "POST",
     headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
@@ -182,20 +187,21 @@ async function validateViewer(
   const response = await fetch("https://api.github.com/graphql", init);
   if (!response.ok) throw new AuthenticationError("token_invalid");
   const body: unknown = await response.json();
-  const viewerId = viewer(body);
-  if (viewerId === null) throw new AuthenticationError("token_invalid");
-  return viewerId;
+  const result = viewer(body);
+  if (result === null) throw new AuthenticationError("token_invalid");
+  return result;
 }
 
-function viewer(value: unknown): string | null {
+function viewer(value: unknown): { id: string; login: string; avatarUrl: string } | null {
   if (!value || typeof value !== "object") return null;
   const data = (value as { data?: unknown }).data;
   if (!data || typeof data !== "object") return null;
   const viewer = (data as { viewer?: unknown }).viewer;
   if (!viewer || typeof viewer !== "object") return null;
-  const candidate = viewer as { id?: unknown; login?: unknown };
-  return typeof candidate.id === "string" && typeof candidate.login === "string"
-    ? candidate.id
+  const candidate = viewer as { id?: unknown; login?: unknown; avatarUrl?: unknown };
+  return typeof candidate.id === "string" && typeof candidate.login === "string" &&
+    typeof candidate.avatarUrl === "string"
+    ? { id: candidate.id, login: candidate.login, avatarUrl: candidate.avatarUrl }
     : null;
 }
 

runtime/src/auth/session.ts

@@ -7,6 +7,8 @@ interface StoredToken {
   expiresAt: number;
   creationGrant: string;
   viewerId: string;
+  viewerLogin: string;
+  viewerAvatarUrl: string;
 }
 
 export class SessionTokenStore {
@@ -32,6 +34,10 @@ export class SessionTokenStore {
         typeof parsed.creationGrant !== "string" ||
         typeof parsed.viewerId !== "string" ||
         parsed.viewerId.length === 0 ||
+        typeof parsed.viewerLogin !== "string" ||
+        parsed.viewerLogin.length === 0 ||
+        typeof parsed.viewerAvatarUrl !== "string" ||
+        !parsed.viewerAvatarUrl.startsWith("https://") ||
         (parsed.expiresAt ?? 0) * 1000 <= this.#clock()
       ) {
         this.clear();
@@ -42,6 +48,8 @@ export class SessionTokenStore {
         expiresAt: parsed.expiresAt,
         creationGrant: parsed.creationGrant,
         viewerId: parsed.viewerId,
+        viewerLogin: parsed.viewerLogin,
+        viewerAvatarUrl: parsed.viewerAvatarUrl,
       } as AccessToken;
     } catch {
       this.clear();