sunpeak 0.16.17 → 0.16.21

package/template/src/resources/carousel/carousel.tsx

@@ -1,4 +1,4 @@
-import { useToolData, useHostContext, useDisplayMode, SafeArea } from 'sunpeak';
+import { useToolData, useDeviceCapabilities, useDisplayMode, SafeArea } from 'sunpeak';
 import type { ResourceConfig } from 'sunpeak';
 import { Carousel, Card } from './components';
 
@@ -32,18 +32,60 @@ interface CarouselCard {
   description: string;
 }
 
+interface CarouselInput {
+  city?: string;
+  state?: string;
+  categories?: string[];
+  limit?: number;
+}
+
 interface CarouselData {
   places: CarouselCard[];
 }
 
 export function CarouselResource() {
-  const { output } = useToolData<unknown, CarouselData>(undefined, { places: [] });
-  const context = useHostContext();
+  const { output, inputPartial, isLoading, isError, isCancelled, cancelReason } = useToolData<
+    CarouselInput,
+    CarouselData
+  >();
+  const { touch: hasTouch = false } = useDeviceCapabilities();
   const displayMode = useDisplayMode();
-
-  const hasTouch = context?.deviceCapabilities?.touch ?? false;
   const places = output?.places ?? [];
 
+  if (isLoading) {
+    const searchContext = inputPartial?.city;
+    return (
+      <SafeArea className="flex items-center justify-center gap-2 p-8 text-[var(--color-text-secondary)]">
+        <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
+        <span>{searchContext ? `Finding places in ${searchContext}…` : 'Loading places…'}</span>
+      </SafeArea>
+    );
+  }
+
+  if (isError) {
+    return (
+      <SafeArea className="flex items-center justify-center p-8 text-[var(--color-text-secondary)]">
+        Failed to load places
+      </SafeArea>
+    );
+  }
+
+  if (isCancelled) {
+    return (
+      <SafeArea className="flex items-center justify-center p-8 text-[var(--color-text-secondary)]">
+        {cancelReason ?? 'Request was cancelled'}
+      </SafeArea>
+    );
+  }
+
+  if (places.length === 0) {
+    return (
+      <SafeArea className="flex items-center justify-center p-8 text-[var(--color-text-secondary)]">
+        No places found
+      </SafeArea>
+    );
+  }
+
   return (
     <SafeArea className="p-4">
       <Carousel

package/template/src/resources/map/components/map.tsx

@@ -1,5 +1,12 @@
 import * as React from 'react';
-import { useApp, useAppState, useDisplayMode, useToolData, useViewport } from 'sunpeak';
+import {
+  useAppState,
+  useDisplayMode,
+  useRequestDisplayMode,
+  useToolData,
+  useViewport,
+  useUpdateModelContext,
+} from 'sunpeak';
 import { Button } from '@/components/button';
 import { ExpandLg } from '@/components/icon';
 import { cn } from '@/lib/index';
@@ -9,6 +16,14 @@ import { PlaceInspector } from './place-inspector';
 import { MapView } from './map-view';
 import type { Place, MapData } from './types';
 
+interface MapInput {
+  query?: string;
+  location?: { lat: number; lng: number };
+  radius?: number;
+  minRating?: number;
+  priceRange?: string[];
+}
+
 interface MapState {
   selectedPlaceId: string | null;
 }
@@ -18,24 +33,32 @@ export type MapProps = {
 };
 
 export function Map({ className }: MapProps) {
-  const app = useApp();
-  const { output } = useToolData<unknown, MapData>(undefined, { places: [] });
+  const { output, inputPartial, isLoading, isError, isCancelled, cancelReason } = useToolData<
+    MapInput,
+    MapData
+  >();
   const [state, setState] = useAppState<MapState>({
     selectedPlaceId: null,
   });
   const displayMode = useDisplayMode();
+  const { requestDisplayMode, availableModes } = useRequestDisplayMode();
   const viewport = useViewport();
+  const updateModelContext = useUpdateModelContext();
 
   const maxHeight = viewport?.maxHeight ?? null;
   const places = output?.places ?? [];
   const selectedPlace = places.find((place: Place) => place.id === state.selectedPlaceId);
   const isFullscreen = displayMode === 'fullscreen';
+  const canFullscreen = availableModes?.includes('fullscreen') ?? false;
 
   const handleSelectPlace = React.useCallback(
     (place: Place) => {
       setState((prev) => ({ ...prev, selectedPlaceId: place.id }));
+      updateModelContext({
+        structuredContent: { selectedPlace: { id: place.id, name: place.name } },
+      });
     },
-    [setState]
+    [setState, updateModelContext]
   );
 
   const handleCloseInspector = React.useCallback(() => {
@@ -47,8 +70,42 @@ export function Map({ className }: MapProps) {
     if (state.selectedPlaceId) {
       setState((prev) => ({ ...prev, selectedPlaceId: null }));
     }
-    app?.requestDisplayMode({ mode: 'fullscreen' });
-  }, [app, state.selectedPlaceId, setState]);
+    requestDisplayMode('fullscreen');
+  }, [requestDisplayMode, state.selectedPlaceId, setState]);
+
+  if (isLoading) {
+    const searchContext = inputPartial?.query;
+    return (
+      <div className="flex items-center justify-center gap-2 p-8 text-[var(--color-text-secondary)]">
+        <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
+        <span>{searchContext ? `Searching for ${searchContext}…` : 'Loading map…'}</span>
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="flex items-center justify-center p-8 text-[var(--color-text-secondary)]">
+        Failed to load map data
+      </div>
+    );
+  }
+
+  if (isCancelled) {
+    return (
+      <div className="flex items-center justify-center p-8 text-[var(--color-text-secondary)]">
+        {cancelReason ?? 'Request was cancelled'}
+      </div>
+    );
+  }
+
+  if (places.length === 0) {
+    return (
+      <div className="flex items-center justify-center p-8 text-[var(--color-text-secondary)]">
+        No places found
+      </div>
+    );
+  }
 
   const containerHeight = isFullscreen ? (maxHeight ?? 600) - 40 : 480;
 
@@ -58,7 +115,6 @@ export function Map({ className }: MapProps) {
       style={{
         height: containerHeight,
         minHeight: 480,
-        maxHeight: maxHeight ?? undefined,
       }}
     >
       <div
@@ -69,8 +125,8 @@ export function Map({ className }: MapProps) {
             : 'border border-[var(--color-border-tertiary)] rounded-2xl sm:rounded-3xl'
         )}
       >
-        {/* Fullscreen button - only show in embedded mode */}
-        {!isFullscreen && (
+        {/* Fullscreen button - only show when fullscreen is available and not already fullscreen */}
+        {!isFullscreen && canFullscreen && (
           <Button
             variant="solid"
             color="secondary"

package/template/src/resources/map/map.test.tsx

@@ -4,7 +4,6 @@ import { MapResource } from './map';
 
 // Mock sunpeak — SafeArea renders as a plain div
 vi.mock('sunpeak', () => ({
-  useApp: () => null,
   SafeArea: ({ children, ...props }: { children: React.ReactNode; [key: string]: unknown }) => (
     <div data-testid="safe-area" {...props}>
       {children}

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

@@ -15,21 +15,18 @@ let mockState: Record<string, unknown> = {
   serverMessage: null,
   serverError: false,
 };
-let mockHostContext: {
-  deviceCapabilities?: { hover: boolean; touch: boolean };
-} | null = {
-  deviceCapabilities: { hover: true, touch: false },
+let mockDeviceCapabilities: { hover?: boolean; touch?: boolean } = {
+  hover: true,
+  touch: false,
 };
+let mockAvailableModes: string[] = ['inline', 'fullscreen'];
 let mockDisplayMode: 'inline' | 'fullscreen' = 'inline';
 
-const mockApp = {
-  requestDisplayMode: mockRequestDisplayMode,
-};
+const mockUpdateModelContext = vi.fn();
 
 vi.mock('sunpeak', () => ({
-  useApp: () => mockApp,
-  useToolData: (_defaultInput: unknown, defaultOutput: Record<string, unknown>) => ({
-    output: { ...defaultOutput, ...mockToolOutput },
+  useToolData: () => ({
+    output: mockToolOutput,
     input: null,
     inputPartial: null,
     isError: false,
@@ -37,10 +34,18 @@ vi.mock('sunpeak', () => ({
     isCancelled: false,
     cancelReason: null,
   }),
-  useHostContext: () => mockHostContext,
+  useDeviceCapabilities: () => mockDeviceCapabilities,
+  useHostInfo: () => ({ hostVersion: undefined, hostCapabilities: { serverTools: true } }),
   useDisplayMode: () => mockDisplayMode,
+  useRequestDisplayMode: () => ({
+    requestDisplayMode: mockRequestDisplayMode,
+    availableModes: mockAvailableModes,
+  }),
   useAppState: () => [mockState, mockSetState],
   useCallServerTool: () => mockCallServerTool,
+  useUpdateModelContext: () => mockUpdateModelContext,
+  useTimeZone: () => 'America/New_York',
+  useLocale: () => 'en-US',
   SafeArea: ({ children, ...props }: { children: React.ReactNode; [key: string]: unknown }) => (
     <div data-testid="safe-area" {...props}>
       {children}
@@ -100,7 +105,8 @@ describe('ReviewResource', () => {
       serverMessage: null,
       serverError: false,
     };
-    mockHostContext = { deviceCapabilities: { hover: true, touch: false } };
+    mockDeviceCapabilities = { hover: true, touch: false };
+    mockAvailableModes = ['inline', 'fullscreen'];
     mockDisplayMode = 'inline';
   });
 
@@ -123,14 +129,6 @@ describe('ReviewResource', () => {
 
       expect(screen.getByText('Please review the following items')).toBeInTheDocument();
     });
-
-    it('renders loading when no sections', () => {
-      mockToolOutput = { title: 'Test', sections: [] };
-
-      render(<ReviewResource />);
-
-      expect(screen.getByText('Loading...')).toBeInTheDocument();
-    });
   });
 
   describe('Action Buttons', () => {
@@ -610,8 +608,8 @@ describe('ReviewResource', () => {
       expect(safeArea).toBeInTheDocument();
     });
 
-    it('handles null host context', () => {
-      mockHostContext = null;
+    it('handles empty device capabilities gracefully', () => {
+      mockDeviceCapabilities = {};
 
       // Should render without errors
       render(<ReviewResource />);
@@ -621,7 +619,7 @@ describe('ReviewResource', () => {
 
   describe('Touch Device Support', () => {
     it('renders larger buttons for touch devices', () => {
-      mockHostContext = { deviceCapabilities: { hover: false, touch: true } };
+      mockDeviceCapabilities = { hover: false, touch: true };
 
       render(<ReviewResource />);
 
@@ -633,7 +631,7 @@ describe('ReviewResource', () => {
     });
 
     it('renders standard buttons for non-touch devices', () => {
-      mockHostContext = { deviceCapabilities: { hover: true, touch: false } };
+      mockDeviceCapabilities = { hover: true, touch: false };
 
       render(<ReviewResource />);
 
@@ -644,8 +642,8 @@ describe('ReviewResource', () => {
       expect(rejectButton).toHaveAttribute('data-size', 'md');
     });
 
-    it('handles null host context gracefully', () => {
-      mockHostContext = null;
+    it('handles empty device capabilities gracefully', () => {
+      mockDeviceCapabilities = {};
 
       render(<ReviewResource />);
 
@@ -679,7 +677,7 @@ describe('ReviewResource', () => {
       const expandButton = screen.getByLabelText('Enter fullscreen');
       fireEvent.click(expandButton);
 
-      expect(mockRequestDisplayMode).toHaveBeenCalledWith({ mode: 'fullscreen' });
+      expect(mockRequestDisplayMode).toHaveBeenCalledWith('fullscreen');
     });
   });
 });

package/template/src/resources/review/review.tsx

@@ -1,10 +1,14 @@
 import {
-  useApp,
   useAppState,
   useToolData,
-  useHostContext,
+  useDeviceCapabilities,
+  useHostInfo,
   useDisplayMode,
+  useRequestDisplayMode,
   useCallServerTool,
+  useUpdateModelContext,
+  useTimeZone,
+  useLocale,
   SafeArea,
 } from 'sunpeak';
 import type { ResourceConfig } from 'sunpeak';
@@ -494,12 +498,10 @@ function AlertBanner({ alert }: { alert: Alert }) {
 // ============================================================================
 
 export function ReviewResource() {
-  const app = useApp();
-
-  const { output } = useToolData<unknown, ReviewData>(undefined, {
-    title: 'Review',
-    sections: [],
-  });
+  const { output, isLoading, isError, isCancelled, cancelReason } = useToolData<
+    unknown,
+    ReviewData
+  >();
 
   const [state, setState] = useAppState<ReviewState>({
     decision: null,
@@ -509,27 +511,37 @@ export function ReviewResource() {
     serverError: false,
   });
 
-  const context = useHostContext();
+  const { touch: hasTouch = false } = useDeviceCapabilities();
+  const { hostCapabilities } = useHostInfo();
   const displayMode = useDisplayMode();
+  const { requestDisplayMode, availableModes } = useRequestDisplayMode();
+  const callServerTool = useCallServerTool();
+  const updateModelContext = useUpdateModelContext();
+  const timeZone = useTimeZone();
+  const locale = useLocale();
 
-  const hasTouch = context?.deviceCapabilities?.touch ?? false;
+  const canFullscreen = availableModes?.includes('fullscreen') ?? false;
+  const hasServerTools = !!hostCapabilities?.serverTools;
   const decision = state.decision ?? null;
   const isFullscreen = displayMode === 'fullscreen';
   const data = output ?? { title: 'Review', sections: [] as Section[] };
 
   const handleRequestFullscreen = () => {
-    app?.requestDisplayMode({ mode: 'fullscreen' });
+    requestDisplayMode('fullscreen');
   };
 
-  const callServerTool = useCallServerTool();
-
   const handleDecision = async (confirmed: boolean) => {
     const decidedAt = new Date().toISOString();
     const decision = confirmed ? 'accepted' : 'rejected';
 
+    // Inform the model about the user's decision
+    updateModelContext({
+      structuredContent: { decision, title: data.title, decidedAt },
+    });
+
     const tool = data.reviewTool;
-    if (!tool) {
-      // No server tool — show result immediately
+    if (!tool || !hasServerTools) {
+      // No server tool or host doesn't support server tools — show result immediately
       setState({ decision, decidedAt, pending: false, serverMessage: null, serverError: false });
       return;
     }
@@ -568,58 +580,71 @@ export function ReviewResource() {
   const sections = data.sections ?? [];
   const alerts = data.alerts ?? [];
 
+  if (isLoading) {
+    return (
+      <SafeArea className="flex items-center justify-center gap-2 p-8 text-[var(--color-text-secondary)]">
+        <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
+        <span>Loading…</span>
+      </SafeArea>
+    );
+  }
+
+  if (isError) {
+    return (
+      <SafeArea className="flex items-center justify-center p-8 text-[var(--color-text-secondary)]">
+        Failed to load review data
+      </SafeArea>
+    );
+  }
+
+  if (isCancelled) {
+    return (
+      <SafeArea className="flex items-center justify-center p-8 text-[var(--color-text-secondary)]">
+        {cancelReason ?? 'Request was cancelled'}
+      </SafeArea>
+    );
+  }
+
   return (
-    <SafeArea className="flex flex-col">
+    <SafeArea className="px-4 py-4 space-y-4">
       {/* Header */}
-      <div className="px-4 pt-4 pb-3 border-b border-[var(--color-border-tertiary)]">
-        <div className="flex items-start justify-between gap-2">
-          <div className="flex-1 min-w-0">
-            <h1 className="text-xl font-semibold text-[var(--color-text-primary)]">{data.title}</h1>
-            {data.description && (
-              <p className="mt-1 text-sm text-[var(--color-text-secondary)]">{data.description}</p>
-            )}
-          </div>
-          {!isFullscreen && (
-            <Button
-              variant="ghost"
-              color="secondary"
-              size="sm"
-              onClick={handleRequestFullscreen}
-              aria-label="Enter fullscreen"
-              className="flex-shrink-0"
-            >
-              <ExpandLg className="h-4 w-4" aria-hidden="true" />
-            </Button>
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex-1 min-w-0">
+          <h1 className="text-xl font-semibold text-[var(--color-text-primary)]">{data.title}</h1>
+          {data.description && (
+            <p className="mt-1 text-sm text-[var(--color-text-secondary)]">{data.description}</p>
           )}
         </div>
+        {!isFullscreen && canFullscreen && (
+          <Button
+            variant="ghost"
+            color="secondary"
+            size="sm"
+            onClick={handleRequestFullscreen}
+            aria-label="Enter fullscreen"
+            className="flex-shrink-0"
+          >
+            <ExpandLg className="h-4 w-4" aria-hidden="true" />
+          </Button>
+        )}
       </div>
 
-      {/* Content */}
-      <div className="flex-1 overflow-y-auto px-4 py-3 space-y-4">
-        {/* Alerts */}
-        {alerts.length > 0 && (
-          <div className="space-y-2">
-            {alerts.map((alert, i) => (
-              <AlertBanner key={i} alert={alert} />
-            ))}
-          </div>
-        )}
+      {/* Alerts */}
+      {alerts.length > 0 && (
+        <div className="space-y-2">
+          {alerts.map((alert, i) => (
+            <AlertBanner key={i} alert={alert} />
+          ))}
+        </div>
+      )}
 
-        {/* Sections */}
-        {sections.length === 0 ? (
-          // Note: Apps cannot distinguish between "still loading" and "empty response".
-          // We show a loading state as the optimistic assumption.
-          <div className="flex items-center justify-center gap-2 py-8 text-[var(--color-text-secondary)]">
-            <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
-            <span>Loading...</span>
-          </div>
-        ) : (
-          sections.map((section, i) => <SectionRenderer key={i} section={section} />)
-        )}
-      </div>
+      {/* Sections */}
+      {sections.map((section, i) => (
+        <SectionRenderer key={i} section={section} />
+      ))}
 
-      {/* Footer with Actions */}
-      <div className="px-4 py-3 border-t border-[var(--color-border-tertiary)]">
+      {/* Actions */}
+      <div className="pt-2">
         {decision === null ? (
           <div className="flex gap-3">
             <Button
@@ -652,11 +677,9 @@ export function ReviewResource() {
           <div className="flex flex-col items-center gap-1">
             {state.serverMessage ? (
               <>
-                {/* What the user clicked */}
                 <span className="text-xs text-[var(--color-text-secondary)]">
                   {decision === 'accepted' ? acceptedMessage : rejectedMessage}
                 </span>
-                {/* Server's result — color based on structuredContent.status */}
                 <div
                   className="flex items-center justify-center gap-2"
                   style={{
@@ -670,7 +693,6 @@ export function ReviewResource() {
                 </div>
               </>
             ) : (
-              /* No server message (no reviewTool) — icon based on decision */
               <div
                 className="flex items-center justify-center gap-2"
                 style={{
@@ -688,7 +710,7 @@ export function ReviewResource() {
             )}
             {state.decidedAt && (
               <span className="text-xs text-[var(--color-text-secondary)]">
-                {new Date(state.decidedAt).toLocaleString()}
+                {new Date(state.decidedAt).toLocaleString(locale, { timeZone })}
               </span>
             )}
           </div>

package/template/src/tools/review-diff.test.ts

@@ -0,0 +1,73 @@
+import { describe, it, expect } from 'vitest';
+import handler, { tool, schema } from './review-diff';
+
+const extra = {} as Parameters<typeof handler>[1];
+
+describe('review-diff tool', () => {
+  it('exports correct tool config', () => {
+    expect(tool.resource).toBe('review');
+    expect(tool.title).toBe('Diff Review');
+    expect(tool.annotations?.readOnlyHint).toBe(false);
+  });
+
+  it('has expected schema fields', () => {
+    expect(schema.changesetId).toBeDefined();
+    expect(schema.title).toBeDefined();
+    expect(schema.description).toBeDefined();
+    expect(schema.files).toBeDefined();
+    expect(schema.runMigrations).toBeDefined();
+  });
+
+  it('returns structured content with default values', async () => {
+    const result = await handler(
+      { changesetId: '', title: '', description: '', files: [], runMigrations: false },
+      extra
+    );
+    expect(result.structuredContent.title).toBe('Code Review');
+    expect(result.structuredContent.description).toBe('Review the proposed changes below');
+    expect(result.structuredContent.reviewTool).toBeDefined();
+  });
+
+  it('creates changes from provided files', async () => {
+    const result = await handler(
+      {
+        changesetId: 'cs-42',
+        title: 'Fix Bug',
+        description: 'Fixes the login bug',
+        files: ['src/auth.ts', 'src/login.tsx'],
+        runMigrations: false,
+      },
+      extra
+    );
+    expect(result.structuredContent.title).toBe('Fix Bug');
+    const changes = result.structuredContent.sections[0].content;
+    expect(changes).toHaveLength(2);
+    expect(changes[0].path).toBe('src/auth.ts');
+    expect(changes[1].path).toBe('src/login.tsx');
+  });
+
+  it('adds migration action when runMigrations is true', async () => {
+    const result = await handler(
+      {
+        changesetId: 'cs-1',
+        title: '',
+        description: '',
+        files: ['src/app.ts'],
+        runMigrations: true,
+      },
+      extra
+    );
+    const changes = result.structuredContent.sections[0].content;
+    expect(changes).toHaveLength(2);
+    expect(changes[1].type).toBe('action');
+    expect(changes[1].description).toContain('migrations');
+  });
+
+  it('passes changesetId to reviewTool arguments', async () => {
+    const result = await handler(
+      { changesetId: 'cs-99', title: '', description: '', files: [], runMigrations: false },
+      extra
+    );
+    expect(result.structuredContent.reviewTool.arguments.changesetId).toBe('cs-99');
+  });
+});

package/template/src/tools/review-diff.ts

@@ -21,6 +21,33 @@ export const schema = {
 
 type Args = z.infer<z.ZodObject<typeof schema>>;
 
-export default async function (_args: Args, _extra: ToolHandlerExtra) {
-  return { structuredContent: { title: 'Review', sections: [] } };
+export default async function (args: Args, _extra: ToolHandlerExtra) {
+  const files = args.files ?? ['src/app.tsx', 'src/utils/helpers.ts'];
+  const changes: Array<{ id: string; type: string; path?: string; description: string }> =
+    files.map((file, i) => ({
+      id: String(i + 1),
+      type: 'modify',
+      path: file,
+      description: `Changes to ${file.split('/').pop()}`,
+    }));
+
+  if (args.runMigrations) {
+    changes.push({
+      id: 'migration',
+      type: 'action',
+      description: 'Run database migrations',
+    });
+  }
+
+  return {
+    structuredContent: {
+      title: args.title || 'Code Review',
+      description: args.description || 'Review the proposed changes below',
+      sections: [{ type: 'changes', title: 'File Changes', content: changes }],
+      reviewTool: {
+        name: 'review',
+        arguments: { action: 'apply_changes', changesetId: args.changesetId || 'cs-1' },
+      },
+    },
+  };
 }