@helloleo/plugins 0.2.1 → 0.2.2

package/dist/templates/tanstack-start-2026-06-18/src/components/error-component.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'react'
+import { useRouterState } from '@tanstack/react-router'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+// Rendered by the router's defaultErrorComponent for any uncaught render or
+// loader error. Per-route `errorComponent` options override it. Keep this
+// component free of app dependencies (toasts, auth, etc.) -- it must still
+// render when the rest of the app is broken.
+export function DefaultErrorComponent({ error }: { error: Error }) {
+  const pathname = useRouterState({ select: (s) => s.location.pathname })
+  const [copied, setCopied] = useState(false)
+
+  async function copyForLeo() {
+    // Blank lines + fenced stack so the report keeps its structure when
+    // pasted into a markdown-rendering chat.
+    const report = [
+      'My app threw an error, please fix it:',
+      `Page: ${pathname}`,
+      `Error: ${error.message}`,
+      ['Stack:', '```', error.stack ?? '(no stack trace)', '```'].join('\n'),
+    ].join('\n\n')
+
+    await navigator.clipboard.writeText(report)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-lg">
+        <CardHeader>
+          <CardTitle>Something went wrong</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <pre className="text-sm text-destructive whitespace-pre-wrap break-words rounded-md bg-muted p-3">
+            {error.message}
+          </pre>
+          <Button onClick={copyForLeo}>{copied ? 'Copied!' : 'Copy error'}</Button>
+          <p className="text-sm text-muted-foreground">
+            Paste the copied error to Leo and it will help you fix it.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/dist/templates/tanstack-start-2026-06-18/src/router.tsx

@@ -2,6 +2,7 @@ import { QueryClient } from '@tanstack/react-query'
 import { createRouter as createTanStackRouter } from '@tanstack/react-router'
 import { routerWithQueryClient } from '@tanstack/react-router-with-query'
 import { routeTree } from './routeTree.gen'
+import { DefaultErrorComponent } from '@/components/error-component'
 
 // TanStack Start calls getRouter() on both server and client. routerWithQueryClient
 // wires the QueryClient into the router context and handles SSR dehydration /
@@ -15,6 +16,9 @@ export function getRouter() {
       routeTree,
       context: { queryClient },
       scrollRestoration: true,
+      // Catches uncaught render/loader errors on any route. Routes can still
+      // set their own `errorComponent` to override this.
+      defaultErrorComponent: DefaultErrorComponent,
       defaultPreload: 'intent',
       // With React Query we never want loader data to be stale -- the loader runs
       // on every preload/visit and React Query owns caching from there.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helloleo/plugins",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "OpenCode plugins for HelloLeo",
   "license": "UNLICENSED",
   "type": "module",

package/src/templates/tanstack-start-2026-06-18/src/components/error-component.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'react'
+import { useRouterState } from '@tanstack/react-router'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+// Rendered by the router's defaultErrorComponent for any uncaught render or
+// loader error. Per-route `errorComponent` options override it. Keep this
+// component free of app dependencies (toasts, auth, etc.) -- it must still
+// render when the rest of the app is broken.
+export function DefaultErrorComponent({ error }: { error: Error }) {
+  const pathname = useRouterState({ select: (s) => s.location.pathname })
+  const [copied, setCopied] = useState(false)
+
+  async function copyForLeo() {
+    // Blank lines + fenced stack so the report keeps its structure when
+    // pasted into a markdown-rendering chat.
+    const report = [
+      'My app threw an error, please fix it:',
+      `Page: ${pathname}`,
+      `Error: ${error.message}`,
+      ['Stack:', '```', error.stack ?? '(no stack trace)', '```'].join('\n'),
+    ].join('\n\n')
+
+    await navigator.clipboard.writeText(report)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-lg">
+        <CardHeader>
+          <CardTitle>Something went wrong</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <pre className="text-sm text-destructive whitespace-pre-wrap break-words rounded-md bg-muted p-3">
+            {error.message}
+          </pre>
+          <Button onClick={copyForLeo}>{copied ? 'Copied!' : 'Copy error'}</Button>
+          <p className="text-sm text-muted-foreground">
+            Paste the copied error to Leo and it will help you fix it.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/src/templates/tanstack-start-2026-06-18/src/router.tsx

@@ -2,6 +2,7 @@ import { QueryClient } from '@tanstack/react-query'
 import { createRouter as createTanStackRouter } from '@tanstack/react-router'
 import { routerWithQueryClient } from '@tanstack/react-router-with-query'
 import { routeTree } from './routeTree.gen'
+import { DefaultErrorComponent } from '@/components/error-component'
 
 // TanStack Start calls getRouter() on both server and client. routerWithQueryClient
 // wires the QueryClient into the router context and handles SSR dehydration /
@@ -15,6 +16,9 @@ export function getRouter() {
       routeTree,
       context: { queryClient },
       scrollRestoration: true,
+      // Catches uncaught render/loader errors on any route. Routes can still
+      // set their own `errorComponent` to override this.
+      defaultErrorComponent: DefaultErrorComponent,
       defaultPreload: 'intent',
       // With React Query we never want loader data to be stale -- the loader runs
       // on every preload/visit and React Query owns caching from there.