@agent-native/core 0.163.4 → 0.164.3

package/corpus/templates/clips/app/components/player/scrubber.tsx

@@ -28,6 +28,7 @@ export function Scrubber(props: ScrubberProps) {
   const [tooltip, setTooltip] = useState<
     | { kind: "comment"; content: string; ms: number }
     | { kind: "chapter"; title: string; ms: number }
+    | { kind: "reaction"; content: string; ms: number }
     | null
   >(null);
 
@@ -109,6 +110,17 @@ export function Scrubber(props: ScrubberProps) {
     return map;
   }, [comments]);
 
+  const reactionsByMs = useMemo(() => {
+    const map = new Map<number, { id: string; emoji: string }[]>();
+    recentReactions.forEach((reaction) => {
+      const key = Math.round(reaction.videoTimestampMs / 500) * 500;
+      const list = map.get(key) ?? [];
+      list.push({ id: reaction.id, emoji: reaction.emoji });
+      map.set(key, list);
+    });
+    return map;
+  }, [recentReactions]);
+
   return (
     <div
       className="relative h-10 flex items-center touch-none cursor-pointer"
@@ -142,7 +154,9 @@ export function Scrubber(props: ScrubberProps) {
           className="absolute -top-10 -translate-x-1/2 max-w-[240px] rounded bg-primary px-2 py-1 text-[11px] text-primary-foreground"
           style={{ left: (tooltip.ms / Math.max(1, durationMs)) * 100 + "%" }}
         >
-          {tooltip.kind === "comment" ? tooltip.content : tooltip.title}
+          {tooltip.kind === "comment" || tooltip.kind === "reaction"
+            ? tooltip.content
+            : tooltip.title}
         </div>
       ) : null}
 
@@ -208,17 +222,36 @@ export function Scrubber(props: ScrubberProps) {
           </button>
         ))}
 
