sunpeak 0.8.6 → 0.8.8

package/template/dist/counter.json

@@ -1,15 +0,0 @@
-{
-  "name": "counter",
-  "title": "Counter",
-  "description": "Show a simple counter tool widget",
-  "mimeType": "text/html+skybridge",
-  "_meta": {
-    "openai/widgetDomain": "https://sunpeak.ai",
-    "openai/widgetCSP": {
-      "resource_domains": [
-        "https://cdn.openai.com"
-      ]
-    }
-  },
-  "uri": "ui://counter-mjt2f5f3"
-}

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

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

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

@@ -1,116 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { CounterResource } from './counter-resource';
-
-// Mock sunpeak hooks
-const mockSetWidgetState = vi.fn();
-let mockSafeArea = { insets: { top: 0, bottom: 0, left: 0, right: 0 } };
-let mockMaxHeight = 600;
-let mockUserAgent: {
-  device: { type: 'desktop' | 'mobile' | 'tablet' | 'unknown' };
-  capabilities: { hover: boolean; touch: boolean };
-} = {
-  device: { type: 'desktop' },
-  capabilities: { hover: true, touch: false },
-};
-
-vi.mock('sunpeak', () => ({
-  useWidgetState: () => [{ count: 0 }, mockSetWidgetState],
-  useSafeArea: () => mockSafeArea,
-  useMaxHeight: () => mockMaxHeight,
-  useUserAgent: () => mockUserAgent,
-}));
-
-describe('CounterResource', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    mockSafeArea = { insets: { top: 0, bottom: 0, left: 0, right: 0 } };
-    mockMaxHeight = 600;
-    mockUserAgent = { device: { type: 'desktop' }, capabilities: { hover: true, touch: false } };
-  });
-
-  it('renders counter with initial count', () => {
-    render(<CounterResource />);
-
-    expect(screen.getByText('Welcome to Sunpeak!')).toBeInTheDocument();
-    expect(screen.getByText('0')).toBeInTheDocument();
-  });
-
-  it('increments counter when + button is clicked', () => {
-    render(<CounterResource />);
-
-    const incrementButton = screen.getByLabelText('Increment');
-    fireEvent.click(incrementButton);
-
-    expect(mockSetWidgetState).toHaveBeenCalledWith({ count: 1 });
-  });
-
-  it('decrements counter when - button is clicked', () => {
-    render(<CounterResource />);
-
-    const decrementButton = screen.getByLabelText('Decrement');
-    fireEvent.click(decrementButton);
-
-    expect(mockSetWidgetState).toHaveBeenCalledWith({ count: -1 });
-  });
-
-  it('resets counter when Reset button is clicked', () => {
-    render(<CounterResource />);
-
-    const resetButton = screen.getByText('Reset');
-    fireEvent.click(resetButton);
-
-    expect(mockSetWidgetState).toHaveBeenCalledWith({ count: 0 });
-  });
-
-  it('respects safe area insets', () => {
-    mockSafeArea = { insets: { top: 20, bottom: 30, left: 10, right: 15 } };
-
-    const { container } = render(<CounterResource />);
-    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(<CounterResource />);
-    const mainDiv = container.firstChild as HTMLElement;
-
-    expect(mainDiv).toHaveStyle({
-      maxHeight: '400px',
-    });
-  });
-
-  it('renders larger buttons for touch devices', () => {
-    mockUserAgent = { device: { type: 'mobile' }, capabilities: { hover: false, touch: true } };
-
-    render(<CounterResource />);
-
-    const incrementButton = screen.getByLabelText('Increment');
-    const resetButton = screen.getByText('Reset');
-
-    // Buttons should have larger size for touch
-    expect(incrementButton).toBeInTheDocument();
-    expect(resetButton).toBeInTheDocument();
-  });
-
-  it('renders standard-sized buttons for non-touch devices', () => {
-    mockUserAgent = { device: { type: 'desktop' }, capabilities: { hover: true, touch: false } };
-
-    render(<CounterResource />);
-
-    const incrementButton = screen.getByLabelText('Increment');
-    const resetButton = screen.getByText('Reset');
-
-    // Buttons should have standard size for non-touch
-    expect(incrementButton).toBeInTheDocument();
-    expect(resetButton).toBeInTheDocument();
-  });
-});

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

