Add emoji reactions to acknowledge and report command status

[DeDuckProject]

Summary

This PR adds GitHub emoji reactions to provide immediate visual feedback when users trigger the /glimpse command on pull requests. The workflow now reacts with 👀 when a command is received, 🎉 when it succeeds, and 😕 when it fails.

Key Changes

• Workflow improvements (demo.yml):

  • Added lightweight ack job that reacts with 👀 immediately upon detecting /glimpse comment, running in parallel with the main demo job for faster acknowledgment
  • Added success reaction (🎉) and failure reaction (😕) steps to the demo job to report final status

• Action code refactoring (packages/action/src/index.ts):

  • Extracted reaction logic into reusable addCommentReaction() helper function
  • Moved acknowledgment reaction from index.ts to check.ts (earlier in execution pipeline for external users)
  • Added success and failure reactions at the end of the demo job
  • Stored commentId for use throughout the action lifecycle

• Check module update (packages/action/src/check.ts):

  • Moved the initial 👀 acknowledgment reaction here, which runs earlier in the execution flow and is more appropriate for external consumers of the action

• Documentation (CLAUDE.md):

  • Added "External-First Design Principle" section documenting best practices for maintaining the action as a reusable component for other repositories
  • Emphasizes backwards compatibility, zero-config defaults, and testing from a consumer perspective

Implementation Details

The acknowledgment reaction now happens in the check.ts module rather than index.ts, ensuring external users see immediate feedback even if they only use the action's check functionality. The parallel ack job in the workflow provides an additional fast-path for acknowledgment without requiring any checkout or installation steps.

All reactions are non-fatal (wrapped in try-catch) to ensure workflow failures don't cascade from reaction API errors.

https://claude.ai/code/session_01JHYRHYBPULqbjvS5eayG2e

[DeDuckProject]

/glimpse

[github-actions]

UI Demo Preview

Changes detected in: .github/workflows/demo.yml, CLAUDE.md, packages/action/src/check.ts, packages/action/src/index.ts

What changed: Added emoji reaction feedback to PR comments when the /glimpse command is triggered. The system now reacts with 👀 immediately to acknowledge the command, then follows up with 🎉 on success or 😕 on failure.

Demo script (auto-generated)

import type { Page } from '@playwright/test';

export async function demo(page: Page): Promise<void> {
  // Navigate to the home page
  await page.goto('http://localhost:3000');
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(1500);

  // Look for a pull request link or comment section on the home page
  // Try to find a PR comment or demo area that shows the /glimpse command flow
  const prLink = page.locator('a').filter({ hasText: /pull request|PR|#\d+/i }).first();
  const hasPrLink = await prLink.isVisible().catch(() => false);

  if (hasPrLink) {
    await prLink.click();
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(1500);
  }

  // Look for a comment input area to demonstrate adding /glimpse command
  const commentBox = page.locator('textarea, [contenteditable="true"]').first();
  const hasCommentBox = await commentBox.isVisible().catch(() => false);

  if (hasCommentBox) {
    await commentBox.click();
    await commentBox.fill('/glimpse');
    await page.waitForTimeout(1500);

    // Look for submit button
    const submitBtn = page.getByRole('button', { name: /comment|submit|post/i }).first();
    const hasSubmit = await submitBtn.isVisible().catch(() => false);
    if (hasSubmit) {
      await submitBtn.click();
      await page.waitForLoadState('networkidle');
      await page.waitForTimeout(2000);
    }
  }

  // Show the home page with any reaction UI elements visible
  await page.goto('http://localhost:3000');
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(1500);

  // Look for reaction elements (eyes 👀, hooray 🎉, confused 😕)
  const eyesReaction = page.locator('text=👀').first();
  const hasEyes = await eyesReaction.isVisible().catch(() => false);

  if (hasEyes) {
    await eyesReaction.scrollIntoViewIfNeeded();
    await page.waitForTimeout(1500);
  }

  // Look for any workflow status or demo section on the page
  const demoSection = page.locator('[data-testid*="demo"], [class*="demo"], [id*="demo"]').first();
  const hasDemoSection = await demoSection.isVisible().catch(() => false);

  if (hasDemoSection) {
    await demoSection.scrollIntoViewIfNeeded();
    await page.waitForTimeout(1500);
  }

  // Hover over any reaction badges to show tooltip/detail
  const reactionBadge = page.locator('[class*="reaction"], [aria-label*="reaction"], [data-testid*="reaction"]').first();
  const hasReaction = await reactionBadge.isVisible().catch(() => false);

  if (hasReaction) {
    await reactionBadge.hover();
    await page.waitForTimeout(1500);
  }

  // Look for hooray reaction 🎉 indicating success
  const hoorayReaction = page.locator('text=🎉').first();
  const hasHooray = await hoorayReaction.isVisible().catch(() => false);

  if (hasHooray) {
    await hoorayReaction.scrollIntoViewIfNeeded();
    await page.waitForTimeout(1500);
  }

  // Look for confused reaction 😕 showing failure scenario
  const confusedReaction = page.locator('text=😕').first();
  const hasConfused = await confusedReaction.isVisible().catch(() => false);

  if (hasConfused) {
    await confusedReaction.scrollIntoViewIfNeeded();
    await page.waitForTimeout(1500);
  }

  // Final pause to capture the end state
  await page.waitForTimeout(1500);
}

---

Generated by git-glimpse

[DeDuckProject]

/glimpse

[DeDuckProject]

/glimpse

[DeDuckProject]

/glimpse