farc - npm Package Compare versions

Comparing version 0.0.1-main.20240215T022025 to 0.0.1-main.20240215T203749

_lib/dev/components.d.ts

@@ -5,6 +5,6 @@ import { type Frame as FrameType } from './types.js';
     baseUrl: string;
-    error?: string;
     frame: FrameType;
+    inspectorData: Awaited<ReturnType<typeof getInspectorData>>;
     routes: readonly string[];
-    inspectorData: Awaited<ReturnType<typeof getInspectorData>>;
+    speed: number;
     state: State;
@@ -11,0 +11,0 @@ };

_lib/dev/components.js

@@ -5,26 +5,34 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "farc/jsx/jsx-runtime";
 export function Preview(props) {
-    const { baseUrl, error, frame, routes, state } = props;
-    return (_jsx("div", { class: "items-center flex flex-col p-4 mt-1", "x-data": `{
-        error: ${error ? `'${error}'` : undefined},
+    const { baseUrl, frame, inspectorData, routes, speed, state } = props;
+    return (_jsx("div", { class: "flex flex-col items-center p-4", "x-data": `{
         baseUrl: '${baseUrl}',
-        history: [],
-        id: -1,
-        initialData: {
+        data: {
           frame: ${JSON.stringify(frame)},
-          inspectorData: ${JSON.stringify(props.inspectorData)},
+          inspectorData: ${JSON.stringify(inspectorData)},
           routes: ${JSON.stringify(routes)},
+          speed: ${speed},
           state: ${JSON.stringify(state)},
         },
+        history: [],
+        id: -1,
         inputText: '',
-        data: {
-          frame: ${JSON.stringify(frame)},
-          inspectorData: ${JSON.stringify(props.inspectorData)},
-          routes: ${JSON.stringify(routes)},
-          state: ${JSON.stringify(state)},
+        logs: [{ method: 'GET', url: '${baseUrl}', speed: ${speed}, time: Date.now() }],
+        get frame() { return this.data.frame },
+        get speed() { return this.data.speed },
+
+        async getFrame() {
+          const response = await fetch(this.baseUrl + '/dev/frame', {
+            method: 'GET',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          })
+          const json = await response.json()
+          this.logs = [...this.logs, { method: 'GET', url: this.baseUrl, speed: json.speed, time: Date.now() }]
+          return json
         },
-        get frame() { return this.data.frame },
-        async fetchFrame(body) {
-          const response = await fetch(this.baseUrl + '/dev/action', {
+        async postFrameAction(body) {
+          const response = await fetch(this.baseUrl + '/dev/frame/action', {
             method: 'POST',
-            body,
+            body: JSON.stringify(body),
             headers: {
@@ -34,26 +42,53 @@ 'Content-Type': 'application/json',
           })
-          return response.json()
+          const json = await response.json()
+          this.logs = [...this.logs, { method: 'POST', url: body.postUrl, body, speed: json.speed, time: Date.now() }]
+          return json
+        },
+        async postFrameRedirect(body) {
+          const response = await fetch(this.baseUrl + '/dev/frame/redirect', {
+            method: 'POST',
+            body: JSON.stringify(body),
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          })
+          const json = await response.json()
+          this.logs = [...this.logs, { method: 'POST', url: body.postUrl, body, speed: json.speed, time: Date.now() }]
+          return json
+        },
+
+        formatSpeed(speed) {
+          if (speed % 1 === 0) return speed
+          return (Math.round((speed + Number.EPSILON) * 100) / 100).toFixed(2)
+        },
+        formatUrl(url) {
+          let urlObj = new URL(url)
+          urlObj.search = ''
+          const urlString = urlObj.toString().replace(/https?:\\/\\//, '')
+          return urlString.endsWith('/') ? urlString.slice(0, -1) : urlString
         }
-      }`, children: _jsxs("div", { class: "max-w-7xl flex flex-col gap-2.5 w-full", "x-data": "{\n          get inspectorData() { return data.inspectorData },\n          get routes() { return data.routes },\n          get state() { return data.state },\n          get buttonCount() { return frame.buttons?.length ?? 0 },\n          get hasIntents() { return Boolean(frame.input || frame.buttons.length) },\n        }", children: [_jsx(HistoryBar, {}), _jsxs("div", { class: "flex flex-row gap-2.5", style: { minHeight: '397px' }, children: [_jsx(Frame, {}), _jsx(Navigator, {})] }), _jsx("div", { class: "text-er text-sm", "x-text": "error" }), _jsx(Inspector, {})] }) }));
+      }`, children: _jsxs("div", { class: "grid gap-2.5 w-full", style: { maxWidth: '68rem' }, "x-data": "{\n          get inspectorData() { return data.inspectorData },\n          get routes() { return data.routes },\n          get state() { return data.state },\n          get buttonCount() { return frame.buttons?.length ?? 0 },\n          get hasIntents() { return Boolean(frame.input || frame.buttons.length) },\n        }", children: [_jsx(Navigator, {}), _jsxs("div", { class: "container gap-4", style: { minHeight: '25.5rem' }, children: [_jsx(Frame, {}), _jsxs("div", { class: "w-full scrollbars", children: [_jsxs("div", { children: ["Version: ", _jsx("span", { "x-text": "frame.version" })] }), _jsxs("div", { children: ["Image: ", _jsx("span", { "x-text": "frame.imageUrl" })] }), _jsxs("div", { children: ["Image Aspect Ratio: ", _jsx("span", { "x-text": "frame.imageAspectRatio" })] }), _jsxs("div", { children: ["Post URL: ", _jsx("span", { "x-text": "frame.postUrl" })] })] })] }), _jsxs("div", { class: "border divide-x rounded-md container", children: [_jsx("div", { class: "p-4 scrollbars", style: { height: '22.75rem' }, children: _jsx(Inspector, {}) }), _jsx("div", { class: "p-4 scrollbars", style: { height: '22.75rem' }, children: _jsx(Timeline, {}) })] })] }) }));
 }
-function HistoryBar() {
-    return (_jsxs("div", { class: "items-center flex gap-2 w-full", style: { maxWidth: '512px', height: '1.7rem' }, children: [_jsxs("div", { class: "flex border rounded-md h-full", children: [_jsx("button", { "aria-label": "back", class: "text-fg2 bg-transparent px-1.5 rounded-l-md", type: "button", "x-data": "{ get disabled() { return id === -1 } }", "x-on:click": `
+function Navigator() {
+    return (_jsxs("div", { class: "items-center flex gap-2 w-full", style: { height: '2rem' }, children: [_jsxs("div", { class: "flex border rounded-md h-full", children: [_jsx("button", { "aria-label": "back", class: "text-fg2 bg-transparent px-2 rounded-l-md", type: "button", "x-on:click": `
             const nextId = id - 1
-            if (nextId < 0) {
-              data = initialData
-              id = -1
-              inputText = ''
-              return
-            }
+            if (nextId < 0)
+              return getFrame()
+                .then((json) => {
+                  data = json
+                  id = -1
+                  inputText = ''
+                })
+                .catch(console.error)
 
             const body = history[nextId].body
-            fetchFrame(body)
-            .then((json) => {
-              data = json
-              id = nextId
-              inputText = ''
-            })
-            .catch(console.error)
-          `, ':disabled': 'disabled',
-                        ':style': "disabled && { opacity: '0.25' }", children: arrowLeftIcon }), _jsx("div", { class: "bg-br h-full", style: { width: '1px' } }), _jsx("button", { "aria-label": "forward", class: "text-fg2 bg-transparent px-1.5 rounded-r-md", type: "button", "x-data": "{ get disabled() { return !history[id + 1] } }", "x-on:click": `
+            postFrameAction(body)
+              .then((json) => {
+                data = json
+                id = nextId
+                inputText = ''
+              })
+              .catch(console.error)
+          `, ':disabled': 'id === -1',
+                        ':style': "id === -1 && { opacity: '0.25' }", children: arrowLeftIcon }), _jsx("div", { class: "bg-br h-full", style: { width: '1px' } }), _jsx("button", { "aria-label": "forward", class: "text-fg2 bg-transparent px-2 rounded-r-md", type: "button", "x-data": "{ get disabled() { return !history[id + 1] } }", "x-on:click": `
             let nextId = id + 1
@@ -63,20 +98,28 @@ if (!history[nextId]) return
             const body = history[nextId].body
-            fetchFrame(body)
-            .then((json) => {
-              data = json
-              id = nextId
-              inputText = ''
-            })
-            .catch(console.error)
+            postFrameAction(body)
+              .then((json) => {
+                data = json
+                id = nextId
+                inputText = ''
+              })
+              .catch(console.error)
           `, ':disabled': 'disabled',
-                        ':style': "disabled && { opacity: '0.25' }", children: arrowRightIcon })] }), _jsx("button", { "aria-label": "refresh", class: "border rounded-md text-fg2 bg-transparent px-1.5 rounded-r-md h-full", type: "button", "x-data": "{ get disabled() { return !history[id] } }", "x-on:click": `
-          const body = history[id].body
-          fetchFrame(body)
-          .then((json) => data = json)
-          .catch(console.error)
-        `, children: _jsx("span", { ':disabled': 'disabled',
-                    ':style': "disabled && { opacity: '0.25' }", children: refreshIcon }) }), _jsx("div", { class: "bg-transparent items-center flex text-fg2 px-1.5 rounded-md font-mono w-full gap-1 h-full text-sm", children: _jsx("div", { class: "overflow-hidden whitespace-nowrap text-ellipsis", style: { marginTop: '1px' }, "x-text": "state.context.url.replace(/https?:\\\\/\\\\//, '')" }) })] }));
+                        ':style': "disabled && { opacity: '0.25' }", children: arrowRightIcon })] }), _jsx("button", { "aria-label": "refresh", class: "border rounded-md text-fg2 bg-transparent px-2 rounded-r-md h-full", type: "button", "x-on:click": `
+          const body = history[id]?.body
+          if (body) postFrameAction(body).then((json) => data = json).catch(console.error)
+          else getFrame().then((json) => data = json).catch(console.error)
+        `, children: refreshIcon }), _jsxs("div", { class: "relative grid h-full", "x-data": "{ open: false }", style: { flex: '1' }, children: [_jsxs("button", { type: "button", class: "bg-transparent border rounded-md text-fg2 w-full h-full relative overflow-hidden", style: {
+                            paddingLeft: '1.75rem',
+                            paddingRight: '1.75rem',
+                        }, "x-on:click": "open = true", children: [_jsx("div", { class: "flex items-center h-full", style: { left: '0.5rem', position: 'absolute' }, children: globeIcon }), _jsx("div", { class: "overflow-hidden whitespace-nowrap text-ellipsis h-full", children: _jsx("span", { class: "font-mono text-sm", style: { lineHeight: '2rem' }, "x-text": "formatUrl(state.context.url)" }) })] }), _jsx("div", { "x-show": "open", class: "border bg-bg rounded-lg w-full overflow-hidden", style: {
+                            position: 'absolute',
+                            marginTop: '4px',
+                            top: '100%',
+                            zIndex: '10',
+                        }, "x-data": "{ url: new URL(baseUrl) }", '@click.outside': 'open = false',
+                        '@keyup.escape': 'open = false',
+                        'x-trap': 'open', children: _jsx("template", { "x-for": "(route, index) in routes", children: _jsx("a", { class: "display-block font-mono text-sm whitespace-nowrap px-3 py-1.5 rounded-lg overflow-hidden text-ellipsis", "x-text": "`${url.host}${route === '/' ? '' : route}`", style: { textDecoration: 'none' }, ':href': `route === '/' ? '/dev' : route + '/dev'` }) }) })] }), _jsxs("div", { class: "border rounded-md items-center flex text-fg2 px-1.5 rounded-md font-mono gap-1.5 h-full text-sm", children: [stopwatchIcon, _jsx("div", { "x-text": "`${formatSpeed(speed)}ms`" })] }), _jsx("button", { type: "button", class: "bg-transparent rounded-md border overflow-hidden text-fg2", children: farcasterIcon })] }));
 }
 function Frame() {
-    return (_jsxs("div", { class: "w-full", style: { maxWidth: '512px' }, children: [_jsxs("div", { class: "relative rounded-md relative w-full", children: [_jsx(Img, {}), _jsx("template", { "x-if": "hasIntents", children: _jsxs("div", { class: "bg-bg2 flex flex-col px-4 py-2 gap-2 rounded-bl-md rounded-br-md border-t-0 border", children: [_jsx("template", { "x-if": "frame.input", children: _jsx(Input, {}) }), _jsx("template", { "x-if": "Boolean(frame.buttons.length)", children: _jsx("div", { class: "grid gap-2.5", ':class': `{
+    return (_jsxs("div", { class: "w-full h-full", children: [_jsxs("div", { class: "relative rounded-md relative w-full", children: [_jsx(Img, {}), _jsx("template", { "x-if": "hasIntents", children: _jsxs("div", { class: "bg-bg2 flex flex-col px-4 py-2 gap-2 rounded-bl-md rounded-br-md border-t-0 border", children: [_jsx("template", { "x-if": "frame.input", children: _jsx(Input, {}) }), _jsx("template", { "x-if": "Boolean(frame.buttons.length)", children: _jsx("div", { class: "grid gap-2.5", ':class': `{
                     'grid-cols-1': buttonCount === 1,
@@ -118,88 +161,43 @@ 'grid-cols-2': buttonCount === 2,
               if (open) return
-              fetch(baseUrl + '/dev/redirect', {
-                method: 'POST',
-                body: JSON.stringify({
-                  buttonIndex: index,
-                  inputText,
-                  postUrl: target ?? frame.postUrl,
-                }),
-                headers: {
-                  'Content-Type': 'application/json',
-                },
-              })
-              .then((res) => res.json())
-              .then((json) => {
-                // TODO: show error
-                if (!json.success) return
-                url = json.redirectUrl
-                open = true
-              })
-              .catch(console.error)
+              const body = {
+                buttonIndex: index,
+                inputText,
+                postUrl: target ?? frame.postUrl,
+              }
+              postFrameRedirect(body)
+                .then((json) => {
+                  // TODO: show error
+                  if (!json.success) return
+                  url = json.redirectUrl
+                  open = true
+                })
+                .catch(console.error)
           `, children: [_jsx("div", { style: { marginTop: '2px' }, children: innerHtml }), _jsx("div", { style: { marginTop: '2px' }, children: redirectIcon })] }), leavingAppPrompt] }) }), _jsx("template", { "x-if": "type === 'mint'", children: _jsxs("button", { class: buttonClass, style: { paddingTop: '0.625rem ' }, type: "button", children: [mintIcon, innerHtml] }) }), _jsx("template", { "x-if": "type === 'post'", children: _jsx("button", { class: buttonClass, style: { paddingTop: '0.625rem' }, type: "button", "x-on:click": `
-            const body = JSON.stringify({
+            const body = {
               buttonIndex: index,
               inputText,
               postUrl: target ?? frame.postUrl,
-            })
-            fetchFrame(body)
-            .then((json) => {
-              const nextId = id + 1
-              const item = { body, url: json.state.context.url }
-              if (nextId < history.length) history = [...history.slice(0, nextId), item]
-              else history = [...history, item]
-              data = json
-              id = nextId
-              inputText = ''
-            })
-            .catch(console.error)
+            }
+            postFrameAction(body)
+              .then((json) => {
+                const nextId = id + 1
+                const item = { body, url: json.state.context.url }
+                if (nextId < history.length) history = [...history.slice(0, nextId), item]
+                else history = [...history, item]
+                data = json
+                id = nextId
+                inputText = ''
+              })
+              .catch(console.error)
           `, children: innerHtml }) })] }));
 }
-const externalLinkIcon = (_jsx("svg", { "aria-hidden": "true", class: "text-fg2", fill: "none", height: "13", viewBox: "0 0 15 15", width: "13", children: _jsx("path", { d: "M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z", fill: "currentColor", "fill-rule": "evenodd", "clip-rule": "evenodd" }) }));
-const mintIcon = (_jsx("svg", { "aria-hidden": "true", fill: "none", height: "13", viewBox: "0 0 28 28", width: "13", children: _jsx("path", { fill: "currentColor", "fill-rule": "evenodd", d: "M14.804.333a1.137 1.137 0 0 0-1.608 0L.333 13.196a1.137 1.137 0 0 0 0 1.608l12.863 12.863a1.137 1.137 0 0 0 1.608 0l12.863-12.863a1.137 1.137 0 0 0 0-1.608L14.804.333ZM14 5.159c0-.89-1.077-1.337-1.707-.707l-8.134 8.134a2 2 0 0 0 0 2.828l8.134 8.134c.63.63 1.707.184 1.707-.707V5.159Z", "clip-rule": "nonzero" }) }));
-const redirectIcon = (_jsx("svg", { "aria-hidden": "true", class: "text-fg2", fill: "none", height: "13", viewBox: "0 0 15 15", width: "13", children: _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 13C12.5523 13 13 12.5523 13 12V3C13 2.44771 12.5523 2 12 2H3C2.44771 2 2 2.44771 2 3V6.5C2 6.77614 2.22386 7 2.5 7C2.77614 7 3 6.77614 3 6.5V3H12V12H8.5C8.22386 12 8 12.2239 8 12.5C8 12.7761 8.22386 13 8.5 13H12ZM9 6.5C9 6.5001 9 6.50021 9 6.50031V6.50035V9.5C9 9.77614 8.77614 10 8.5 10C8.22386 10 8 9.77614 8 9.5V7.70711L2.85355 12.8536C2.65829 13.0488 2.34171 13.0488 2.14645 12.8536C1.95118 12.6583 1.95118 12.3417 2.14645 12.1464L7.29289 7H5.5C5.22386 7 5 6.77614 5 6.5C5 6.22386 5.22386 6 5.5 6H8.5C8.56779 6 8.63244 6.01349 8.69139 6.03794C8.74949 6.06198 8.80398 6.09744 8.85143 6.14433C8.94251 6.23434 8.9992 6.35909 8.99999 6.49708L8.99999 6.49738", fill: "currentColor" }) }));
-const arrowLeftIcon = (_jsx("svg", { "aria-hidden": "true", width: "13", height: "13", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355L3.70711 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H3.70711L6.85355 11.1464C7.04882 11.3417 7.04882 11.6583 6.85355 11.8536C6.65829 12.0488 6.34171 12.0488 6.14645 11.8536L2.14645 7.85355C1.95118 7.65829 1.95118 7.34171 2.14645 7.14645L6.14645 3.14645C6.34171 2.95118 6.65829 2.95118 6.85355 3.14645Z", fill: "currentColor", "fill-rule": "evenodd", "clip-rule": "evenodd" }) }));
-const arrowRightIcon = (_jsx("svg", { "aria-hidden": "true", width: "13", height: "13", viewBox: "0 0 15 15", fill: "none", children: _jsx("path", { d: "M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z", fill: "currentColor", "fill-rule": "evenodd", "clip-rule": "evenodd" }) }));
-// const _stopwatchIcon = (
-//   <svg
-//     aria-hidden="true"
-//     width="13"
-//     height="13"
-//     viewBox="0 0 15 15"
-//     fill="none"
-//   >
-//     <path
-//       d="M5.49998 0.5C5.49998 0.223858 5.72383 0 5.99998 0H7.49998H8.99998C9.27612 0 9.49998 0.223858 9.49998 0.5C9.49998 0.776142 9.27612 1 8.99998 1H7.99998V2.11922C9.09832 2.20409 10.119 2.56622 10.992 3.13572C11.0116 3.10851 11.0336 3.08252 11.058 3.05806L11.858 2.25806C12.1021 2.01398 12.4978 2.01398 12.7419 2.25806C12.986 2.50214 12.986 2.89786 12.7419 3.14194L11.967 3.91682C13.1595 5.07925 13.9 6.70314 13.9 8.49998C13.9 12.0346 11.0346 14.9 7.49998 14.9C3.96535 14.9 1.09998 12.0346 1.09998 8.49998C1.09998 5.13362 3.69904 2.3743 6.99998 2.11922V1H5.99998C5.72383 1 5.49998 0.776142 5.49998 0.5ZM2.09998 8.49998C2.09998 5.51764 4.51764 3.09998 7.49998 3.09998C10.4823 3.09998 12.9 5.51764 12.9 8.49998C12.9 11.4823 10.4823 13.9 7.49998 13.9C4.51764 13.9 2.09998 11.4823 2.09998 8.49998ZM7.99998 4.5C7.99998 4.22386 7.77612 4 7.49998 4C7.22383 4 6.99998 4.22386 6.99998 4.5V9.5C6.99998 9.77614 7.22383 10 7.49998 10C7.77612 10 7.99998 9.77614 7.99998 9.5V4.5Z"
-//       fill="currentColor"
-//       fill-rule="evenodd"
-//       clip-rule="evenodd"
-//     />
-//   </svg>
-// )
-//
-// const linkIcon = (
-//   <svg
-//     aria-hidden="true"
-//     width="13"
-//     height="13"
-//     viewBox="0 0 15 15"
-//     fill="none"
-//   >
-//     <path
-//       d="M4.62471 4.00001L4.56402 4.00001C4.04134 3.99993 3.70687 3.99988 3.4182 4.055C2.2379 4.28039 1.29846 5.17053 1.05815 6.33035C0.999538 6.61321 0.999604 6.93998 0.999703 7.43689L0.999711 7.50001L0.999703 7.56313C0.999604 8.06004 0.999538 8.38681 1.05815 8.66967C1.29846 9.8295 2.2379 10.7196 3.4182 10.945C3.70688 11.0001 4.04135 11.0001 4.56403 11L4.62471 11H5.49971C5.77585 11 5.99971 10.7762 5.99971 10.5C5.99971 10.2239 5.77585 10 5.49971 10H4.62471C4.02084 10 3.78907 9.99777 3.60577 9.96277C2.80262 9.8094 2.19157 9.21108 2.03735 8.46678C2.00233 8.29778 1.99971 8.08251 1.99971 7.50001C1.99971 6.91752 2.00233 6.70225 2.03735 6.53324C2.19157 5.78895 2.80262 5.19062 3.60577 5.03725C3.78907 5.00225 4.02084 5.00001 4.62471 5.00001H5.49971C5.77585 5.00001 5.99971 4.77615 5.99971 4.50001C5.99971 4.22387 5.77585 4.00001 5.49971 4.00001H4.62471ZM10.3747 5.00001C10.9786 5.00001 11.2104 5.00225 11.3937 5.03725C12.1968 5.19062 12.8079 5.78895 12.9621 6.53324C12.9971 6.70225 12.9997 6.91752 12.9997 7.50001C12.9997 8.08251 12.9971 8.29778 12.9621 8.46678C12.8079 9.21108 12.1968 9.8094 11.3937 9.96277C11.2104 9.99777 10.9786 10 10.3747 10H9.49971C9.22357 10 8.99971 10.2239 8.99971 10.5C8.99971 10.7762 9.22357 11 9.49971 11H10.3747L10.4354 11C10.9581 11.0001 11.2925 11.0001 11.5812 10.945C12.7615 10.7196 13.701 9.8295 13.9413 8.66967C13.9999 8.38681 13.9998 8.06005 13.9997 7.56314L13.9997 7.50001L13.9997 7.43688C13.9998 6.93998 13.9999 6.61321 13.9413 6.33035C13.701 5.17053 12.7615 4.28039 11.5812 4.055C11.2925 3.99988 10.9581 3.99993 10.4354 4.00001L10.3747 4.00001H9.49971C9.22357 4.00001 8.99971 4.22387 8.99971 4.50001C8.99971 4.77615 9.22357 5.00001 9.49971 5.00001H10.3747ZM5.00038 7C4.72424 7 4.50038 7.22386 4.50038 7.5C4.50038 7.77614 4.72424 8 5.00038 8H10.0004C10.2765 8 10.5004 7.77614 10.5004 7.5C10.5004 7.22386 10.2765 7 10.0004 7H5.00038Z"
-//       fill="currentColor"
-//       fill-rule="evenodd"
-//       clip-rule="evenodd"
-//     />
-//   </svg>
-// )
-const refreshIcon = (_jsx("svg", { "aria-hidden": "true", width: "13", height: "13", viewBox: "0 0 15 15", fill: "none", children: _jsx("path", { d: "M1.84998 7.49998C1.84998 4.66458 4.05979 1.84998 7.49998 1.84998C10.2783 1.84998 11.6515 3.9064 12.2367 5H10.5C10.2239 5 10 5.22386 10 5.5C10 5.77614 10.2239 6 10.5 6H13.5C13.7761 6 14 5.77614 14 5.5V2.5C14 2.22386 13.7761 2 13.5 2C13.2239 2 13 2.22386 13 2.5V4.31318C12.2955 3.07126 10.6659 0.849976 7.49998 0.849976C3.43716 0.849976 0.849976 4.18537 0.849976 7.49998C0.849976 10.8146 3.43716 14.15 7.49998 14.15C9.44382 14.15 11.0622 13.3808 12.2145 12.2084C12.8315 11.5806 13.3133 10.839 13.6418 10.0407C13.7469 9.78536 13.6251 9.49315 13.3698 9.38806C13.1144 9.28296 12.8222 9.40478 12.7171 9.66014C12.4363 10.3425 12.0251 10.9745 11.5013 11.5074C10.5295 12.4963 9.16504 13.15 7.49998 13.15C4.05979 13.15 1.84998 10.3354 1.84998 7.49998Z", fill: "currentColor", "fill-rule": "evenodd", "clip-rule": "evenodd" }) }));
-function Navigator() {
-    return (_jsx("div", { class: "flex flex-col gap-0.5", "x-data": "{ url: new URL(baseUrl) }", children: _jsx("template", { "x-for": "route in routes", children: _jsx("a", { class: "font-mono text-xs whitespace-nowrap", "x-data": "{ active: url.pathname === route }", "x-text": "`${route === '/' ? '/' : route}${active ? ' \u25B2' : ''}`", ':href': `route === '/' ? '/dev' : route + '/dev'` }) }) }));
+function Timeline() {
+    return (_jsx("div", { class: "w-full flex", style: {
+            flexDirection: 'column-reverse',
+            justifyContent: 'flex-end',
+        }, children: _jsx("template", { "x-for": "log in logs", children: _jsxs("div", { class: "flex flex-col", children: [_jsxs("div", { class: "flex flex-row", style: { justifyContent: 'space-between' }, children: [_jsxs("div", { children: [_jsx("span", { "x-text": "log.method" }), _jsx("span", { "x-text": "`${formatSpeed(log.speed)}ms`" })] }), _jsx("span", { "x-text": "new Date(log.time).toLocaleTimeString()" })] }), _jsxs("div", { children: [_jsx("span", { "x-text": "`${formatUrl(log.url)}`" }), _jsx("template", { "v-if": "log.body", children: _jsxs("div", { children: [_jsx("span", { "x-text": "log.body.buttonIndex" }), _jsx("span", { "x-text": "log.body.inputText" })] }) })] })] }) }) }));
 }
-async function Inspector() {
-    return (_jsxs("div", { class: "border divide-y rounded-lg flex flex-col max-w-full", children: [_jsx("div", { class: "divide-x max-w-full", children: _jsx("div", { "x-data": "{\n            title: 'Current Context',\n            get content() { return inspectorData.contextHtml },\n          }", children: _jsx(Panel, {}) }) }), _jsxs("div", { class: "divide-x grid grid-cols-2 max-w-full", children: [_jsx("div", { "x-data": "{\n            title: 'Frame Data',\n            get content() { return inspectorData.frameHtml },\n          }", children: _jsx(Panel, {}) }), _jsx("div", { "x-data": "{\n            title: 'Debug',\n            get content() { return inspectorData.debugHtml },\n          }", children: _jsx(Panel, {}) })] }), _jsx("div", { class: "max-w-full", children: _jsx("div", { "x-data": "{\n            title: 'Meta Tags',\n            get content() { return inspectorData.metaTagsHtml },\n          }", children: _jsx(Panel, {}) }) })] }));
+function Inspector() {
+    return _jsx("div", { "x-html": "inspectorData.contextHtml" });
 }
-function Panel() {
-    return (_jsxs(_Fragment, { children: [_jsx("div", { class: "text-fg2 text-sm font-bold p-2 pb-0", "x-text": "title" }), _jsx("div", { class: "h-full p-2 scrollbars", style: { maxHeight: '47vh' }, "x-html": "content" })] }));
-}
 export function Styles() {
@@ -248,2 +246,3 @@ const styles = `
       scrollbar-width: thin;
+      scrollbar-gutter: stable;
       text-rendering: optimizeLegibility;
@@ -374,2 +373,3 @@
     .cursor-pointer { cursor: pointer; }
+    .display-block { display: block; }
     .divide-x > * + * {
@@ -388,2 +388,3 @@ border-right-width: 0;
     .flex-row { flex-direction: row; }
+    .flex-wrap { flex-wrap: wrap; }
     .gap-0\\.5 { gap: 0.125rem; }
@@ -394,2 +395,3 @@ .gap-1 { gap: 0.25rem; }
     .gap-2\\.5 { gap: 0.625rem; }
+    .gap-4 { gap: 1rem; }
     .grid { display: grid; }
@@ -406,3 +408,2 @@ .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
     .max-w-full { max-width: 100%; }
-    .max-w-7xl { max-width: 80rem; }
     .mt-1 { margin-top: 0.25rem; }
@@ -416,5 +417,7 @@ .object-cover { object-fit: cover; }
     .px-1\\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
+    .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
     .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
     .px-4 { padding-left: 1rem; padding-right: 1rem; }
     .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
+    .py-1\\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
     .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
@@ -454,2 +457,3 @@ .py-2\\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
       scrollbar-color: var(--br) transparent;
+      scrollbar-gutter: stable;
       scrollbar-width: thin;
@@ -466,2 +470,13 @@ }
     [x-cloak] { display: none !important; }
+
+    .container {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr)); 
+    }
+
+    @media screen and (max-width: 768px) {
+      .container {
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+      }
+    }
   `;
@@ -474,2 +489,11 @@ // biome-ignore lint/security/noDangerouslySetInnerHtml:
 }
+const externalLinkIcon = (_jsx("svg", { "aria-hidden": "true", class: "text-fg2", fill: "none", height: "13", viewBox: "0 0 15 15", width: "13", children: _jsx("path", { d: "M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z", fill: "currentColor", "fill-rule": "evenodd", "clip-rule": "evenodd" }) }));
+const mintIcon = (_jsx("svg", { "aria-hidden": "true", fill: "none", height: "13", viewBox: "0 0 28 28", width: "13", children: _jsx("path", { fill: "currentColor", "fill-rule": "evenodd", d: "M14.804.333a1.137 1.137 0 0 0-1.608 0L.333 13.196a1.137 1.137 0 0 0 0 1.608l12.863 12.863a1.137 1.137 0 0 0 1.608 0l12.863-12.863a1.137 1.137 0 0 0 0-1.608L14.804.333ZM14 5.159c0-.89-1.077-1.337-1.707-.707l-8.134 8.134a2 2 0 0 0 0 2.828l8.134 8.134c.63.63 1.707.184 1.707-.707V5.159Z", "clip-rule": "nonzero" }) }));
+const redirectIcon = (_jsx("svg", { "aria-hidden": "true", class: "text-fg2", fill: "none", height: "13", viewBox: "0 0 15 15", width: "13", children: _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 13C12.5523 13 13 12.5523 13 12V3C13 2.44771 12.5523 2 12 2H3C2.44771 2 2 2.44771 2 3V6.5C2 6.77614 2.22386 7 2.5 7C2.77614 7 3 6.77614 3 6.5V3H12V12H8.5C8.22386 12 8 12.2239 8 12.5C8 12.7761 8.22386 13 8.5 13H12ZM9 6.5C9 6.5001 9 6.50021 9 6.50031V6.50035V9.5C9 9.77614 8.77614 10 8.5 10C8.22386 10 8 9.77614 8 9.5V7.70711L2.85355 12.8536C2.65829 13.0488 2.34171 13.0488 2.14645 12.8536C1.95118 12.6583 1.95118 12.3417 2.14645 12.1464L7.29289 7H5.5C5.22386 7 5 6.77614 5 6.5C5 6.22386 5.22386 6 5.5 6H8.5C8.56779 6 8.63244 6.01349 8.69139 6.03794C8.74949 6.06198 8.80398 6.09744 8.85143 6.14433C8.94251 6.23434 8.9992 6.35909 8.99999 6.49708L8.99999 6.49738", fill: "currentColor" }) }));
+const arrowLeftIcon = (_jsx("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355L3.70711 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H3.70711L6.85355 11.1464C7.04882 11.3417 7.04882 11.6583 6.85355 11.8536C6.65829 12.0488 6.34171 12.0488 6.14645 11.8536L2.14645 7.85355C1.95118 7.65829 1.95118 7.34171 2.14645 7.14645L6.14645 3.14645C6.34171 2.95118 6.65829 2.95118 6.85355 3.14645Z", fill: "currentColor", "fill-rule": "evenodd", "clip-rule": "evenodd" }) }));
+const arrowRightIcon = (_jsx("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("path", { d: "M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z", fill: "currentColor", "fill-rule": "evenodd", "clip-rule": "evenodd" }) }));
+const stopwatchIcon = (_jsx("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("path", { d: "M5.49998 0.5C5.49998 0.223858 5.72383 0 5.99998 0H7.49998H8.99998C9.27612 0 9.49998 0.223858 9.49998 0.5C9.49998 0.776142 9.27612 1 8.99998 1H7.99998V2.11922C9.09832 2.20409 10.119 2.56622 10.992 3.13572C11.0116 3.10851 11.0336 3.08252 11.058 3.05806L11.858 2.25806C12.1021 2.01398 12.4978 2.01398 12.7419 2.25806C12.986 2.50214 12.986 2.89786 12.7419 3.14194L11.967 3.91682C13.1595 5.07925 13.9 6.70314 13.9 8.49998C13.9 12.0346 11.0346 14.9 7.49998 14.9C3.96535 14.9 1.09998 12.0346 1.09998 8.49998C1.09998 5.13362 3.69904 2.3743 6.99998 2.11922V1H5.99998C5.72383 1 5.49998 0.776142 5.49998 0.5ZM2.09998 8.49998C2.09998 5.51764 4.51764 3.09998 7.49998 3.09998C10.4823 3.09998 12.9 5.51764 12.9 8.49998C12.9 11.4823 10.4823 13.9 7.49998 13.9C4.51764 13.9 2.09998 11.4823 2.09998 8.49998ZM7.99998 4.5C7.99998 4.22386 7.77612 4 7.49998 4C7.22383 4 6.99998 4.22386 6.99998 4.5V9.5C6.99998 9.77614 7.22383 10 7.49998 10C7.77612 10 7.99998 9.77614 7.99998 9.5V4.5Z", fill: "currentColor", "fill-rule": "evenodd", "clip-rule": "evenodd" }) }));
+const globeIcon = (_jsxs("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: [_jsx("path", { d: "M7.49996 1.80002C4.35194 1.80002 1.79996 4.352 1.79996 7.50002C1.79996 10.648 4.35194 13.2 7.49996 13.2C10.648 13.2 13.2 10.648 13.2 7.50002C13.2 4.352 10.648 1.80002 7.49996 1.80002ZM0.899963 7.50002C0.899963 3.85494 3.85488 0.900024 7.49996 0.900024C11.145 0.900024 14.1 3.85494 14.1 7.50002C14.1 11.1451 11.145 14.1 7.49996 14.1C3.85488 14.1 0.899963 11.1451 0.899963 7.50002Z", fill: "currentColor", "fill-rule": "evenodd", "clip-rule": "evenodd" }), _jsx("path", { d: "M13.4999 7.89998H1.49994V7.09998H13.4999V7.89998Z", fill: "currentColor", "fill-rule": "evenodd", "clip-rule": "evenodd" }), _jsx("path", { d: "M7.09991 13.5V1.5H7.89991V13.5H7.09991zM10.375 7.49998C10.375 5.32724 9.59364 3.17778 8.06183 1.75656L8.53793 1.24341C10.2396 2.82218 11.075 5.17273 11.075 7.49998 11.075 9.82724 10.2396 12.1778 8.53793 13.7566L8.06183 13.2434C9.59364 11.8222 10.375 9.67273 10.375 7.49998zM3.99969 7.5C3.99969 5.17611 4.80786 2.82678 6.45768 1.24719L6.94177 1.75281C5.4582 3.17323 4.69969 5.32389 4.69969 7.5 4.6997 9.67611 5.45822 11.8268 6.94179 13.2472L6.45769 13.7528C4.80788 12.1732 3.9997 9.8239 3.99969 7.5z", fill: "currentColor", "fill-rule": "evenodd", "clip-rule": "evenodd" }), _jsx("path", { d: "M7.49996 3.95801C9.66928 3.95801 11.8753 4.35915 13.3706 5.19448 13.5394 5.28875 13.5998 5.50197 13.5055 5.67073 13.4113 5.83948 13.198 5.89987 13.0293 5.8056 11.6794 5.05155 9.60799 4.65801 7.49996 4.65801 5.39192 4.65801 3.32052 5.05155 1.97064 5.8056 1.80188 5.89987 1.58866 5.83948 1.49439 5.67073 1.40013 5.50197 1.46051 5.28875 1.62927 5.19448 3.12466 4.35915 5.33063 3.95801 7.49996 3.95801zM7.49996 10.85C9.66928 10.85 11.8753 10.4488 13.3706 9.6135 13.5394 9.51924 13.5998 9.30601 13.5055 9.13726 13.4113 8.9685 13.198 8.90812 13.0293 9.00238 11.6794 9.75643 9.60799 10.15 7.49996 10.15 5.39192 10.15 3.32052 9.75643 1.97064 9.00239 1.80188 8.90812 1.58866 8.9685 1.49439 9.13726 1.40013 9.30601 1.46051 9.51924 1.62927 9.6135 3.12466 10.4488 5.33063 10.85 7.49996 10.85z", fill: "currentColor", "fill-rule": "evenodd", "clip-rule": "evenodd" })] }));
+const refreshIcon = (_jsx("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("path", { d: "M1.84998 7.49998C1.84998 4.66458 4.05979 1.84998 7.49998 1.84998C10.2783 1.84998 11.6515 3.9064 12.2367 5H10.5C10.2239 5 10 5.22386 10 5.5C10 5.77614 10.2239 6 10.5 6H13.5C13.7761 6 14 5.77614 14 5.5V2.5C14 2.22386 13.7761 2 13.5 2C13.2239 2 13 2.22386 13 2.5V4.31318C12.2955 3.07126 10.6659 0.849976 7.49998 0.849976C3.43716 0.849976 0.849976 4.18537 0.849976 7.49998C0.849976 10.8146 3.43716 14.15 7.49998 14.15C9.44382 14.15 11.0622 13.3808 12.2145 12.2084C12.8315 11.5806 13.3133 10.839 13.6418 10.0407C13.7469 9.78536 13.6251 9.49315 13.3698 9.38806C13.1144 9.28296 12.8222 9.40478 12.7171 9.66014C12.4363 10.3425 12.0251 10.9745 11.5013 11.5074C10.5295 12.4963 9.16504 13.15 7.49998 13.15C4.05979 13.15 1.84998 10.3354 1.84998 7.49998Z", fill: "currentColor", "fill-rule": "evenodd", "clip-rule": "evenodd" }) }));
+const farcasterIcon = (_jsx("svg", { "aria-hidden": "true", width: "30", height: "30", viewBox: "0 0 1024 1024", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M308.786 227H715.928V308.429L817.714 308.429L797.357 389.857H777V715.571C788.247 715.571 797.357 724.681 797.357 735.928V756.286C808.604 756.286 817.714 765.396 817.714 776.643V797H614.143V776.643C614.143 765.396 623.253 756.286 634.5 756.286L634.5 735.928C634.5 724.681 643.61 715.571 654.857 715.571L654.857 550.97C654.795 472.322 591.019 408.586 512.357 408.586C433.672 408.586 369.883 472.359 369.857 551.038L369.857 715.571C381.104 715.571 390.214 724.681 390.214 735.928V756.286C401.462 756.286 410.571 765.396 410.571 776.643V797H207V776.643C207 765.396 216.11 756.286 227.357 756.286L227.357 735.928C227.357 724.681 236.467 715.571 247.714 715.571L247.714 389.857H227.357L207 308.429L308.786 308.429V227Z", fill: "currentColor" }) }));
 //# sourceMappingURL=components.js.map

_lib/dev/routes.js

@@ -1,2 +0,2 @@
-import { jsxs as _jsxs, jsx as _jsx } from "farc/jsx/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "farc/jsx/jsx-runtime";
 import {} from 'hono';
@@ -15,7 +15,10 @@ import { inspectRoutes } from 'hono/dev';
         const path = new URL(c.req.url).pathname.replace('/dev', '');
-        return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsxs("title", { children: ["\uD835\uDC6D\uD835\uDC82\uD835\uDC93\uD835\uDC84 ", path || '/'] }), _jsx(Styles, {}), _jsx(Scripts, {})] }), _jsx("body", { children: children })] }));
+        return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx("title", { children: path || '/' }), _jsx(Styles, {}), _jsx(Scripts, {})] }), _jsx("body", { children: children })] }));
     })(c, next))
         .get(async (c) => {
         const baseUrl = c.req.url.replace('/dev', '');
+        const t0 = performance.now();
         const response = await fetch(baseUrl);
+        const t1 = performance.now();
+        const speed = t1 - t0;
         const text = await response.text();
@@ -26,11 +29,24 @@ const frame = htmlToFrame(text);
         const routes = getRoutes(baseUrl, inspectRoutes(app.hono));
-        const props = { baseUrl, frame, inspectorData, routes, state };
+        const props = { baseUrl, frame, inspectorData, routes, speed, state };
         return c.render(_jsx(Preview, { ...props }));
     });
     app.hono
-        .post(`${parsePath(path)}/dev/action`, validator('json', validatePostBody), async (c) => {
-        const baseUrl = c.req.url.replace('/dev/action', '');
+        .get(`${parsePath(path)}/dev/frame`, async (c) => {
+        const baseUrl = c.req.url.replace('/dev/frame', '');
+        const t0 = performance.now();
+        const response = await fetch(baseUrl);
+        const t1 = performance.now();
+        const speed = t1 - t0;
+        const text = await response.text();
+        const frame = htmlToFrame(text);
+        const state = htmlToState(text);
+        const inspectorData = await getInspectorData(frame, state);
+        const routes = getRoutes(baseUrl, inspectRoutes(app.hono));
+        return c.json({ baseUrl, frame, inspectorData, routes, speed, state });
+    })
+        .post(`${parsePath(path)}/dev/frame/action`, validator('json', validatePostBody), async (c) => {
+        const baseUrl = c.req.url.replace('/dev/frame/action', '');
         const json = c.req.valid('json');
         const { buttonIndex, castId, fid, inputText, postUrl } = json;
-        let response = await fetchFrame({
+        const { response, speed } = await fetchFrame({
             baseUrl,
@@ -43,6 +59,5 @@ buttonIndex,
         });
-        // fetch initial state on error
-        const error = response.status !== 200 ? response.statusText : undefined;
+        // TODO: Display error message in interface
         if (response.status !== 200)
-            response = await fetch(baseUrl);
+            return c.json({ success: false, message: response.statusText });
         const text = await response.text();
@@ -53,9 +68,9 @@ const frame = htmlToFrame(text);
         const routes = getRoutes(baseUrl, inspectRoutes(app.hono));
-        return c.json({ baseUrl, error, frame, inspectorData, state, routes });
+        return c.json({ baseUrl, frame, inspectorData, routes, speed, state });
     })
-        .post(`${parsePath(path)}/dev/redirect`, validator('json', validatePostBody), async (c) => {
-        const baseUrl = c.req.url.replace('/dev/redirect', '');
+        .post(`${parsePath(path)}/dev/frame/redirect`, validator('json', validatePostBody), async (c) => {
+        const baseUrl = c.req.url.replace('/dev/frame/redirect', '');
         const json = c.req.valid('json');
         const { buttonIndex, castId, fid, inputText, postUrl } = json;
-        const response = await fetchFrame({
+        const { response, speed } = await fetchFrame({
             baseUrl,
@@ -70,5 +85,5 @@ buttonIndex,
             return c.json({ success: false });
-        return c.json({ success: true, redirectUrl: response.url });
+        return c.json({ success: true, redirectUrl: response.url, speed });
     });
 }
 //# sourceMappingURL=routes.js.map

_lib/dev/utils.d.ts

@@ -62,3 +62,2 @@ import { inspectRoutes } from 'hono/dev';
     metaTagsHtml: string;
-    debugHtml: string;
 }>;
@@ -85,3 +84,6 @@ export declare function validatePostBody(value: Record<string, string | File>, c: Context): Response | {
     postUrl: string;
-}): Promise<Response>;
+}): Promise<{
+    response: Response;
+    speed: number;
+}>;
 //# sourceMappingURL=utils.d.ts.map

_lib/dev/utils.js

@@ -214,3 +214,3 @@ import { Message } from '@farcaster/core';
     };
-    const [contextHtml, frameHtml, metaTagsHtml, debugHtml] = await Promise.all([
+    const [contextHtml, frameHtml, metaTagsHtml] = await Promise.all([
         codeToHtml(JSON.stringify(state.context, null, 2), {
@@ -237,3 +237,2 @@ lang: 'json',
         metaTagsHtml,
-        debugHtml,
     };
@@ -310,3 +309,4 @@ }
     const message = frameActionMessage._unsafeUnwrap();
-    return fetch(postUrl, {
+    const t0 = performance.now();
+    const response = await fetch(postUrl, {
         method: 'POST',
@@ -334,3 +334,6 @@ body: JSON.stringify({
     });
+    const t1 = performance.now();
+    const speed = t1 - t0;
+    return { response, speed };
 }
 //# sourceMappingURL=utils.js.map

dev/utils.ts

@@ -288,3 +288,3 @@ import { Message } from '@farcaster/core'
   }
-  const [contextHtml, frameHtml, metaTagsHtml, debugHtml] = await Promise.all([
+  const [contextHtml, frameHtml, metaTagsHtml] = await Promise.all([
     codeToHtml(JSON.stringify(state.context, null, 2), {
@@ -312,3 +312,2 @@ lang: 'json',
     metaTagsHtml,
-    debugHtml,
   }
@@ -421,3 +420,4 @@ }
 
-  return fetch(postUrl, {
+  const t0 = performance.now()
+  const response = await fetch(postUrl, {
     method: 'POST',
@@ -447,2 +447,5 @@ body: JSON.stringify({
   })
+  const t1 = performance.now()
+  const speed = t1 - t0
+  return { response, speed }
 }

package.json

 {
   "name": "farc",
-  "version": "0.0.1-main.20240215T022025",
+  "version": "0.0.1-main.20240215T203749",
   "type": "module",
@@ -5,0 +5,0 @@ "module": "_lib/index.js",

Fixed alerts

AI-detected possible typosquat

Supply chain risk

AI has identified this package as a potential typosquat of a more popular package. This suggests that the package may be intentionally mimicking another package's name, description, or other metadata.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

395433

3.19%

Lines of code

4011

4.53%

Number of medium supply chain risk alerts

3

-25%

No dependency changes