@@ -1,101 +0,0 @@
-import { useWidgetState, useSafeArea, useMaxHeight, useUserAgent } from 'sunpeak';
-import { Button } from '@openai/apps-sdk-ui/components/Button';
-import { useEffect } from 'react';
-
-interface CounterState extends Record<string, unknown> {
-  count?: number;
-}
-
-/**
- * Production-ready Counter Resource
- *
- * This resource displays a counter to demonstrate useWidgetState.
- * Can be dropped into any production environment without changes.
- */
-export function CounterResource() {
-  const [widgetState, setWidgetState] = useWidgetState<CounterState>(() => ({
-    count: 0,
-  }));
-  const safeArea = useSafeArea();
-  const maxHeight = useMaxHeight();
-  const userAgent = useUserAgent();
-
-  const count = widgetState?.count ?? 0;
-  const hasTouch = userAgent?.capabilities.touch ?? false;
-
-  // Initialize count to 0 if not set
-  useEffect(() => {
-    if (widgetState?.count === undefined) {
-      setWidgetState({ count: 0 });
-    }
-  }, [widgetState?.count, setWidgetState]);
-
-  const increment = () => {
-    setWidgetState({ count: count + 1 });
-  };
-
-  const decrement = () => {
-    setWidgetState({ count: count - 1 });
-  };
-
-  const reset = () => {
-    setWidgetState({ count: 0 });
-  };
-
-  return (
-    <div
-      className="flex flex-col items-center justify-center space-y-6"
-      style={{
-        paddingTop: `${safeArea?.insets.top ?? 0}px`,
-        paddingBottom: `${safeArea?.insets.bottom ?? 0}px`,
-        paddingLeft: `${safeArea?.insets.left ?? 0}px`,
-        paddingRight: `${safeArea?.insets.right ?? 0}px`,
-        maxHeight: maxHeight ?? undefined,
-      }}
-    >
-      <div className="text-center space-y-2">
-        <h1 className="text-3xl font-bold text-primary">Welcome to Sunpeak!</h1>
-        <p className="text-secondary">Build your MCP resource here</p>
-      </div>
-
-      <div className="flex flex-col items-center space-y-4 p-8 border border-subtle rounded-2xl bg-surface shadow-sm">
-        <div className="text-6xl font-bold text-primary">{count}</div>
-
-        <div className="flex gap-2">
-          <Button
-            variant="soft"
-            color="secondary"
-            onClick={decrement}
-            aria-label="Decrement"
-            size={hasTouch ? 'lg' : 'md'}
-          >
-            −
-          </Button>
-          <Button
-            variant="solid"
-            color="primary"
-            onClick={increment}
-            aria-label="Increment"
-            size={hasTouch ? 'lg' : 'md'}
-          >
-            +
-          </Button>
-        </div>
-
-        <Button variant="outline" color="secondary" onClick={reset} size={hasTouch ? 'md' : 'sm'}>
-          Reset
-        </Button>
-      </div>
-
-      <div className="text-center text-sm text-secondary max-w-md space-y-2">
-        <p>
-          This counter persists its state using{' '}
-          <code className="px-1.5 py-0.5 rounded bg-surface-secondary text-primary">
-            useWidgetState
-          </code>
-        </p>
-        <p>Try switching between examples in the sidebar!</p>
-      </div>
-    </div>
-  );
-}

package/template/src/simulations/counter-show-simulation.json

@@ -1,20 +0,0 @@
-{
-  "userMessage": "Help me count something",
-  "tool": {
-    "name": "show-counter",
-    "description": "Show a simple counter tool",
-    "inputSchema": { "type": "object", "properties": {}, "additionalProperties": false },
-    "title": "Show Counter",
-    "annotations": { "readOnlyHint": true },
-    "_meta": {
-      "openai/toolInvocation/invoking": "Counting beans",
-      "openai/toolInvocation/invoked": "Beans counted",
-      "openai/widgetAccessible": true,
-      "openai/resultCanProduceWidget": true
-    }
-  },
-  "toolCall": {
-    "structuredContent": null,
-    "_meta": {}
-  }
-}