@dfosco/storyboard-core 1.10.0 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dfosco/storyboard-core",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "type": "module",
   "license": "MIT",
   "repository": {

package/src/comments/api.js

@@ -9,6 +9,8 @@ import { getCommentsConfig } from './config.js'
 import { parseMetadata, serializeMetadata, updateMetadata } from './metadata.js'
 import {
   SEARCH_DISCUSSION,
+  SEARCH_DISCUSSION_LIGHTWEIGHT,
+  GET_COMMENT_DETAIL,
   GET_CATEGORY_ID,
   CREATE_DISCUSSION,
   ADD_COMMENT,
@@ -52,6 +54,48 @@ export async function fetchRouteDiscussion(route) {
   return { ...discussion, comments }
 }
 
+/**
+ * Fetch lightweight comment listing for a route (pins only — no replies, no reactions).
+ * Returns null if no discussion exists for the route.
+ * @param {string} route - The route path (e.g. "/Overview")
+ * @returns {Promise<object|null>}
+ */
+export async function fetchRouteCommentsSummary(route) {
+  const config = getCommentsConfig()
+  const title = `Comments: ${route}`
+  const query = `"${title}" in:title repo:${config.repo.owner}/${config.repo.name}`
+
+  const data = await graphql(SEARCH_DISCUSSION_LIGHTWEIGHT, { query })
+  const discussion = data.search?.nodes?.[0]
+  if (!discussion) return null
+
+  const comments = (discussion.comments?.nodes ?? []).map((comment) => {
+    const { meta, text } = parseMetadata(comment.body)
+    return { ...comment, meta, text }
+  })
+
+  return { ...discussion, comments }
+}
+
+/**
+ * Fetch full detail for a single comment (replies, reactions, etc.).
+ * @param {string} commentId - The GraphQL node ID of the comment
+ * @returns {Promise<object|null>}
+ */
+export async function fetchCommentDetail(commentId) {
+  const data = await graphql(GET_COMMENT_DETAIL, { id: commentId })
+  const node = data.node
+  if (!node) return null
+
+  const { meta, text } = parseMetadata(node.body)
+  const replies = (node.replies?.nodes ?? []).map((reply) => {
+    const { meta: replyMeta, text: replyText } = parseMetadata(reply.body)
+    return { ...reply, meta: replyMeta, text: replyText }
+  })
+
+  return { ...node, meta, text, replies }
+}
+
 /**
  * Get the repository ID and discussion category ID.
  * @returns {Promise<{ repositoryId: string, categoryId: string }>}

package/src/comments/api.test.js

@@ -1,5 +1,7 @@
 import {
   fetchRouteDiscussion,
+  fetchRouteCommentsSummary,
+  fetchCommentDetail,
   createComment,
   replyToComment,
   resolveComment,
@@ -103,6 +105,92 @@ describe('api', () => {
     })
   })
 
+  describe('fetchRouteCommentsSummary', () => {
+    it('returns null when no discussion found', async () => {
+      graphql.mockResolvedValue({ search: { nodes: [] } })
+      const result = await fetchRouteCommentsSummary('/Overview')
+      expect(result).toBeNull()
+    })
+
+    it('parses comments with metadata (no replies/reactions)', async () => {
+      graphql.mockResolvedValue({
+        search: {
+          nodes: [
+            {
+              id: 'D_123',
+              title: 'Comments: /Overview',
+              comments: {
+                nodes: [
+                  {
+                    id: 'C_1',
+                    body: '<!-- sb-meta {"x":10,"y":20} -->\nHello',
+                    author: { login: 'dfosco', avatarUrl: 'https://example.com' },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      })
+
+      const result = await fetchRouteCommentsSummary('/Overview')
+      expect(result.id).toBe('D_123')
+      expect(result.comments).toHaveLength(1)
+      expect(result.comments[0].meta).toEqual({ x: 10, y: 20 })
+      expect(result.comments[0].text).toBe('Hello')
+      // Should use lightweight query (no replies/reactions in query)
+      expect(graphql).toHaveBeenCalledWith(
+        expect.stringContaining('SearchDiscussionLightweight'),
+        expect.any(Object)
+      )
+    })
+  })
+
+  describe('fetchCommentDetail', () => {
+    it('returns null when node not found', async () => {
+      graphql.mockResolvedValue({ node: null })
+      const result = await fetchCommentDetail('C_999')
+      expect(result).toBeNull()
+    })
+
+    it('returns full comment with replies and reactions', async () => {
+      graphql.mockResolvedValue({
+        node: {
+          id: 'C_1',
+          body: '<!-- sb-meta {"x":10,"y":20} -->\nHello',
+          createdAt: '2026-01-01T00:00:00Z',
+          author: { login: 'dfosco', avatarUrl: 'https://example.com' },
+          replies: {
+            nodes: [
+              {
+                id: 'R_1',
+                body: 'A reply',
+                createdAt: '2026-01-02T00:00:00Z',
+                author: { login: 'user2', avatarUrl: 'https://example.com/2' },
+                reactionGroups: [],
+              },
+            ],
+          },
+          reactionGroups: [
+            { content: 'HEART', users: { totalCount: 1 }, viewerHasReacted: true },
+          ],
+        },
+      })
+
+      const result = await fetchCommentDetail('C_1')
+      expect(result.id).toBe('C_1')
+      expect(result.meta).toEqual({ x: 10, y: 20 })
+      expect(result.text).toBe('Hello')
+      expect(result.replies).toHaveLength(1)
+      expect(result.replies[0].text).toBe('A reply')
+      expect(result.reactionGroups).toHaveLength(1)
+      expect(graphql).toHaveBeenCalledWith(
+        expect.stringContaining('GetCommentDetail'),
+        { id: 'C_1' }
+      )
+    })
+  })
+
   describe('createComment', () => {
     it('creates a comment on existing discussion', async () => {
       // First call: search for discussion

package/src/comments/commentCache.js

@@ -0,0 +1,55 @@
+/**
+ * localStorage cache for comment pin data.
+ *
+ * Stores lightweight comment listings per route so pins render instantly
+ * on repeat visits without hitting the GitHub API.
+ */
+
+const CACHE_PREFIX = 'sb-comments:'
+const TTL_MS = 2 * 60 * 1000 // 2 minutes
+
+/**
+ * Get cached comment listing for a route.
+ * Returns null if cache is missing or expired.
+ * @param {string} route
+ * @returns {object|null} - Cached discussion object (with .comments array)
+ */
+export function getCachedComments(route) {
+  try {
+    const raw = localStorage.getItem(CACHE_PREFIX + route)
+    if (!raw) return null
+    const entry = JSON.parse(raw)
+    if (Date.now() - entry.ts > TTL_MS) {
+      localStorage.removeItem(CACHE_PREFIX + route)
+      return null
+    }
+    return entry.data
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Store comment listing in cache for a route.
+ * @param {string} route
+ * @param {object} data - Discussion object with .comments array
+ */
+export function setCachedComments(route, data) {
+  try {
+    localStorage.setItem(CACHE_PREFIX + route, JSON.stringify({ ts: Date.now(), data }))
+  } catch {
+    // localStorage full or unavailable — ignore
+  }
+}
+
+/**
+ * Clear cached comments for a specific route.
+ * @param {string} route
+ */
+export function clearCachedComments(route) {
+  try {
+    localStorage.removeItem(CACHE_PREFIX + route)
+  } catch {
+    // ignore
+  }
+}

package/src/comments/commentCache.test.js

@@ -0,0 +1,48 @@
+import { getCachedComments, setCachedComments, clearCachedComments } from './commentCache.js'
+
+describe('commentCache', () => {
+  beforeEach(() => {
+    localStorage.clear()
+  })
+
+  it('returns null for uncached route', () => {
+    expect(getCachedComments('/Overview')).toBeNull()
+  })
+
+  it('stores and retrieves cached comments', () => {
+    const data = { id: 'D_1', comments: [{ id: 'C_1', meta: { x: 10, y: 20 } }] }
+    setCachedComments('/Overview', data)
+    const cached = getCachedComments('/Overview')
+    expect(cached).toEqual(data)
+  })
+
+  it('returns null for expired cache', () => {
+    const data = { id: 'D_1', comments: [] }
+    // Manually write expired entry
+    localStorage.setItem('sb-comments:/Overview', JSON.stringify({
+      ts: Date.now() - 3 * 60 * 1000, // 3 min ago (exceeds 2-min TTL)
+      data,
+    }))
+    expect(getCachedComments('/Overview')).toBeNull()
+  })
+
+  it('clears cached comments for a route', () => {
+    setCachedComments('/Overview', { id: 'D_1', comments: [] })
+    clearCachedComments('/Overview')
+    expect(getCachedComments('/Overview')).toBeNull()
+  })
+
+  it('does not affect other routes when clearing', () => {
+    const data1 = { id: 'D_1', comments: [] }
+    const data2 = { id: 'D_2', comments: [] }
+    setCachedComments('/Overview', data1)
+    setCachedComments('/Issues', data2)
+    clearCachedComments('/Overview')
+    expect(getCachedComments('/Issues')).toEqual(data2)
+  })
+
+  it('handles corrupted localStorage gracefully', () => {
+    localStorage.setItem('sb-comments:/Overview', 'not-json')
+    expect(getCachedComments('/Overview')).toBeNull()
+  })
+})

package/src/comments/index.js

@@ -17,6 +17,8 @@ export { parseMetadata, serializeMetadata, updateMetadata } from './metadata.js'
 // API
 export {
   fetchRouteDiscussion,
+  fetchRouteCommentsSummary,
+  fetchCommentDetail,
   createComment,
   replyToComment,
   resolveComment,
@@ -30,6 +32,9 @@ export {
   listDiscussions,
 } from './api.js'
 
+// Cache
+export { getCachedComments, setCachedComments, clearCachedComments } from './commentCache.js'
+
 // GraphQL client (for advanced use)
 export { graphql } from './graphql.js'
 

package/src/comments/queries.js

@@ -2,7 +2,7 @@
  * GraphQL query and mutation strings for the comments system.
  */
 
-/** Search for a discussion by title in a repo */
+/** Search for a discussion by title — full data (used by drawer) */
 export const SEARCH_DISCUSSION = `
   query SearchDiscussion($query: String!) {
     search(query: $query, type: DISCUSSION, first: 1) {
@@ -50,6 +50,69 @@ export const SEARCH_DISCUSSION = `
   }
 `
 
+/** Search for a discussion — lightweight (pins only: id, body for metadata, author) */
+export const SEARCH_DISCUSSION_LIGHTWEIGHT = `
+  query SearchDiscussionLightweight($query: String!) {
+    search(query: $query, type: DISCUSSION, first: 1) {
+      nodes {
+        ... on Discussion {
+          id
+          title
+          url
+          comments(first: 100) {
+            nodes {
+              id
+              body
+              author {
+                login
+                avatarUrl
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`
+
+/** Fetch full detail for a single comment by node ID */
+export const GET_COMMENT_DETAIL = `
+  query GetCommentDetail($id: ID!) {
+    node(id: $id) {
+      ... on DiscussionComment {
+        id
+        body
+        createdAt
+        author {
+          login
+          avatarUrl
+        }
+        replies(first: 50) {
+          nodes {
+            id
+            body
+            createdAt
+            author {
+              login
+              avatarUrl
+            }
+            reactionGroups {
+              content
+              users(first: 0) { totalCount }
+              viewerHasReacted
+            }
+          }
+        }
+        reactionGroups {
+          content
+          users(first: 0) { totalCount }
+          viewerHasReacted
+        }
+      }
+    }
+  }
+`
+
 /** Get the discussion category ID by name */
 export const GET_CATEGORY_ID = `
   query GetCategoryId($owner: String!, $name: String!, $slug: String!) {

package/src/comments/ui/authModal.js

@@ -21,30 +21,29 @@ export function openAuthModal() {
     const backdrop = document.createElement('div')
     backdrop.id = MODAL_ID
     backdrop.className = 'sb-auth-backdrop fixed top-0 right-0 bottom-0 left-0 flex items-center justify-center sans-serif'
-    backdrop.style.cssText = 'z-index:100000;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);'
 
     backdrop.innerHTML = `
-      <div class="sb-bg ba sb-b-default br3 sb-shadow sb-fg overflow-hidden" style="width:420px;max-width:calc(100vw - 32px)" x-data="sbAuthModal">
+      <div class="sb-auth-modal sb-bg ba sb-b-default br3 sb-shadow sb-fg overflow-hidden" x-data="sbAuthModal">
         <div class="flex items-center justify-between ph4 pv3 bb sb-b-muted">
           <h2 class="ma0 f5 fw6 sb-fg">Sign in for comments</h2>
-          <button class="flex items-center justify-center bg-transparent bn br2 sb-fg-muted pointer" style="width:28px;height:28px;font-size:18px;line-height:1" @click="close()" aria-label="Close">×</button>
+          <button class="flex items-center justify-center bg-transparent bn br2 sb-fg-muted pointer sb-close-btn" @click="close()" aria-label="Close">×</button>
         </div>
         <div class="pa4">
-          <p class="ma0 mb3 lh-copy sb-fg-muted" style="font-size:13px">
+          <p class="ma0 mb3 lh-copy sb-fg-muted sb-f-sm">
             Enter a <a class="sb-fg-accent no-underline" href="https://github.com/settings/tokens/new" target="_blank" rel="noopener">GitHub Personal Access Token</a>
             to leave comments on this prototype. Your token is stored locally in your browser.
           </p>
-          <label class="db mb1 fw5 sb-fg" style="font-size:13px" for="sb-auth-token-input">Personal Access Token</label>
-          <input class="sb-input w-100 ph3 pv2 br2 f6 code db" style="box-sizing:border-box" id="sb-auth-token-input" type="password"
+          <label class="db mb1 fw5 sb-fg sb-f-sm" for="sb-auth-token-input">Personal Access Token</label>
+          <input class="sb-input w-100 ph3 pv2 br2 f6 code db" id="sb-auth-token-input" type="password"
                  placeholder="ghp_xxxxxxxxxxxx" autocomplete="off" spellcheck="false"
                  x-model="token" @keydown.enter="submit()" />
-          <div class="mt2 ph3 pv2 sb-bg-inset ba sb-b-muted br2 f7 sb-fg-muted lh-copy">Required scopes: <code class="dib ph1 sb-bg-muted br1 code sb-fg" style="font-size:11px;padding-top:1px;padding-bottom:1px">repo</code> <code class="dib ph1 sb-bg-muted br1 code sb-fg" style="font-size:11px;padding-top:1px;padding-bottom:1px">read:user</code></div>
+          <div class="mt2 ph3 pv2 sb-bg-inset ba sb-b-muted br2 f7 sb-fg-muted lh-copy">Required scopes: <code class="dib ph1 sb-bg-muted br1 code sb-fg sb-code-badge">repo</code> <code class="dib ph1 sb-bg-muted br1 code sb-fg sb-code-badge">read:user</code></div>
           <template x-if="error">
-            <div class="mt2 ph3 pv2 br2 sb-fg-danger" style="font-size:13px;background:color-mix(in srgb, var(--sb-fg-danger) 10%, transparent);border:1px solid color-mix(in srgb, var(--sb-fg-danger) 30%, transparent)" x-text="error"></div>
+            <div class="mt2 ph3 pv2 br2 sb-fg-danger sb-f-sm sb-error-alert" x-text="error"></div>
           </template>
           <template x-if="user">
             <div class="flex items-center pv1">
-              <img class="br-100 ba sb-b-default mr3" style="width:40px;height:40px;border-width:2px" :src="user.avatarUrl" :alt="user.login" />
+              <img class="br-100 ba sb-b-default mr3 sb-avatar-lg" :src="user.avatarUrl" :alt="user.login" />
               <div class="f6 sb-fg">
                 <span x-text="user.login"></span>
                 <span class="db f7 sb-fg-success mt1">✓ Signed in</span>
@@ -53,8 +52,8 @@ export function openAuthModal() {
           </template>
         </div>
         <div class="flex items-center justify-end ph4 pv3 bt sb-b-muted">
-          <button class="sb-btn-cancel ph3 pv1 br2 fw5 sans-serif pointer mr2" style="font-size:13px" @click="close()">Cancel</button>
-          <button class="sb-btn-success ph3 pv1 br2 fw5 sans-serif pointer bn" style="font-size:13px" :disabled="submitting"
+          <button class="sb-btn-cancel ph3 pv1 br2 fw5 sans-serif pointer mr2 sb-f-sm" @click="close()">Cancel</button>
+          <button class="sb-btn-success ph3 pv1 br2 fw5 sans-serif pointer bn sb-f-sm" :disabled="submitting"
                   @click="user ? done() : submit()" x-text="user ? 'Done' : (submitting ? 'Validating…' : 'Sign in')">
             Sign in
           </button>