sunpeak 0.6.6 → 0.7.9

package/template/src/components/map/map-view.test.tsx

@@ -0,0 +1,146 @@
+import { render } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { MapView } from './map-view';
+import type { Place } from '../../simulations/map-simulation';
+
+// Mock mapbox-gl
+vi.mock('mapbox-gl', () => ({
+  default: {
+    accessToken: '',
+    Map: class MockMap {
+      on = vi.fn();
+      once = vi.fn();
+      remove = vi.fn();
+      resize = vi.fn();
+      loaded = vi.fn().mockReturnValue(true);
+      flyTo = vi.fn();
+      fitBounds = vi.fn();
+    },
+    Marker: class MockMarker {
+      setLngLat = vi.fn().mockReturnThis();
+      addTo = vi.fn().mockReturnThis();
+      remove = vi.fn();
+      getElement = vi.fn().mockReturnValue(document.createElement('div'));
+    },
+    LngLatBounds: class MockLngLatBounds {
+      extend = vi.fn().mockReturnThis();
+    },
+  },
+}));
+
+// Mock sunpeak hook
+vi.mock('sunpeak', () => ({
+  useMaxHeight: vi.fn().mockReturnValue(600),
+}));
+
+describe('MapView', () => {
+  const mockPlaces: Place[] = [
+    {
+      id: 'place-1',
+      name: 'First Place',
+      coords: [-122.4194, 37.7749],
+      description: 'First test place',
+      city: 'San Francisco',
+      rating: 4.5,
+      price: '$$',
+      thumbnail: 'https://example.com/1.jpg',
+    },
+    {
+      id: 'place-2',
+      name: 'Second Place',
+      coords: [-122.4094, 37.7849],
+      description: 'Second test place',
+      city: 'Oakland',
+      rating: 4.2,
+      price: '$',
+      thumbnail: 'https://example.com/2.jpg',
+    },
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders map container', () => {
+    const { container } = render(
+      <MapView
+        places={mockPlaces}
+        selectedPlace={null}
+        isFullscreen={false}
+        onSelectPlace={vi.fn()}
+      />
+    );
+
+    const mapContainer = container.querySelector('div[class*="absolute"]');
+    expect(mapContainer).toBeInTheDocument();
+  });
+
+  it('applies different styles for fullscreen mode', () => {
+    const { container, rerender } = render(
+      <MapView
+        places={mockPlaces}
+        selectedPlace={null}
+        isFullscreen={false}
+        onSelectPlace={vi.fn()}
+      />
+    );
+
+    let mapWrapper = container.firstChild as HTMLElement;
+    expect(mapWrapper.className).not.toContain('left-[340px]');
+
+    rerender(
+      <MapView
+        places={mockPlaces}
+        selectedPlace={null}
+        isFullscreen={true}
+        onSelectPlace={vi.fn()}
+      />
+    );
+
+    mapWrapper = container.firstChild as HTMLElement;
+    expect(mapWrapper.className).toContain('left-[340px]');
+  });
+
+  it('handles empty places array gracefully', () => {
+    const { container } = render(
+      <MapView places={[]} selectedPlace={null} isFullscreen={false} onSelectPlace={vi.fn()} />
+    );
+
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it('handles places with invalid coordinates gracefully', () => {
+    const invalidPlaces: Place[] = [
+      {
+        ...mockPlaces[0],
+        coords: [] as unknown as [number, number],
+      },
+    ];
+
+    const { container } = render(
+      <MapView
+        places={invalidPlaces}
+        selectedPlace={null}
+        isFullscreen={false}
+        onSelectPlace={vi.fn()}
+      />
+    );
+
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it('accepts custom className prop', () => {
+    const { container } = render(
+      <MapView
+        places={mockPlaces}
+        selectedPlace={null}
+        isFullscreen={false}
+        onSelectPlace={vi.fn()}
+        className="custom-class"
+      />
+    );
+
+    const mapWrapper = container.firstChild as HTMLElement;
+    expect(mapWrapper.className).toContain('custom-class');
+  });
+});

package/template/src/components/map/place-card.test.tsx

@@ -0,0 +1,76 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { PlaceCard } from './place-card';
+import type { Place } from '../../simulations/map-simulation';
+
+describe('PlaceCard', () => {
+  const mockPlace: Place = {
+    id: 'test-place',
+    name: 'Test Pizza Place',
+    coords: [-122.4194, 37.7749],
+    description: 'Delicious test pizza',
+    city: 'San Francisco',
+    rating: 4.5,
+    price: '$$',
+    thumbnail: 'https://example.com/test.jpg',
+  };
+
+  it('renders place information correctly', () => {
+    render(<PlaceCard place={mockPlace} />);
+
+    expect(screen.getByText('Test Pizza Place')).toBeInTheDocument();
+    expect(screen.getByText('Delicious test pizza')).toBeInTheDocument();
+    expect(screen.getByText('4.5')).toBeInTheDocument();
+    expect(screen.getByText('$$', { exact: false })).toBeInTheDocument();
+  });
+
+  it('renders thumbnail with correct attributes', () => {
+    render(<PlaceCard place={mockPlace} />);
+
+    const image = screen.getByRole('img');
+    expect(image).toHaveAttribute('src', 'https://example.com/test.jpg');
+    expect(image).toHaveAttribute('alt', 'Test Pizza Place');
+    expect(image).toHaveAttribute('loading', 'lazy');
+  });
+
+  it('calls onClick handler when clicked', () => {
+    const onClick = vi.fn();
+    render(<PlaceCard place={mockPlace} onClick={onClick} />);
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('applies selected styles when isSelected is true', () => {
+    const { container, rerender } = render(<PlaceCard place={mockPlace} isSelected={false} />);
+
+    let card = container.firstChild as HTMLElement;
+    // Should have hover styles but not the active background
+    expect(card.className).toContain('hover:bg-black/5');
+    // Check that it doesn't have the non-hover background class by looking at the full class string
+    const classesWithoutHover = card.className.replace(/hover:[^\s]+/g, '');
+    expect(classesWithoutHover).not.toContain('bg-black/5');
+
+    rerender(<PlaceCard place={mockPlace} isSelected={true} />);
+    card = container.firstChild as HTMLElement;
+    // When selected, should have both hover and non-hover background classes
+    expect(card.className).toContain('bg-black/5 dark:bg-white/5');
+  });
+
+  it('formats rating to one decimal place', () => {
+    const placeWithRating = { ...mockPlace, rating: 4.789 };
+    render(<PlaceCard place={placeWithRating} />);
+
+    expect(screen.getByText('4.8')).toBeInTheDocument();
+    expect(screen.queryByText('4.789')).not.toBeInTheDocument();
+  });
+
+  it('renders price when provided', () => {
+    const placeWithPrice = { ...mockPlace, price: '$$$' };
+    render(<PlaceCard place={placeWithPrice} />);
+
+    expect(screen.getByText('$$$', { exact: false })).toBeInTheDocument();
+  });
+});

package/template/src/components/map/place-carousel.test.tsx

@@ -0,0 +1,84 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { PlaceCarousel } from './place-carousel';
+import type { Place } from '../../simulations/map-simulation';
+
+describe('PlaceCarousel', () => {
+  const mockPlaces: Place[] = [
+    {
+      id: 'place-1',
+      name: 'First Place',
+      coords: [-122.4194, 37.7749],
+      description: 'First test place',
+      city: 'San Francisco',
+      rating: 4.5,
+      price: '$$',
+      thumbnail: 'https://example.com/1.jpg',
+    },
+    {
+      id: 'place-2',
+      name: 'Second Place',
+      coords: [-122.4094, 37.7849],
+      description: 'Second test place',
+      city: 'Oakland',
+      rating: 4.2,
+      price: '$',
+      thumbnail: 'https://example.com/2.jpg',
+    },
+  ];
+
+  it('renders all places in the carousel', () => {
+    render(<PlaceCarousel places={mockPlaces} selectedId={null} onSelect={vi.fn()} />);
+
+    expect(screen.getByText('First Place')).toBeInTheDocument();
+    expect(screen.getByText('Second Place')).toBeInTheDocument();
+  });
+
+  it('calls onSelect with correct place when a place is clicked', () => {
+    const onSelect = vi.fn();
+    render(<PlaceCarousel places={mockPlaces} selectedId={null} onSelect={onSelect} />);
+
+    const firstPlace = screen.getByText('First Place');
+    fireEvent.click(firstPlace);
+
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith(mockPlaces[0]);
+  });
+
+  it('highlights selected place', () => {
+    const { rerender } = render(
+      <PlaceCarousel places={mockPlaces} selectedId={null} onSelect={vi.fn()} />
+    );
+
+    rerender(<PlaceCarousel places={mockPlaces} selectedId="place-1" onSelect={vi.fn()} />);
+
+    const firstPlace = screen.getByText('First Place');
+    const card = firstPlace.closest('div[class*="rounded-2xl"]');
+    expect(card?.className).toContain('bg-black/5');
+  });
+
+  it('renders empty carousel when no places provided', () => {
+    render(<PlaceCarousel places={[]} selectedId={null} onSelect={vi.fn()} />);
+
+    expect(screen.queryByText('First Place')).not.toBeInTheDocument();
+  });
+
+  it('renders each place card with shadow and ring styles', () => {
+    const { container } = render(
+      <PlaceCarousel places={mockPlaces} selectedId={null} onSelect={vi.fn()} />
+    );
+
+    const cards = container.querySelectorAll('div[class*="shadow-xl"]');
+    expect(cards.length).toBe(mockPlaces.length);
+  });
+
+  it('renders carousel at bottom of viewport with correct positioning', () => {
+    const { container } = render(
+      <PlaceCarousel places={mockPlaces} selectedId={null} onSelect={vi.fn()} />
+    );
+
+    const carousel = container.firstChild as HTMLElement;
+    expect(carousel.className).toContain('absolute');
+    expect(carousel.className).toContain('bottom-0');
+  });
+});

package/template/src/components/map/place-inspector.test.tsx

@@ -0,0 +1,91 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { PlaceInspector } from './place-inspector';
+import type { Place } from '../../simulations/map-simulation';
+
+describe('PlaceInspector', () => {
+  const mockPlace: Place = {
+    id: 'test-place',
+    name: 'Test Pizza Place',
+    coords: [-122.4194, 37.7749],
+    description: 'Delicious test pizza',
+    city: 'San Francisco',
+    rating: 4.5,
+    price: '$$',
+    thumbnail: 'https://example.com/test.jpg',
+  };
+
+  it('renders place details correctly', () => {
+    render(<PlaceInspector place={mockPlace} onClose={vi.fn()} />);
+
+    expect(screen.getByText('Test Pizza Place')).toBeInTheDocument();
+    expect(screen.getByText('4.5')).toBeInTheDocument();
+    expect(screen.getByText('$$', { exact: false })).toBeInTheDocument();
+    expect(screen.getByText('San Francisco', { exact: false })).toBeInTheDocument();
+  });
+
+  it('renders place thumbnail with correct attributes', () => {
+    render(<PlaceInspector place={mockPlace} onClose={vi.fn()} />);
+
+    const image = screen.getByRole('img', { name: 'Test Pizza Place' });
+    expect(image).toHaveAttribute('src', 'https://example.com/test.jpg');
+    expect(image).toHaveAttribute('alt', 'Test Pizza Place');
+    expect(image).toHaveAttribute('loading', 'lazy');
+  });
+
+  it('calls onClose when close button is clicked', () => {
+    const onClose = vi.fn();
+    render(<PlaceInspector place={mockPlace} onClose={onClose} />);
+
+    const closeButton = screen.getByLabelText('Close details');
+    fireEvent.click(closeButton);
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders action buttons', () => {
+    render(<PlaceInspector place={mockPlace} onClose={vi.fn()} />);
+
+    expect(screen.getByText('Add to favorites')).toBeInTheDocument();
+    expect(screen.getByText('Contact')).toBeInTheDocument();
+  });
+
+  it('renders reviews section with multiple reviews', () => {
+    render(<PlaceInspector place={mockPlace} onClose={vi.fn()} />);
+
+    expect(screen.getByText('Reviews')).toBeInTheDocument();
+    expect(screen.getByText('Leo M.')).toBeInTheDocument();
+    expect(screen.getByText('Priya S.')).toBeInTheDocument();
+    expect(screen.getByText('Maya R.')).toBeInTheDocument();
+  });
+
+  it('renders review content correctly', () => {
+    render(<PlaceInspector place={mockPlace} onClose={vi.fn()} />);
+
+    expect(
+      screen.getByText('Fantastic crust and balanced toppings. The marinara is spot on!')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('Cozy vibe and friendly staff. Quick service on a Friday night.')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('Great for sharing. Will definitely come back with friends.')
+    ).toBeInTheDocument();
+  });
+
+  it('renders extended description', () => {
+    render(<PlaceInspector place={mockPlace} onClose={vi.fn()} />);
+
+    expect(
+      screen.getByText(/Enjoy a slice at one of SF's favorites/, { exact: false })
+    ).toBeInTheDocument();
+  });
+
+  it('formats rating to one decimal place', () => {
+    const placeWithRating = { ...mockPlace, rating: 4.789 };
+    render(<PlaceInspector place={placeWithRating} onClose={vi.fn()} />);
+
+    expect(screen.getByText('4.8')).toBeInTheDocument();
+    expect(screen.queryByText('4.789')).not.toBeInTheDocument();
+  });
+});

package/template/src/components/map/place-list.test.tsx

@@ -0,0 +1,97 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { PlaceList } from './place-list';
+import type { Place } from '../../simulations/map-simulation';
+
+describe('PlaceList', () => {
+  const mockPlaces: Place[] = [
+    {
+      id: 'place-1',
+      name: 'First Place',
+      coords: [-122.4194, 37.7749],
+      description: 'First test place',
+      city: 'San Francisco',
+      rating: 4.5,
+      price: '$$',
+      thumbnail: 'https://example.com/1.jpg',
+    },
+    {
+      id: 'place-2',
+      name: 'Second Place',
+      coords: [-122.4094, 37.7849],
+      description: 'Second test place',
+      city: 'Oakland',
+      rating: 4.2,
+      price: '$',
+      thumbnail: 'https://example.com/2.jpg',
+    },
+    {
+      id: 'place-3',
+      name: 'Third Place',
+      coords: [-122.4294, 37.7649],
+      description: 'Third test place',
+      city: 'Berkeley',
+      rating: 4.8,
+      price: '$$$',
+      thumbnail: 'https://example.com/3.jpg',
+    },
+  ];
+
+  it('renders all places in the list', () => {
+    render(<PlaceList places={mockPlaces} selectedId={null} onSelect={vi.fn()} />);
+
+    expect(screen.getByText('First Place')).toBeInTheDocument();
+    expect(screen.getByText('Second Place')).toBeInTheDocument();
+    expect(screen.getByText('Third Place')).toBeInTheDocument();
+  });
+
+  it('displays correct number of results in header', () => {
+    render(<PlaceList places={mockPlaces} selectedId={null} onSelect={vi.fn()} />);
+
+    expect(screen.getByText('3 results')).toBeInTheDocument();
+  });
+
+  it('calls onSelect with correct place when a place is clicked', () => {
+    const onSelect = vi.fn();
+    render(<PlaceList places={mockPlaces} selectedId={null} onSelect={onSelect} />);
+
+    const firstPlace = screen.getByText('First Place');
+    fireEvent.click(firstPlace);
+
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith(mockPlaces[0]);
+  });
+
+  it('highlights selected place', () => {
+    const { rerender } = render(
+      <PlaceList places={mockPlaces} selectedId={null} onSelect={vi.fn()} />
+    );
+
+    rerender(<PlaceList places={mockPlaces} selectedId="place-2" onSelect={vi.fn()} />);
+
+    const secondPlace = screen.getByText('Second Place');
+    const card = secondPlace.closest('div[class*="rounded-2xl"]');
+    expect(card?.className).toContain('bg-black/5');
+  });
+
+  it('renders empty list when no places provided', () => {
+    render(<PlaceList places={[]} selectedId={null} onSelect={vi.fn()} />);
+
+    expect(screen.getByText('0 results')).toBeInTheDocument();
+    expect(screen.queryByText('First Place')).not.toBeInTheDocument();
+  });
+
+  it('maintains selection when places update', () => {
+    const onSelect = vi.fn();
+    const { rerender } = render(
+      <PlaceList places={mockPlaces} selectedId="place-2" onSelect={onSelect} />
+    );
+
+    const updatedPlaces = [...mockPlaces].reverse();
+    rerender(<PlaceList places={updatedPlaces} selectedId="place-2" onSelect={onSelect} />);
+
+    const secondPlace = screen.getByText('Second Place');
+    const card = secondPlace.closest('div[class*="rounded-2xl"]');
+    expect(card?.className).toContain('bg-black/5');
+  });
+});

package/template/src/resources/albums-resource.json

@@ -0,0 +1,12 @@
+{
+  "name": "albums",
+  "title": "Albums",
+  "description": "Show photo albums widget",
+  "mimeType": "text/html+skybridge",
+  "_meta": {
+    "openai/widgetDomain": "https://sunpeak.ai",
+    "openai/widgetCSP": {
+      "resource_domains": ["https://*.oaistatic.com"]
+    }
+  }
+}

package/template/src/resources/carousel-resource.json

@@ -0,0 +1,12 @@
+{
+  "name": "carousel",
+  "title": "Carousel",
+  "description": "Show popular places to visit widget",
+  "mimeType": "text/html+skybridge",
+  "_meta": {
+    "openai/widgetDomain": "https://sunpeak.ai",
+    "openai/widgetCSP": {
+      "resource_domains": ["https://images.unsplash.com"]
+    }
+  }
+}

package/template/src/resources/counter-resource.json

@@ -0,0 +1,9 @@
+{
+  "name": "counter",
+  "title": "Counter",
+  "description": "Show a simple counter tool widget",
+  "mimeType": "text/html+skybridge",
+  "_meta": {
+    "openai/widgetDomain": "https://sunpeak.ai"
+  }
+}

package/template/src/resources/map-resource.json

@@ -0,0 +1,13 @@
+{
+  "name": "map",
+  "title": "Map",
+  "description": "Pizza restaurant finder widget",
+  "mimeType": "text/html+skybridge",
+  "_meta": {
+    "openai/widgetDomain": "https://sunpeak.ai",
+    "openai/widgetCSP": {
+      "connect_domains": ["https://api.mapbox.com"],
+      "resource_domains": ["https://*.oaistatic.com", "https://api.mapbox.com"]
+    }
+  }
+}

package/template/src/simulations/albums-simulation.ts

@@ -3,7 +3,7 @@
  * This file contains only metadata and doesn't import React components or CSS.
  */
 
-import { defaultWidgetMeta } from './widget-config';
+import albumsResourceMeta from '../resources/albums-resource.json';
 
 const albumsData = {
   albums: [
@@ -129,7 +129,6 @@ export const albumsSimulation = {
     title: 'Show Albums',
     annotations: { readOnlyHint: true },
     _meta: {
-      'openai/outputTemplate': 'ui://AlbumsResource',
       'openai/toolInvocation/invoking': 'Loading albums',
       'openai/toolInvocation/invoked': 'Album loaded',
       'openai/widgetAccessible': true,
@@ -137,19 +136,8 @@ export const albumsSimulation = {
     },
   },
 
-  // MCP Resource protocol - official Resource type from MCP SDK used in ListResources response
-  // resource.name is used as the simulation identifier
-  // resource.title is used as the simulation display label
-  resource: {
-    uri: 'ui://AlbumsResource',
-    name: 'albums',
-    title: 'Albums',
-    description: 'Show photo albums widget markup',
-    mimeType: 'text/html+skybridge',
-    _meta: {
-      ...defaultWidgetMeta,
-    },
-  },
+  // MCP Resource protocol - imported from resource meta file
+  resource: albumsResourceMeta,
 
   // MCP CallTool protocol - data for CallTool response
   toolCall: {

package/template/src/simulations/carousel-simulation.ts

@@ -3,7 +3,7 @@
  * This file contains only metadata and doesn't import React components or CSS.
  */
 
-import { defaultWidgetMeta } from './widget-config';
+import carouselResourceMeta from '../resources/carousel-resource.json';
 
 const placesData = {
   places: [
@@ -66,7 +66,6 @@ export const carouselSimulation = {
     title: 'Show Carousel',
     annotations: { readOnlyHint: true },
     _meta: {
-      'openai/outputTemplate': 'ui://CarouselResource',
       'openai/toolInvocation/invoking': 'Loading carousel',
       'openai/toolInvocation/invoked': 'Carousel loaded',
       'openai/widgetAccessible': true,
@@ -74,19 +73,8 @@ export const carouselSimulation = {
     },
   },
 
-  // MCP Resource protocol - official Resource type from MCP SDK used in ListResources response
-  // resource.name is used as the simulation identifier
-  // resource.title is used as the simulation display label
-  resource: {
-    uri: 'ui://CarouselResource',
-    name: 'carousel',
-    title: 'Carousel',
-    description: 'Show popular places to visit widget markup',
-    mimeType: 'text/html+skybridge',
-    _meta: {
-      ...defaultWidgetMeta,
-    },
-  },
+  // MCP Resource protocol - imported from resource meta file
+  resource: carouselResourceMeta,
 
   // MCP CallTool protocol - data for CallTool response
   toolCall: {

package/template/src/simulations/counter-simulation.ts

@@ -3,7 +3,7 @@
  * This file contains only metadata and doesn't import React components or CSS.
  */
 
-import { defaultWidgetMeta } from './widget-config';
+import counterResourceMeta from '../resources/counter-resource.json';
 
 export const counterSimulation = {
   userMessage: 'Help me count something',
@@ -16,7 +16,6 @@ export const counterSimulation = {
     title: 'Show Counter',
     annotations: { readOnlyHint: true },
     _meta: {
-      'openai/outputTemplate': 'ui://CounterResource',
       'openai/toolInvocation/invoking': 'Counting beans',
       'openai/toolInvocation/invoked': 'Beans counted',
       'openai/widgetAccessible': true,
@@ -24,19 +23,8 @@ export const counterSimulation = {
     },
   },
 
-  // MCP Resource protocol - official Resource type from MCP SDK used in ListResources response
-  // resource.name is used as the simulation identifier
-  // resource.title is used as the simulation display label
-  resource: {
-    uri: 'ui://CounterResource',
-    name: 'counter',
-    title: 'Counter',
-    description: 'Show a simple counter tool widget markup',
-    mimeType: 'text/html+skybridge',
-    _meta: {
-      ...defaultWidgetMeta,
-    },
-  },
+  // MCP Resource protocol - imported from resource meta file
+  resource: counterResourceMeta,
 
   // MCP CallTool protocol - data for CallTool response
   toolCall: {