sunpeak 0.8.5 → 0.8.8

package/template/src/resources/review-resource.test.tsx

@@ -0,0 +1,538 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { ReviewResource } from './review-resource';
+
+// Mock sunpeak hooks
+const mockSetWidgetState = vi.fn();
+const mockRequestDisplayMode = vi.fn();
+
+let mockWidgetData: Record<string, unknown> = { title: 'Test Review' };
+let mockWidgetState: Record<string, unknown> = { decision: null, decidedAt: null };
+let mockSafeArea: { insets: { top: number; bottom: number; left: number; right: number } } | null =
+  {
+    insets: { top: 0, bottom: 0, left: 0, right: 0 },
+  };
+let mockMaxHeight: number | null = 600;
+let mockUserAgent: {
+  device: { type: 'desktop' | 'mobile' | 'tablet' | 'unknown' };
+  capabilities: { hover: boolean; touch: boolean };
+} | null = {
+  device: { type: 'desktop' },
+  capabilities: { hover: true, touch: false },
+};
+let mockDisplayMode: 'inline' | 'fullscreen' = 'inline';
+
+vi.mock('sunpeak', () => ({
+  useWidgetProps: (defaultFn: () => Record<string, unknown>) => {
+    const defaults = defaultFn();
+    return { ...defaults, ...mockWidgetData };
+  },
+  useWidgetState: () => [mockWidgetState, mockSetWidgetState],
+  useSafeArea: () => mockSafeArea,
+  useMaxHeight: () => mockMaxHeight,
+  useUserAgent: () => mockUserAgent,
+  useDisplayMode: () => mockDisplayMode,
+  useWidgetAPI: () => ({ requestDisplayMode: mockRequestDisplayMode }),
+}));
+
+// Mock Button component
+vi.mock('@openai/apps-sdk-ui/components/Button', () => ({
+  Button: ({
+    children,
+    onClick,
+    variant,
+    color,
+    size,
+    className,
+    'aria-label': ariaLabel,
+  }: {
+    children: React.ReactNode;
+    onClick?: () => void;
+    variant?: string;
+    color?: string;
+    size?: string;
+    className?: string;
+    'aria-label'?: string;
+  }) => (
+    <button
+      onClick={onClick}
+      data-variant={variant}
+      data-color={color}
+      data-size={size}
+      className={className}
+      aria-label={ariaLabel}
+    >
+      {children}
+    </button>
+  ),
+}));
+
+// Mock Icon component
+vi.mock('@openai/apps-sdk-ui/components/Icon', () => ({
+  ExpandLg: ({ className }: { className?: string }) => (
+    <span data-testid="expand-icon" className={className}>
+      Expand
+    </span>
+  ),
+}));
+
+describe('ReviewResource', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockWidgetData = { title: 'Test Review' };
+    mockWidgetState = { decision: null, decidedAt: null };
+    mockSafeArea = { insets: { top: 0, bottom: 0, left: 0, right: 0 } };
+    mockMaxHeight = 600;
+    mockUserAgent = { device: { type: 'desktop' }, capabilities: { hover: true, touch: false } };
+    mockDisplayMode = 'inline';
+  });
+
+  describe('Basic Rendering', () => {
+    it('renders with title', () => {
+      mockWidgetData = { title: 'Confirm Purchase' };
+
+      render(<ReviewResource />);
+
+      expect(screen.getByText('Confirm Purchase')).toBeInTheDocument();
+    });
+
+    it('renders with description', () => {
+      mockWidgetData = {
+        title: 'Test',
+        description: 'Please review the following items',
+      };
+
+      render(<ReviewResource />);
+
+      expect(screen.getByText('Please review the following items')).toBeInTheDocument();
+    });
+
+    it('renders empty state when no sections', () => {
+      mockWidgetData = { title: 'Test', sections: [] };
+
+      render(<ReviewResource />);
+
+      expect(screen.getByText('Nothing to confirm')).toBeInTheDocument();
+    });
+
+    it('has the correct displayName', () => {
+      expect(ReviewResource.displayName).toBe('ReviewResource');
+    });
+  });
+
+  describe('Action Buttons', () => {
+    it('renders default button labels', () => {
+      render(<ReviewResource />);
+
+      expect(screen.getByText('Confirm')).toBeInTheDocument();
+      expect(screen.getByText('Cancel')).toBeInTheDocument();
+    });
+
+    it('renders custom button labels', () => {
+      mockWidgetData = {
+        title: 'Test',
+        acceptLabel: 'Approve',
+        rejectLabel: 'Decline',
+      };
+
+      render(<ReviewResource />);
+
+      expect(screen.getByText('Approve')).toBeInTheDocument();
+      expect(screen.getByText('Decline')).toBeInTheDocument();
+    });
+
+    it('calls setWidgetState with accepted decision when accept clicked', () => {
+      render(<ReviewResource />);
+
+      const acceptButton = screen.getByText('Confirm');
+      fireEvent.click(acceptButton);
+
+      expect(mockSetWidgetState).toHaveBeenCalledWith(
+        expect.objectContaining({
+          decision: 'accepted',
+          decidedAt: expect.any(String),
+        })
+      );
+    });
+
+    it('calls setWidgetState with rejected decision when reject clicked', () => {
+      render(<ReviewResource />);
+
+      const rejectButton = screen.getByText('Cancel');
+      fireEvent.click(rejectButton);
+
+      expect(mockSetWidgetState).toHaveBeenCalledWith(
+        expect.objectContaining({
+          decision: 'rejected',
+          decidedAt: expect.any(String),
+        })
+      );
+    });
+
+    it('renders danger styling for accept button when acceptDanger is true', () => {
+      mockWidgetData = { title: 'Test', acceptDanger: true };
+
+      render(<ReviewResource />);
+
+      const acceptButton = screen.getByText('Confirm');
+      expect(acceptButton).toHaveAttribute('data-color', 'danger');
+    });
+
+    it('renders primary styling for accept button by default', () => {
+      render(<ReviewResource />);
+
+      const acceptButton = screen.getByText('Confirm');
+      expect(acceptButton).toHaveAttribute('data-color', 'primary');
+    });
+  });
+
+  describe('Decision State', () => {
+    it('shows accepted message after accepting', () => {
+      mockWidgetState = { decision: 'accepted', decidedAt: '2024-01-01T00:00:00.000Z' };
+
+      render(<ReviewResource />);
+
+      expect(screen.getByText('Confirmed')).toBeInTheDocument();
+      expect(screen.queryByText('Confirm')).not.toBeInTheDocument();
+    });
+
+    it('shows rejected message after rejecting', () => {
+      mockWidgetState = { decision: 'rejected', decidedAt: '2024-01-01T00:00:00.000Z' };
+
+      render(<ReviewResource />);
+
+      expect(screen.getByText('Cancelled')).toBeInTheDocument();
+      expect(screen.queryByText('Cancel')).not.toBeInTheDocument();
+    });
+
+    it('shows custom accepted message', () => {
+      mockWidgetData = { title: 'Test', acceptedMessage: 'Order Placed!' };
+      mockWidgetState = { decision: 'accepted', decidedAt: '2024-01-01T00:00:00.000Z' };
+
+      render(<ReviewResource />);
+
+      expect(screen.getByText('Order Placed!')).toBeInTheDocument();
+    });
+
+    it('shows custom rejected message', () => {
+      mockWidgetData = { title: 'Test', rejectedMessage: 'Order Cancelled' };
+      mockWidgetState = { decision: 'rejected', decidedAt: '2024-01-01T00:00:00.000Z' };
+
+      render(<ReviewResource />);
+
+      expect(screen.getByText('Order Cancelled')).toBeInTheDocument();
+    });
+
+    it('shows decidedAt timestamp', () => {
+      mockWidgetState = { decision: 'accepted', decidedAt: '2024-01-15T10:30:00.000Z' };
+
+      render(<ReviewResource />);
+
+      // The timestamp should be displayed
+      const timestampElement = screen.getByText(/2024/);
+      expect(timestampElement).toBeInTheDocument();
+    });
+  });
+
+  describe('Sections', () => {
+    it('renders details section', () => {
+      mockWidgetData = {
+        title: 'Test',
+        sections: [
+          {
+            title: 'Order Details',
+            type: 'details',
+            content: [
+              { label: 'Item', value: 'Widget' },
+              { label: 'Price', value: '$10.00' },
+            ],
+          },
+        ],
+      };
+
+      render(<ReviewResource />);
+
+      expect(screen.getByText('Order Details')).toBeInTheDocument();
+      expect(screen.getByText('Item')).toBeInTheDocument();
+      expect(screen.getByText('Widget')).toBeInTheDocument();
+      expect(screen.getByText('Price')).toBeInTheDocument();
+      expect(screen.getByText('$10.00')).toBeInTheDocument();
+    });
+
+    it('renders items section', () => {
+      mockWidgetData = {
+        title: 'Test',
+        sections: [
+          {
+            title: 'Cart Items',
+            type: 'items',
+            content: [
+              { id: '1', title: 'Product A', subtitle: 'Small', value: '$5.00' },
+              { id: '2', title: 'Product B', badge: 'Sale', value: '$15.00' },
+            ],
+          },
+        ],
+      };
+
+      render(<ReviewResource />);
+
+      expect(screen.getByText('Cart Items')).toBeInTheDocument();
+      expect(screen.getByText('Product A')).toBeInTheDocument();
+      expect(screen.getByText('Small')).toBeInTheDocument();
+      expect(screen.getByText('Product B')).toBeInTheDocument();
+      expect(screen.getByText('Sale')).toBeInTheDocument();
+    });
+
+    it('renders changes section', () => {
+      mockWidgetData = {
+        title: 'Test',
+        sections: [
+          {
+            title: 'File Changes',
+            type: 'changes',
+            content: [
+              { id: '1', type: 'create', path: 'src/new.ts', description: 'New file' },
+              { id: '2', type: 'modify', path: 'src/old.ts', description: 'Updated imports' },
+              { id: '3', type: 'delete', path: 'src/deprecated.ts', description: 'Removed' },
+            ],
+          },
+        ],
+      };
+
+      render(<ReviewResource />);
+
+      expect(screen.getByText('File Changes')).toBeInTheDocument();
+      expect(screen.getByText('src/new.ts')).toBeInTheDocument();
+      expect(screen.getByText('New file')).toBeInTheDocument();
+      expect(screen.getByText('src/old.ts')).toBeInTheDocument();
+      expect(screen.getByText('Updated imports')).toBeInTheDocument();
+    });
+
+    it('renders preview section', () => {
+      mockWidgetData = {
+        title: 'Test',
+        sections: [
+          {
+            title: 'Preview',
+            type: 'preview',
+            content: 'This is the preview content that will be displayed.',
+          },
+        ],
+      };
+
+      render(<ReviewResource />);
+
+      expect(screen.getByText('Preview')).toBeInTheDocument();
+      expect(
+        screen.getByText('This is the preview content that will be displayed.')
+      ).toBeInTheDocument();
+    });
+
+    it('renders summary section', () => {
+      mockWidgetData = {
+        title: 'Test',
+        sections: [
+          {
+            type: 'summary',
+            content: [
+              { label: 'Subtotal', value: '$20.00' },
+              { label: 'Total', value: '$25.00', emphasis: true },
+            ],
+          },
+        ],
+      };
+
+      render(<ReviewResource />);
+
+      expect(screen.getByText('Subtotal')).toBeInTheDocument();
+      expect(screen.getByText('$20.00')).toBeInTheDocument();
+      expect(screen.getByText('Total')).toBeInTheDocument();
+      expect(screen.getByText('$25.00')).toBeInTheDocument();
+    });
+  });
+
+  describe('Alerts', () => {
+    it('renders info alert', () => {
+      mockWidgetData = {
+        title: 'Test',
+        alerts: [{ type: 'info', message: 'This is informational' }],
+      };
+
+      render(<ReviewResource />);
+
+      expect(screen.getByText('This is informational')).toBeInTheDocument();
+    });
+
+    it('renders warning alert', () => {
+      mockWidgetData = {
+        title: 'Test',
+        alerts: [{ type: 'warning', message: 'Please review carefully' }],
+      };
+
+      render(<ReviewResource />);
+
+      expect(screen.getByText('Please review carefully')).toBeInTheDocument();
+    });
+
+    it('renders error alert', () => {
+      mockWidgetData = {
+        title: 'Test',
+        alerts: [{ type: 'error', message: 'Something went wrong' }],
+      };
+
+      render(<ReviewResource />);
+
+      expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+    });
+
+    it('renders success alert', () => {
+      mockWidgetData = {
+        title: 'Test',
+        alerts: [{ type: 'success', message: 'All checks passed' }],
+      };
+
+      render(<ReviewResource />);
+
+      expect(screen.getByText('All checks passed')).toBeInTheDocument();
+    });
+
+    it('renders multiple alerts', () => {
+      mockWidgetData = {
+        title: 'Test',
+        alerts: [
+          { type: 'warning', message: 'Warning message' },
+          { type: 'info', message: 'Info message' },
+        ],
+      };
+
+      render(<ReviewResource />);
+
+      expect(screen.getByText('Warning message')).toBeInTheDocument();
+      expect(screen.getByText('Info message')).toBeInTheDocument();
+    });
+  });
+
+  describe('Safe Area and Layout', () => {
+    it('respects safe area insets', () => {
+      mockSafeArea = { insets: { top: 20, bottom: 30, left: 10, right: 15 } };
+
+      const { container } = render(<ReviewResource />);
+      const mainDiv = container.firstChild as HTMLElement;
+
+      expect(mainDiv).toHaveStyle({
+        paddingTop: '20px',
+        paddingBottom: '30px',
+        paddingLeft: '10px',
+        paddingRight: '15px',
+      });
+    });
+
+    it('respects maxHeight constraint', () => {
+      mockMaxHeight = 400;
+
+      const { container } = render(<ReviewResource />);
+      const mainDiv = container.firstChild as HTMLElement;
+
+      expect(mainDiv).toHaveStyle({
+        maxHeight: '400px',
+      });
+    });
+
+    it('handles null safe area', () => {
+      mockSafeArea = null;
+
+      const { container } = render(<ReviewResource />);
+      const mainDiv = container.firstChild as HTMLElement;
+
+      expect(mainDiv).toHaveStyle({
+        paddingTop: '0px',
+        paddingBottom: '0px',
+        paddingLeft: '0px',
+        paddingRight: '0px',
+      });
+    });
+
+    it('handles null maxHeight', () => {
+      mockMaxHeight = null;
+
+      const { container } = render(<ReviewResource />);
+      const mainDiv = container.firstChild as HTMLElement;
+
+      expect(mainDiv.style.maxHeight).toBe('');
+    });
+  });
+
+  describe('Touch Device Support', () => {
+    it('renders larger buttons for touch devices', () => {
+      mockUserAgent = { device: { type: 'mobile' }, capabilities: { hover: false, touch: true } };
+
+      render(<ReviewResource />);
+
+      const acceptButton = screen.getByText('Confirm');
+      const rejectButton = screen.getByText('Cancel');
+
+      expect(acceptButton).toHaveAttribute('data-size', 'lg');
+      expect(rejectButton).toHaveAttribute('data-size', 'lg');
+    });
+
+    it('renders standard buttons for non-touch devices', () => {
+      mockUserAgent = { device: { type: 'desktop' }, capabilities: { hover: true, touch: false } };
+
+      render(<ReviewResource />);
+
+      const acceptButton = screen.getByText('Confirm');
+      const rejectButton = screen.getByText('Cancel');
+
+      expect(acceptButton).toHaveAttribute('data-size', 'md');
+      expect(rejectButton).toHaveAttribute('data-size', 'md');
+    });
+
+    it('handles null userAgent gracefully', () => {
+      mockUserAgent = null;
+
+      render(<ReviewResource />);
+
+      const acceptButton = screen.getByText('Confirm');
+      expect(acceptButton).toHaveAttribute('data-size', 'md');
+    });
+  });
+
+  describe('Fullscreen Mode', () => {
+    it('shows expand button when not in fullscreen mode', () => {
+      mockDisplayMode = 'inline';
+
+      render(<ReviewResource />);
+
+      expect(screen.getByTestId('expand-icon')).toBeInTheDocument();
+    });
+
+    it('hides expand button when in fullscreen mode', () => {
+      mockDisplayMode = 'fullscreen';
+
+      render(<ReviewResource />);
+
+      expect(screen.queryByTestId('expand-icon')).not.toBeInTheDocument();
+    });
+
+    it('calls requestDisplayMode when expand button clicked', () => {
+      mockDisplayMode = 'inline';
+
+      render(<ReviewResource />);
+
+      const expandButton = screen.getByLabelText('Enter fullscreen');
+      fireEvent.click(expandButton);
+
+      expect(mockRequestDisplayMode).toHaveBeenCalledWith({ mode: 'fullscreen' });
+    });
+  });
+
+  describe('Ref Forwarding', () => {
+    it('forwards ref to the container div', () => {
+      const ref = vi.fn();
+      render(<ReviewResource ref={ref} />);
+
+      expect(ref).toHaveBeenCalled();
+      expect(ref.mock.calls[0][0]).toBeInstanceOf(HTMLDivElement);
+    });
+  });
+});

