more instructions

kentcdodds · kentcdodds · commit c085cbe232bd · 2025-09-08T21:39:10.000-06:00
diff --git a/exercises/03.complex/01.problem.iframe/app/routes/ui/journal-viewer.tsx b/exercises/03.complex/01.problem.iframe/app/routes/ui/journal-viewer.tsx
@@ -330,7 +330,6 @@ function SummarizeEntryButtonImpl({
 	const handleSummarize = () => {
 		startTransition(async () => {
 			try {
-				// Get the full entry content first
 				throw new Error('Sending prompts is not yet supported')
 			} catch (err) {
 				showBoundary(err)
diff --git a/exercises/03.complex/01.solution.iframe/app/routes/ui/journal-viewer.tsx b/exercises/03.complex/01.solution.iframe/app/routes/ui/journal-viewer.tsx
@@ -330,7 +330,6 @@ function SummarizeEntryButtonImpl({
 	const handleSummarize = () => {
 		startTransition(async () => {
 			try {
-				// Get the full entry content first
 				throw new Error('Sending prompts is not yet supported')
 			} catch (err) {
 				showBoundary(err)
diff --git a/exercises/03.complex/02.problem.ready/app/routes/ui/journal-viewer.tsx b/exercises/03.complex/02.problem.ready/app/routes/ui/journal-viewer.tsx
@@ -341,7 +341,6 @@ function SummarizeEntryButtonImpl({
 	const handleSummarize = () => {
 		startTransition(async () => {
 			try {
-				// Get the full entry content first
 				throw new Error('Sending prompts is not yet supported')
 			} catch (err) {
 				showBoundary(err)
diff --git a/exercises/03.complex/02.solution.ready/app/routes/ui/journal-viewer.tsx b/exercises/03.complex/02.solution.ready/app/routes/ui/journal-viewer.tsx
@@ -334,7 +334,6 @@ function SummarizeEntryButtonImpl({
 	const handleSummarize = () => {
 		startTransition(async () => {
 			try {
-				// Get the full entry content first
 				throw new Error('Sending prompts is not yet supported')
 			} catch (err) {
 				showBoundary(err)
diff --git a/exercises/03.complex/03.problem.sizing/app/routes/ui/journal-viewer.tsx b/exercises/03.complex/03.problem.sizing/app/routes/ui/journal-viewer.tsx
@@ -334,7 +334,6 @@ function SummarizeEntryButtonImpl({
 	const handleSummarize = () => {
 		startTransition(async () => {
 			try {
-				// Get the full entry content first
 				throw new Error('Sending prompts is not yet supported')
 			} catch (err) {
 				showBoundary(err)
diff --git a/exercises/03.complex/03.solution.sizing/app/routes/ui/journal-viewer.tsx b/exercises/03.complex/03.solution.sizing/app/routes/ui/journal-viewer.tsx
@@ -334,7 +334,6 @@ function SummarizeEntryButtonImpl({
 	const handleSummarize = () => {
 		startTransition(async () => {
 			try {
-				// Get the full entry content first
 				throw new Error('Sending prompts is not yet supported')
 			} catch (err) {
 				showBoundary(err)
diff --git a/exercises/03.complex/04.problem.dynamic-sizing/app/routes/ui/journal-viewer.tsx b/exercises/03.complex/04.problem.dynamic-sizing/app/routes/ui/journal-viewer.tsx
@@ -20,6 +20,11 @@ export default function JournalViewer({ loaderData }: Route.ComponentProps) {
 
 	useEffect(() => {
 		window.parent.postMessage({ type: 'ui-lifecycle-iframe-ready' }, '*')
+
+		// 🐨 get the height of the document.documentElement
+		// 🐨 get the width of the document.documentElement
+		// 🐨 call window.parent.postMessage with the type 'ui-size-change' and the payload { height, width }
+		// 🐨 set the targetOrigin to '*'
 	}, [])
 
 	const handleEntryDeleted = (entryId: number) => {
@@ -334,7 +339,6 @@ function SummarizeEntryButtonImpl({
 	const handleSummarize = () => {
 		startTransition(async () => {
 			try {
-				// Get the full entry content first
 				throw new Error('Sending prompts is not yet supported')
 			} catch (err) {
 				showBoundary(err)
diff --git a/exercises/03.complex/04.solution.dynamic-sizing/app/routes/ui/journal-viewer.tsx b/exercises/03.complex/04.solution.dynamic-sizing/app/routes/ui/journal-viewer.tsx
@@ -342,7 +342,6 @@ function SummarizeEntryButtonImpl({
 	const handleSummarize = () => {
 		startTransition(async () => {
 			try {
-				// Get the full entry content first
 				throw new Error('Sending prompts is not yet supported')
 			} catch (err) {
 				showBoundary(err)
diff --git a/exercises/04.interactive/01.problem.links/app/routes/ui/journal-viewer.tsx b/exercises/04.interactive/01.problem.links/app/routes/ui/journal-viewer.tsx
@@ -4,7 +4,11 @@ import {
 	useErrorBoundary,
 	type FallbackProps,
 } from 'react-error-boundary'
-import { useMcpUiInit } from '#app/utils/mcp.ts'
+import {
+	useMcpUiInit,
+	// 💰 you'll want this:
+	// sendLinkMcpMessage
+} from '#app/utils/mcp.ts'
 import { useDoubleCheck } from '#app/utils/misc.ts'
 import { type Route } from './+types/journal-viewer.tsx'
 
@@ -155,6 +159,7 @@ function XPostLinkImpl({ entryCount }: { entryCount: number }) {
 				const url = new URL('https://x.com/intent/post')
 				url.searchParams.set('text', text)
 
+				// 🐨 replace this with await sendLinkMcpMessage(url.toString())
 				throw new Error(`Links not yet supported`)
 			} catch (err) {
 				showBoundary(err)
@@ -333,7 +338,6 @@ function SummarizeEntryButtonImpl({
 	const handleSummarize = () => {
 		startTransition(async () => {
 			try {
-				// Get the full entry content first
 				throw new Error('Sending prompts is not yet supported')
 			} catch (err) {
 				showBoundary(err)
diff --git a/exercises/04.interactive/01.problem.links/app/utils/mcp.ts b/exercises/04.interactive/01.problem.links/app/utils/mcp.ts
@@ -13,3 +13,16 @@ export function useMcpUiInit() {
 		)
 	}, [])
 }
+
+// 🐨 export a function called sendLinkMcpMessage that takes a url string and returns a promise
+// 🐨 it should:
+// - generate a random UUID for the message id
+// - return a new Promise((resolve, reject) = {
+//	 - call window.parent.postMessage with the type 'link', the message id, and the payload { url } and targetOrigin '*'
+//	 - set up a function to handle the event (MessageEvent) from the parent window
+//		 - if the event.data.type is 'ui-message-response' grab the event.data's messageId and payload
+//		 - if the messageId matches the message id, remove the event listener
+//		 - if the payload.error exists, reject the promise with the error
+//		 - otherwise resolve with the payload.response
+//	 - add the "message" event listener to the window
+// })
diff --git a/exercises/04.interactive/01.solution.links/app/routes/ui/journal-viewer.tsx b/exercises/04.interactive/01.solution.links/app/routes/ui/journal-viewer.tsx
@@ -5,7 +5,7 @@ import {
 	type FallbackProps,
 } from 'react-error-boundary'
 import { useMcpUiInit, sendLinkMcpMessage } from '#app/utils/mcp.ts'
-import { useDoubleCheck, useUnmountSignal } from '#app/utils/misc.ts'
+import { useDoubleCheck } from '#app/utils/misc.ts'
 import { type Route } from './+types/journal-viewer.tsx'
 
 export async function loader({ context }: Route.LoaderArgs) {
@@ -333,7 +333,6 @@ function SummarizeEntryButtonImpl({
 	const handleSummarize = () => {
 		startTransition(async () => {
 			try {
-				// Get the full entry content first
 				throw new Error('Sending prompts is not yet supported')
 			} catch (err) {
 				showBoundary(err)
diff --git a/exercises/04.interactive/02.problem.tools/app/routes/ui/journal-viewer.tsx b/exercises/04.interactive/02.problem.tools/app/routes/ui/journal-viewer.tsx
@@ -278,10 +278,14 @@ function ViewEntryButtonImpl({
 }) {
 	const [isPending, startTransition] = useTransition()
 	const { showBoundary } = useErrorBoundary()
+	// 🐨 get an unmountSignal from useUnmountSignal
 
 	const handleViewEntry = () => {
 		startTransition(async () => {
 			try {
+				// 🐨 replace this throw with await sendMcpMessage
+				// the type will be 'tool', the toolName will be 'view_entry', and the params will be { id: entry.id }
+				// pass the signal you got
 				throw new Error('Calling tools is not yet supported')
 			} catch (err) {
 				showBoundary(err)
@@ -338,7 +342,6 @@ function SummarizeEntryButtonImpl({
 	const handleSummarize = () => {
 		startTransition(async () => {
 			try {
-				// Get the full entry content first
 				throw new Error('Sending prompts is not yet supported')
 			} catch (err) {
 				showBoundary(err)
diff --git a/exercises/04.interactive/02.problem.tools/app/utils/mcp.ts b/exercises/04.interactive/02.problem.tools/app/utils/mcp.ts
@@ -25,12 +25,15 @@ type McpMessageReturnType<Options> = Promise<
 >
 
 type McpMessageTypes = {
-	tool: { toolName: string; params: Record<string, unknown> }
+	// 🐨 add support for a 'tool' type which has a payload of { toolName: string; params: Record<string, unknown> }
 	link: { url: string }
 }
 
 type McpMessageType = keyof McpMessageTypes
 
+// 🐨 add another override for the 'tool' type
+// 💰 it should have the same signature as the 'link' type (except the type is 'tool')
+
 function sendMcpMessage<Options extends MessageOptions>(
 	type: 'link',
 	payload: McpMessageTypes['link'],
diff --git a/exercises/04.interactive/02.solution.tools/app/routes/ui/entry-viewer.tsx b/exercises/04.interactive/02.solution.tools/app/routes/ui/entry-viewer.tsx
@@ -7,8 +7,8 @@ import {
 } from 'react-error-boundary'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
-import { useMcpUiInit, sendMcpMessage } from '#app/utils/mcp.ts'
-import { useDoubleCheck, useUnmountSignal } from '#app/utils/misc.ts'
+import { useMcpUiInit } from '#app/utils/mcp.ts'
+import { useDoubleCheck } from '#app/utils/misc.ts'
 import { type Route } from './+types/entry-viewer.tsx'
 
 export async function loader({ context, params }: Route.LoaderArgs) {
@@ -176,19 +176,13 @@ function DeleteEntryButtonImpl({
 	const [isPending, startTransition] = useTransition()
 	const { doubleCheck, getButtonProps } = useDoubleCheck()
 	const { showBoundary } = useErrorBoundary()
-	const unmountSignal = useUnmountSignal()
 
 	const handleDelete = () => {
 		if (!doubleCheck) return
 
 		startTransition(async () => {
 			try {
-				await sendMcpMessage(
-					'tool',
-					{ toolName: 'delete_entry', params: { id: entry.id } },
-					{ signal: unmountSignal },
-				)
-				onDeleted()
+				throw new Error('TODO: this is not yet implemented')
 			} catch (err) {
 				showBoundary(err)
 			}
diff --git a/exercises/04.interactive/02.solution.tools/app/routes/ui/journal-viewer.tsx b/exercises/04.interactive/02.solution.tools/app/routes/ui/journal-viewer.tsx
@@ -343,7 +343,6 @@ function SummarizeEntryButtonImpl({
 	const handleSummarize = () => {
 		startTransition(async () => {
 			try {
-				// Get the full entry content first
 				throw new Error('Sending prompts is not yet supported')
 			} catch (err) {
 				showBoundary(err)
diff --git a/exercises/04.interactive/03.problem.prompts/app/routes/ui/journal-viewer.tsx b/exercises/04.interactive/03.problem.prompts/app/routes/ui/journal-viewer.tsx
@@ -339,11 +339,14 @@ function SummarizeEntryButtonImpl({
 }) {
 	const [isPending, startTransition] = useTransition()
 	const { showBoundary } = useErrorBoundary()
+	// 🐨 get an unmountSignal from useUnmountSignal
 
 	const handleSummarize = () => {
 		startTransition(async () => {
 			try {
-				// Get the full entry content first
+				// 🐨 replace this throw with await sendMcpMessage
+				// the type will be 'prompt', the prompt will be `Please use the EpicMe get_entry tool to get entry ${entry.id} and provide a concise and insightful summary of it.`
+				// pass the signal you got from useUnmountSignal
 				throw new Error('Sending prompts is not yet supported')
 			} catch (err) {
 				showBoundary(err)
diff --git a/exercises/04.interactive/03.problem.prompts/app/utils/mcp.ts b/exercises/04.interactive/03.problem.prompts/app/utils/mcp.ts
@@ -26,6 +26,7 @@ type McpMessageReturnType<Options> = Promise<
 
 type McpMessageTypes = {
 	tool: { toolName: string; params: Record<string, unknown> }
+	// 🐨 add support for a 'prompt' type which has a payload of { prompt: string }
 	link: { url: string }
 }
 
@@ -37,6 +38,9 @@ function sendMcpMessage<Options extends MessageOptions>(
 	options?: Options,
 ): McpMessageReturnType<Options>
 
+// 🐨 add another override for the 'prompt' type
+// 💰 it should have the same signature as the 'link' type (except the type is 'prompt')
+
 function sendMcpMessage<Options extends MessageOptions>(
 	type: 'link',
 	payload: McpMessageTypes['link'],
diff --git a/exercises/05.advanced/01.problem.tool-results/app/routes/ui/journal-viewer.tsx b/exercises/05.advanced/01.problem.tool-results/app/routes/ui/journal-viewer.tsx
@@ -4,6 +4,8 @@ import {
 	useErrorBoundary,
 	type FallbackProps,
 } from 'react-error-boundary'
+// 💰 you'll want this:
+// import { z } from 'zod'
 import { useMcpUiInit, sendMcpMessage } from '#app/utils/mcp.ts'
 import { useDoubleCheck, useUnmountSignal } from '#app/utils/misc.ts'
 import { type Route } from './+types/journal-viewer.tsx'
@@ -210,6 +212,9 @@ function DeleteEntryError({ error, resetErrorBoundary }: FallbackProps) {
 	)
 }
 
+// 🐨 create a schema for the results of the delete_entry tool (check the worker/mcp/tools.ts file for the output schema)
+// 💰 the schema should be an object with a structuredContent property that is an object with a success property that is a boolean
+
 function DeleteEntryButtonImpl({
 	entry,
 	onDeleted,
@@ -220,10 +225,17 @@ function DeleteEntryButtonImpl({
 	const [isPending, startTransition] = useTransition()
 	const { doubleCheck, getButtonProps } = useDoubleCheck()
 	const { showBoundary } = useErrorBoundary()
+	// 🐨 get an unmountSignal from useUnmountSignal
 
 	const handleDelete = () => {
 		startTransition(async () => {
 			try {
+				// 🐨 replace this throw with await sendMcpMessage
+				// the type will be 'tool', the toolName will be 'delete_entry', and the params will be { id: entry.id }
+				// pass the signal you got from useUnmountSignal
+				// pass the schema you created above
+				// 🦉 the result of the sendMcpMessage call should be type safe thanks to your schema
+				// 🐨 if the result.structuredContent.success is true, call onDeleted
 				throw new Error('Calling tools is not yet supported')
 			} catch (err) {
 				showBoundary(err)
diff --git a/exercises/05.advanced/02.problem.render-data/app/utils/mcp.ts b/exercises/05.advanced/02.problem.render-data/app/utils/mcp.ts
@@ -103,3 +103,5 @@ function sendMcpMessage(
 }
 
 export { sendMcpMessage }
+
+// ‼️ review this: https://github.com/idosal/mcp-ui/issues/106