-        {/* Reaction dots */}
-        {recentReactions.map((r) => (
-          <div
-            key={r.id}
-            className="absolute -bottom-4 -translate-x-1/2 text-[11px] pointer-events-none"
-            style={{
-              left: (r.videoTimestampMs / Math.max(1, durationMs)) * 100 + "%",
+        {/* Reaction markers */}
+        {Array.from(reactionsByMs.entries()).map(([ms, list]) => (
+          <button
+            key={`reaction-${ms}`}
+            type="button"
+            data-player-reaction-marker
+            onPointerDown={(event) => event.stopPropagation()}
+            onMouseEnter={() =>
+              setTooltip({
+                kind: "reaction",
+                content: `${list.map((reaction) => reaction.emoji).join(" ")} · ${list.length} reaction${list.length === 1 ? "" : "s"}`,
+                ms,
+              })
+            }
+            onMouseLeave={() => setTooltip(null)}
+            onClick={(event) => {
+              event.stopPropagation();
+              onSeek(ms);
             }}
+            className="absolute -bottom-5 flex h-5 min-w-5 -translate-x-1/2 items-center justify-center rounded-full bg-background/95 px-1 text-sm shadow-md ring-1 ring-primary/40 transition-transform hover:scale-125"
+            style={{ left: (ms / Math.max(1, durationMs)) * 100 + "%" }}
+            aria-label={`${list.length} reaction${list.length === 1 ? "" : "s"} at ${msToClock(ms)}`}
           >
-            {r.emoji}
-          </div>
+            {list[0].emoji}
+            {list.length > 1 ? (
+              <span className="absolute -right-1.5 -top-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[8px] font-bold leading-none text-primary-foreground ring-1 ring-background">
+                {list.length}
+              </span>
+            ) : null}
+          </button>
         ))}
 
         {/* Thumb */}

package/corpus/templates/clips/app/components/player/video-player.tsx

@@ -57,6 +57,11 @@ import {
   type PlaybackComment,
 } from "./playback-comment-overlay";
 import { PlayerControls, SPEED_OPTIONS } from "./player-controls";
+import type {
+  ReactionHandler,
+  ReactionHandlerResult,
+  ReactionSummary,
+} from "./reactions-tray";
 
 function resolveLocalUrl(url: string | null | undefined): string | undefined {
   if (!url) return undefined;
@@ -251,7 +256,7 @@ export interface VideoPlayerProps {
    * visible only while `isFullscreen` is true.
    */
   enableReactions?: boolean;
-  onReact?: (emoji: string) => void;
+  onReact?: ReactionHandler;
   enableComments?: boolean;
   /**
    * Opens the existing comment composer/panel. While fullscreen, the caller
@@ -374,6 +379,10 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
     const [currentMs, setCurrentMs] = useState(startMs ?? 0);
     currentMsRef.current = currentMs;
     isPlayingRef.current = isPlaying;
+    const [optimisticReactions, setOptimisticReactions] = useState<
+      ReactionSummary[]
+    >([]);
+    const optimisticReactionIdRef = useRef(0);
     const [loomStartMs, setLoomStartMs] = useState<number | null>(null);
     const [volume, setVolume] = useState(1);
     // Autoplaying players (e.g. the Slack unfurl embed, `?autoplay=1`) must
@@ -492,20 +501,101 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
             ? []
             : [{ startMs: editedMs, title: chapter.title }];
         }),
-        reactions: (reactions ?? []).flatMap((reaction) => {
-          const editedMs = mapMarker(reaction.videoTimestampMs);
-          return editedMs === null
-            ? []
-            : [
-                {
-                  id: reaction.id,
-                  emoji: reaction.emoji,
-                  videoTimestampMs: editedMs,
-                },
-              ];
-        }),
+        reactions: [
+          ...(reactions ?? []).flatMap((reaction) => {
+            const editedMs = mapMarker(reaction.videoTimestampMs);
+            return editedMs === null
+              ? []
+              : [
+                  {
+                    id: reaction.id,
+                    emoji: reaction.emoji,
+                    videoTimestampMs: editedMs,
+                  },
+                ];
+          }),
+          ...optimisticReactions.flatMap((reaction) => {
+            const editedMs = mapMarker(reaction.videoTimestampMs);
+            return editedMs === null
+              ? []
+              : [
+                  {
+                    id: reaction.id,
+                    emoji: reaction.emoji,
+                    videoTimestampMs: editedMs,
+                  },
+                ];
+          }),
+        ],
       };
-    }, [chapters, comments, currentMs, edits, reactions, resolvedDurationMs]);
+    }, [
+      chapters,
+      comments,
+      currentMs,
+      edits,
+      optimisticReactions,
+      reactions,
+      resolvedDurationMs,
+    ]);
+
+    useEffect(() => {
+      if (!optimisticReactions.length || !reactions?.length) return;
+      setOptimisticReactions((current) => {
+        const next = current.filter(
+          (optimistic) =>
+            !reactions.some(
+              (persisted) =>
+                persisted.emoji === optimistic.emoji &&
+                Math.abs(
+                  persisted.videoTimestampMs - optimistic.videoTimestampMs,
+                ) < 1000,
+            ),
+        );
+        return next.length === current.length ? current : next;
+      });
+    }, [optimisticReactions.length, reactions]);
+
+    const handleReact = useCallback<ReactionHandler>(
+      (emoji) => {
+        const optimistic = {
+          id: `optimistic-reaction-${++optimisticReactionIdRef.current}`,
+          emoji,
+          videoTimestampMs: currentMsRef.current,
+        };
+        setOptimisticReactions((current) => [...current, optimistic]);
+
+        const removeOptimistic = () => {
+          setOptimisticReactions((current) =>
+            current.filter((reaction) => reaction.id !== optimistic.id),
+          );
+        };
+
+        let result: ReactionHandlerResult | undefined;
+        try {
+          result = onReact?.(emoji);
+        } catch {
+          removeOptimistic();
+          return false;
+        }
+
+        if (result && typeof result === "object" && "then" in result) {
+          return Promise.resolve(result).then(
+            (saved) => {
+              if (saved === false) removeOptimistic();
+              return saved !== false;
+            },
+            () => {
+              removeOptimistic();
+              return false;
+            },
+          );
+        }
+
+        if (result === false) removeOptimistic();
+        return result !== false;
+      },
+      [onReact],
+    );
     const activeVideoSourceIdentity = useMemo(
       () => videoSourceIdentity(activeVideoSrc),
       [activeVideoSrc],
@@ -2016,7 +2106,7 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
               menuPortalContainer={fullscreenMenuContainer}
               showReactionsAndComment={isFullscreen}
               enableReactions={enableReactions}
-              onReact={onReact}
+              onReact={handleReact}
               enableComments={enableComments}
               onAddComment={onAddComment}
             />

package/corpus/templates/clips/app/routes/_app.settings._index.tsx

@@ -106,8 +106,7 @@ export default function SettingsIndexRoute() {
   const builderStatus = useBuilderStatus();
   const connectRequestedRef = useRef(false);
   const builderConnect = useBuilderConnectFlow({
-    popupUrl:
-      builderStatus.status?.cliAuthUrl ?? builderStatus.status?.connectUrl,
+    popupUrl: builderStatus.status?.connectUrl,
     trackingSource: "clips_settings",
     trackingFlow: "clips_setup",
     onConnected: async () => {

package/corpus/templates/clips/app/routes/_app.wispr.tsx

@@ -1,7 +1,8 @@
+import { withSsrHtmlContentType } from "@agent-native/core/shared";
 import { redirect } from "react-router";
 
 export function loader() {
-  return redirect("/dictate");
+  return withSsrHtmlContentType(redirect("/dictate"));
 }
 
 export default function LegacyWisprRedirect() {

package/corpus/templates/clips/app/routes/_index.tsx

@@ -1,10 +1,10 @@
 import { DefaultSpinner } from "@agent-native/core/client/ui";
+import { withSsrHtmlContentType } from "@agent-native/core/shared";
 import { redirect, type LoaderFunctionArgs } from "react-router";
 
 const SEO_TITLE = "Clips - Open Source screen recorder";
 const SEO_DESCRIPTION =
   "Open Source screen recorder and meeting-notes app with AI transcripts, summaries, search, dictation, and agent-readable share links.";
-
 export function meta() {
   return [
     { title: SEO_TITLE },
@@ -38,11 +38,15 @@ function buildTarget(url: URL): string {
 }
 
 export function loader({ url }: LoaderFunctionArgs) {
-  throw redirect(buildTarget(url));
+  throw withSsrHtmlContentType(redirect(buildTarget(url)), {
+    varyByQuery: true,
+  });
 }
 
 export function clientLoader({ url }: LoaderFunctionArgs) {
-  throw redirect(buildTarget(url));
+  throw withSsrHtmlContentType(redirect(buildTarget(url)), {
+    varyByQuery: true,
+  });
 }
 
 export function HydrateFallback() {

package/corpus/templates/clips/app/routes/r.$recordingId.tsx

@@ -1628,7 +1628,7 @@ export default function RecordingPage() {
                   onReact={(emoji) => {
                     tracking.reportReaction(emoji);
                     const liveMs = resolvePlaybackMs();
-                    fetch(
+                    return fetch(
                       agentNativePath(
                         "/_agent-native/actions/react-to-recording",
                       ),
@@ -1647,9 +1647,11 @@ export default function RecordingPage() {
                           throw new Error(`react failed: ${res.status}`);
                         return playerDataQ.refetch();
                       })
-                      .catch((err) =>
-                        console.warn("[clips] react failed", err),
-                      );
+                      .then(() => true)
+                      .catch((err) => {
+                        console.warn("[clips] react failed", err);
+                        return false;
+                      });
                   }}
                   className="h-full w-full rounded-none sm:rounded-xl"
                 />
@@ -1736,11 +1738,12 @@ export default function RecordingPage() {
                     ) : null}
                     {recording.enableReactions ? (
                       <ReactionsTray
+                        reactions={reactions}
                         disabled={!recording.enableReactions || !canComment}
                         onReact={(emoji) => {
                           tracking.reportReaction(emoji);
                           const liveMs = resolvePlaybackMs();
-                          fetch(
+                          return fetch(
                             agentNativePath(
                               "/_agent-native/actions/react-to-recording",
                             ),
@@ -1759,9 +1762,11 @@ export default function RecordingPage() {
                                 throw new Error(`react failed: ${res.status}`);
                               return playerDataQ.refetch();
                             })
-                            .catch((err) =>
-                              console.warn("[clips] react failed", err),
-                            );
+                            .then(() => true)
+                            .catch((err) => {
+                              console.warn("[clips] react failed", err);
+                              return false;
+                            });
                         }}
                       />
                     ) : null}

package/corpus/templates/clips/app/routes/share.$shareId.tsx

@@ -1274,7 +1274,7 @@ export default function ShareRoute() {
               onReact={(emoji) => {
                 if (!session) {
                   requireSignIn("react");
-                  return;
+                  return false;
                 }
                 tracking.reportReaction(emoji);
                 const liveCt = isLoomEmbedBacked
@@ -1287,7 +1287,7 @@ export default function ShareRoute() {
                   liveCt < 1e7
                     ? Math.floor(liveCt * 1000)
                     : currentMs;
-                fetch(
+                return fetch(
                   agentNativePath("/_agent-native/actions/react-to-recording"),
                   {
                     method: "POST",
@@ -1303,7 +1303,11 @@ export default function ShareRoute() {
                     if (!res.ok) throw new Error(`react failed: ${res.status}`);
                     return dataQ.refetch();
                   })
-                  .catch((err) => console.warn("[clips] react failed", err));
+                  .then(() => true)
+                  .catch((err) => {
+                    console.warn("[clips] react failed", err);
+                    return false;
+                  });
               }}
               className="h-full w-full rounded-none sm:rounded-xl"
             />
@@ -1371,10 +1375,11 @@ export default function ShareRoute() {
                 ) : null}
                 {recording.enableReactions ? (
                   <ReactionsTray
+                    reactions={reactions}
                     onReact={(emoji) => {
                       if (!session) {
                         requireSignIn("react");
-                        return;
+                        return false;
                       }
                       tracking.reportReaction(emoji);
                       const liveCt = isLoomEmbedBacked
@@ -1387,7 +1392,7 @@ export default function ShareRoute() {
                         liveCt < 1e7
                           ? Math.floor(liveCt * 1000)
                           : currentMs;
-                      fetch(
+                      return fetch(
                         agentNativePath(
                           "/_agent-native/actions/react-to-recording",
                         ),
@@ -1406,9 +1411,11 @@ export default function ShareRoute() {
                             throw new Error(`react failed: ${res.status}`);
                           return dataQ.refetch();
                         })
-                        .catch((err) =>
-                          console.warn("[clips] react failed", err),
-                        );
+                        .then(() => true)
+                        .catch((err) => {
+                          console.warn("[clips] react failed", err);
+                          return false;
+                        });
                     }}
                   />
                 ) : null}

package/corpus/templates/clips/netlify.toml

@@ -16,6 +16,8 @@ AGENT_CHAT_DURABLE_BACKGROUND = "true"
 
 [context.production.environment]
 AGENT_NATIVE_HOSTED_HARNESS = "true"
+AGENT_NATIVE_ENABLE_KEEP_WARM = "1"
+AGENT_NATIVE_DISABLE_KEEP_WARM_BACKGROUND = "1"
 
 # Netlify Functions run on linux/x64 (AWS Lambda). This tells the deploy build
 # to bundle the matching ffmpeg-static binary into the server bundle so frame

package/corpus/templates/clips/server/routes/[...page].head.ts

@@ -16,6 +16,11 @@ export default defineEventHandler((event) => {
     return new Response(null, {
       status: 302,
       headers: {
+        // Keep this redirect on the same public SSR-cache path as the shell.
+        // Without a content type the deploy adapter cannot apply the canonical
+        // cache policy, so every visit to `/` reaches the origin before the
+        // already-cached `/library` shell can load.
+        "content-type": "text/html; charset=utf-8",
         location: "/library",
         "Permissions-Policy": MEDIA_CAPTURE_PERMISSIONS_POLICY,
       },

package/corpus/templates/content/netlify.toml

@@ -16,6 +16,8 @@ AGENT_CHAT_DURABLE_BACKGROUND = "true"
 
 [context.production.environment]
 AGENT_NATIVE_HOSTED_HARNESS = "true"
+AGENT_NATIVE_ENABLE_KEEP_WARM = "1"
+AGENT_NATIVE_DISABLE_KEEP_WARM_BACKGROUND = "1"
 
 # A2A delegation calls run a full agent loop (LLM + tool calls + DB queries).
 # The framework does not impose a default agent-run timeout; if a template sets

package/corpus/templates/design/.agents/skills/design-editor-architecture/SKILL.md

@@ -0,0 +1,103 @@
+---
+name: design-editor-architecture
+description: >-
+  Where design editor behavior lives and how to navigate DesignEditor.tsx. Use
+  before changing any editor behavior — undo/redo, paste, delete, duplicate,
+  style commit, layer move/rename, export, structure change — or before opening
+  `app/pages/DesignEditor.tsx`.
+scope: dev
+metadata:
+  internal: true
+---
+
+# Design Editor Architecture
+
+## The routing rule
+
+Editor **behavior** lives in `app/pages/design-editor/`, not in
+`app/pages/DesignEditor.tsx`.
+
+`DesignEditor.tsx` is ~20,900 lines and holds only three things: state
+declarations, the `useCallback` wrappers that gather arguments, and the JSX.
+Every wrapper delegates to a `run<Name>()` command module.
+
+**To change what an editor action does, edit the command module.** Opening
+`DesignEditor.tsx` to change behavior is almost always the wrong move — it will
+exhaust your context before you find the code.
+
+| Directory | Holds |
+| --- | --- |
+| `design-editor/commands/` | 86 one-per-action modules, each exporting `run<Name>(args, …)`. Start at `commands/README.md` |
+| `design-editor/effects/` | Subscription and autosave loops (collab text, motion autosave, agent selection mirroring) |
+| `design-editor/derive/` | Pure derivations (`overview-screens.ts`, `design-breakpoints.ts`) |
+| `design-editor/domains/` | Whole-domain hooks owning state + refs + effects + handlers together (`use-tweaks.ts`) |
+| `design-editor/*.ts` | Shared helpers: `history.ts`, `selection-state.ts`, `pending-edits.ts`, `editor-state.ts`, `editor-helpers.ts`, … |
+
+## Common task → file
+
+| Task | File |
+| --- | --- |
+| Undo / redo | `commands/undo.ts`, `commands/redo.ts` |
+| Paste | `commands/editor-paste.ts` routes; `commands/paste-selection.ts` and `commands/paste-over-selection.ts` do layers |
+| Copy | `commands/copy-selection.ts` |
+| Delete | `commands/delete-selection.ts` (layers), `commands/delete-files.ts` (screens) |
+| Duplicate | `commands/duplicate-selection.ts`, `commands/duplicate-screen.ts` |
+| Style commit | `commands/commit-visual-styles.ts` |
+| Inspector style edit | `commands/style-change.ts` (one property), `commands/styles-change.ts` (many) |
+| Structure change | `commands/visual-structure-change.ts`, `commands/screen-visual-structure-change.ts` |
+| Layer move / rename | `commands/layer-move.ts`, `commands/layer-move-to-screen.ts`, `commands/layer-rename.ts` |
+| Lock / hide a layer | `commands/toggle-layer-locked.ts`, `commands/toggle-layer-hidden.ts` |
+| Export | `commands/render-png-blob.ts`, `download-pdf.ts`, `download-svg.ts`, `copy-as-figma-svg.ts` |
+| Save / persistence | `commands/save-file-content.ts`, `commands/apply-file-content-update.ts` |
+| Breakpoints | `responsive-breakpoints` skill; `derive/design-breakpoints.ts` |
+
+A `screen-` prefix means the command is addressed by an explicit `screenId`
+(overview canvas or board). The unprefixed twin acts on the focused screen.
+
+Before adding a `domains/` hook, count what it would expose. Past roughly 16
+returned values the hook stops hiding anything and just relocates the wiring —
+measured surfaces for share/export (20), generation (18), and motion (48) are
+all why those still live inline. Also check no input it needs is declared after
+the point where its own outputs are first consumed; responsive-interact fails
+that test and cannot be extracted without changing when values are read.
+
+## Navigating DesignEditor.tsx when you must
+
+The file carries ~82 section banners. This prints a table of contents:
+
+```bash
+grep -n "──" app/pages/DesignEditor.tsx
+```
+
+Read one region with an offset and a limit instead of opening the file. Every
+section is under ~800 lines. Banners use `// ── Name ──` in the component body
+and `{/* ── Render: name ── */}` inside the JSX.
+
+When you add or move a region, add a banner for it.
+
+## Hard constraints
+
+**`DesignEditor.tsx` must keep exactly one runtime export — the default — and
+zero runtime named exports.** Type-only exports are fine. Both routes
+(`app/routes/design.$id.tsx`, `app/routes/visual-edit.$id.tsx`) import that
+default. A named export breaks React Fast Refresh for the whole editor.
+
+**The render-callback trio's dependency arrays are load-bearing.**
+`DesignEditor.routeRefreshBoundary.test.ts` parses the file with the TypeScript
+compiler and enforces:
+
+- `renderScreenContent` deps are exactly `[renderEditableScreenContent]`
+- `renderBreakpointContent` deps are exactly `[renderEditableScreenContent]`
+- `renderEditableScreenContent` deps include `activeBreakpointWidthState`,
+  `motionDefaultEase`, `motionDurationMs`, `inScreenGradientEditTarget`,
+  `handleInScreenGradientEditChange`, and `statePreviewTarget`
+
+That last one exists because cached overview canvases must invalidate on
+preview-only state changes. Dropping a name from it renders a stale canvas.
+
+**Many specs read source as text.** ~20 specs `readFileSync` either
+`DesignEditor.tsx` or a command module and slice it with `indexOf` markers, then
+assert on the source string. Moving code breaks them with a confusing failure.
+Re-point the path and the marker in the same commit that moves the code. Prefer
+asserting against the command module (`commandSource("undo.ts")`) over the
+editor file.

package/corpus/templates/design/.agents/skills/design-generation/SKILL.md

@@ -907,7 +907,8 @@ read `references/code-layers.md`. For the VS Code-style source workbench
   reserved for editor-internal state (selection chrome, editor-chrome scale
   compensation, clipboard/surface tokens) — the editor strips any property
   under those prefixes before persisting a cross-screen style capture
-  (`isEditorInternalCssVar` in `app/pages/DesignEditor.tsx`), so a design that
+  (`isEditorInternalCssVar` in `app/pages/design-editor/portable-style.ts`),
+  so a design that
   defines its own theming under that namespace would silently lose those
   values on a cross-screen move. Use `--color-*`, `--font-*`, or another
   design-owned prefix for tokens/tweaks instead.

package/corpus/templates/design/AGENTS.md

@@ -99,4 +99,6 @@ Read the relevant skill before deeper work in that area.
 ## Source Changes
 
 Before building common workspace or agent UI, read `agent-native-toolkit`; read
-`customizing-agent-native` before adapting shared UI.
+`customizing-agent-native` before adapting shared UI. Editor behavior lives in
+`app/pages/design-editor/commands/*.ts`, not `DesignEditor.tsx` — read
+`design-editor-architecture` before changing it.

package/corpus/templates/design/app/components/design/bridge/editor-chrome.bridge.ts

@@ -1768,14 +1768,15 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
   // Editor-internal CSS custom-property prefixes — selection chrome colors,
   // editor-chrome scale compensation, framework clipboard/surface tokens.
   // These have no meaning outside this editor session and must never leak
-  // into persisted user HTML/exports. DesignEditor.tsx's
+  // into persisted user HTML/exports. design-editor/portable-style.ts's
   // applyPortableStyleSnapshotToHtml (isEditorInternalCssVar /
   // EDITOR_INTERNAL_CSS_VAR_PREFIXES) already filters them back out on the
   // apply side; filtering here too at COLLECTION time is pure bloat
   // reduction (skips carrying them across the postMessage boundary at all)
   // and changes no observable behavior on the apply side.
   //
-  // keep in sync with DesignEditor.tsx's EDITOR_INTERNAL_CSS_VAR_PREFIXES
+  // keep in sync with design-editor/portable-style.ts's
+  // EDITOR_INTERNAL_CSS_VAR_PREFIXES
   var EDITOR_INTERNAL_CSS_VAR_PREFIXES = [
     "--design-editor-",
     "--agent-native-editor-chrome-",

package/corpus/templates/design/app/components/design/editor/AgentNativeMenuMark.tsx

@@ -0,0 +1,25 @@
+export function AgentNativeMenuMark({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="-5 -5 145 88"
+      fill="none"
+      aria-hidden="true"
+      className={className}
+    >
+      <path
+        d="M29.0771 77.8838H2.5L18.9 48.9L43.2 6.6C44 5.2 45.9 5.2 46.7 6.6L69.1 44.2C69.9 45.5 69 46.7305 67.5 46.7305H48.3C47.6 46.7305 46.9 47.1 46.6 47.7L30.8 76.9C30.45 77.5 29.8 77.8838 29.0771 77.8838Z"
+        stroke="currentColor"
+        strokeWidth="10.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M105.927 0H132.5C134 0 134.9 1.6 134.15 2.9L91.5 76.9C91.15 77.5 90.5 77.8853 89.8 77.8853H63.8C62.3 77.8853 61.4 76.3 62.15 75L104.2 1C104.55 0.38 105.2 0 105.927 0Z"
+        stroke="currentColor"
+        strokeWidth="10.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}