package/template/src/resources/{confirmation-resource.tsx → review-resource.tsx}

@@ -12,14 +12,14 @@ import { Button } from '@openai/apps-sdk-ui/components/Button';
 import { ExpandLg } from '@openai/apps-sdk-ui/components/Icon';
 
 /**
- * Production-ready Confirmation Resource
+ * Production-ready Review Resource
  *
- * A flexible confirmation dialog that adapts to various use cases:
- * - Purchase confirmations (items, totals, payment)
- * - Code change confirmations (file changes with diffs)
- * - Social media post confirmations (content preview)
- * - Booking confirmations (details, dates, prices)
- * - Generic action confirmations (simple approve/reject)
+ * A flexible review dialog that adapts to various use cases:
+ * - Purchase reviews (items, totals, payment)
+ * - Code change reviews (file changes with diffs)
+ * - Social media post reviews (content preview)
+ * - Booking reviews (details, dates, prices)
+ * - Generic action reviews (simple approve/reject)
  */
 
 // ============================================================================
@@ -75,15 +75,15 @@ interface Section {
   content: Detail[] | Item[] | Change[] | string;
 }
 
-/** Tool call configuration for domain-specific confirmation actions */
-interface ConfirmationTool {
+/** Tool call configuration for domain-specific review actions */
+interface ReviewTool {
   /** Tool name to call (e.g., "complete_purchase", "publish_post") */
   name: string;
   /** Additional arguments to pass to the tool */
   arguments?: Record<string, unknown>;
 }
 
-interface ConfirmationData extends Record<string, unknown> {
+interface ReviewData extends Record<string, unknown> {
   /** Main title */
   title: string;
   /** Optional description below title */
@@ -102,11 +102,11 @@ interface ConfirmationData extends Record<string, unknown> {
   acceptedMessage?: string;
   /** Message shown after rejecting */
   rejectedMessage?: string;
-  /** Domain-specific tool to call on confirmation */
-  confirmationTool?: ConfirmationTool;
+  /** Domain-specific tool to call on review */
+  reviewTool?: ReviewTool;
 }
 
-interface ConfirmationState extends Record<string, unknown> {
+interface ReviewState extends Record<string, unknown> {
   decision?: 'accepted' | 'rejected' | null;
   decidedAt?: string | null;
 }
@@ -306,13 +306,13 @@ function AlertBanner({ alert }: { alert: Alert }) {
 // Main Component
 // ============================================================================
 
-export const ConfirmationResource = React.forwardRef<HTMLDivElement>((_props, ref) => {
-  const data = useWidgetProps<ConfirmationData>(() => ({
-    title: 'Confirm',
+export const ReviewResource = React.forwardRef<HTMLDivElement>((_props, ref) => {
+  const data = useWidgetProps<ReviewData>(() => ({
+    title: 'Review',
     sections: [],
   }));
 
-  const [widgetState, setWidgetState] = useWidgetState<ConfirmationState>(() => ({
+  const [widgetState, setWidgetState] = useWidgetState<ReviewState>(() => ({
     decision: null,
     decidedAt: null,
   }));
@@ -338,7 +338,7 @@ export const ConfirmationResource = React.forwardRef<HTMLDivElement>((_props, re
       decidedAt,
     });
 
-    const tool = data.confirmationTool;
+    const tool = data.reviewTool;
     if (tool) {
       console.log('callTool', {
         name: tool.name,
@@ -358,7 +358,7 @@ export const ConfirmationResource = React.forwardRef<HTMLDivElement>((_props, re
       decidedAt,
     });
 
-    const tool = data.confirmationTool;
+    const tool = data.reviewTool;
     if (tool) {
       console.log('callTool', {
         name: tool.name,
@@ -476,4 +476,4 @@ export const ConfirmationResource = React.forwardRef<HTMLDivElement>((_props, re
     </div>
   );
 });
-ConfirmationResource.displayName = 'ConfirmationResource';
+ReviewResource.displayName = 'ReviewResource';

package/template/src/simulations/{confirmation-diff-simulation.json → review-diff-simulation.json}

@@ -1,10 +1,10 @@
 {
   "userMessage": "I'd like to refactor the authentication module",
   "tool": {
-    "name": "diff-confirmation",
-    "description": "Show a confirmation dialog for a proposed code diff",
+    "name": "diff-review",
+    "description": "Show a review dialog for a proposed code diff",
     "inputSchema": { "type": "object", "properties": {}, "additionalProperties": false },
-    "title": "Diff Confirmation",
+    "title": "Diff Review",
     "annotations": { "readOnlyHint": false },
     "_meta": {
       "openai/toolInvocation/invoking": "Preparing changes",
@@ -62,7 +62,7 @@
       "rejectLabel": "Cancel",
       "acceptedMessage": "Changes applied",
       "rejectedMessage": "Changes cancelled",
-      "confirmationTool": {
+      "reviewTool": {
         "name": "apply_changes",
         "arguments": {
           "changesetId": "cs_789",

package/template/src/simulations/{confirmation-post-simulation.json → review-post-simulation.json}

@@ -1,10 +1,10 @@
 {
   "userMessage": "Post this to my social media",
   "tool": {
-    "name": "confirm-post",
-    "description": "Confirm a social media post before publishing",
+    "name": "review-post",
+    "description": "Review a social media post before publishing",
     "inputSchema": { "type": "object", "properties": {}, "additionalProperties": false },
-    "title": "Confirm Post",
+    "title": "Review Post",
     "annotations": { "readOnlyHint": false },
     "_meta": {
       "openai/toolInvocation/invoking": "Preparing post",
@@ -43,7 +43,7 @@
       "rejectLabel": "Cancel",
       "acceptedMessage": "Post published!",
       "rejectedMessage": "Post cancelled",
-      "confirmationTool": {
+      "reviewTool": {
         "name": "publish_post",
         "arguments": {
           "postId": "draft_456",