{children}
+) +const smallHeading = ({ children }: { children?: ReactNode }) => ( ++ {children} +
+) + const components: Components = { p: ({ children }) =>{children}
, a: ({ href, children }) => ( @@ -21,26 +39,31 @@ const components: Components = { ), ul: ({ children }) =>- {children}
- {children}
-
+ {children}
+
{children}
, - h2: ({ children }) =>{children}
, - h3: ({ children }) =>{children}
, - h4: ({ children }) => ( -- {children} -
- ), + h1: bigHeading, + h2: bigHeading, + h3: bigHeading, + h4: smallHeading, + h5: smallHeading, + h6: smallHeading, blockquote: ({ children }) => ({children}), hr: () =>
, code: ({ className, children }) => { - // A fenced block carries a language- class and is wrapped by
(styled
- // below); inline code is a bare and gets the pill treatment here.
- if (/language-/.test(className ?? '')) return {children}
+ // A fenced block is wrapped by (styled below) and carries either a
+ // language- class or a trailing newline; inline code is a single-line bare
+ // and gets the pill treatment. (The newline check catches fences with
+ // no info-string, which have no language- class.)
+ const isBlock = CODE_BLOCK.test(className ?? '') || String(children).includes('\n')
+ if (isBlock) return {children}
return (
{children}
)
@@ -55,19 +78,32 @@ const components: Components = {
{children}
),
- th: ({ children }) => (
- {children}
+ // Pass `style` through: GFM column alignment (`:---:` / `---:`) arrives as
+ // style.textAlign, and dropping it would silently discard it.
+ th: ({ children, style }) => (
+
+ {children}
+
+ ),
+ td: ({ children, style }) => (
+
+ {children}
+
),
- td: ({ children }) => {children} ,
}
-/** Render one assistant message body as Markdown (GFM). */
-export function MarkdownMessage({ children }: { children: string }) {
+/** Render one assistant message body as Markdown (GFM). Memoized so typing in the
+ * composer doesn't re-parse every message in the thread. */
+export const MarkdownMessage = memo(function MarkdownMessage({ children }: { children: string }) {
return (
-
+
{children}
)
-}
+})
diff --git a/web/src/lib/lazyPage.ts b/web/src/lib/lazyPage.ts
new file mode 100644
index 0000000..102536d
--- /dev/null
+++ b/web/src/lib/lazyPage.ts
@@ -0,0 +1,41 @@
+import { lazy, type ComponentType } from 'react'
+
+/**
+ * Lazily load a component by its named export, with recovery for the stale-chunk
+ * problem. A push to main redeploys, so a still-open app references chunk hashes
+ * the server has just replaced; that import 404s and React.lazy MEMOIZES the
+ * rejection, so a "Try again" can never recover — the user is stuck until a manual
+ * hard reload. On the first such failure we reload once (fetching the fresh index
+ * + hashes); a session flag stops a reload loop, and a success clears it so a
+ * later genuine failure can reload again.
+ *
+ * Shared by the route splits (router.tsx) and any feature-level lazy load (the
+ * assistant's Markdown renderer), so they all get the same recovery.
+ */
+export function lazyPage(load: () => Promise, name: K) {
+ // Preserve the component's own prop type so callers keep type-checked props
+ // (e.g. MarkdownMessage's `children: string`), rather than erasing to `{}`.
+ type C = M[K] extends ComponentType ? ComponentType : never
+ return lazy(async () => {
+ try {
+ const mod = await load()
+ try {
+ sessionStorage.removeItem('pansy:chunk-reload')
+ } catch {
+ /* storage unavailable — fine */
+ }
+ return { default: mod[name] as C }
+ } catch (err) {
+ try {
+ if (!sessionStorage.getItem('pansy:chunk-reload')) {
+ sessionStorage.setItem('pansy:chunk-reload', '1')
+ window.location.reload()
+ return await new Promise<{ default: C }>(() => {}) // hold for the reload
+ }
+ } catch {
+ /* storage unavailable — fall through to surface the error */
+ }
+ throw err // already reloaded once (or can't); let the error boundary show it
+ }
+ })
+}
diff --git a/web/src/router.tsx b/web/src/router.tsx
index eb240c5..912ea6b 100644
--- a/web/src/router.tsx
+++ b/web/src/router.tsx
@@ -1,4 +1,3 @@
-import { lazy, type ComponentType } from 'react'
import {
createRootRouteWithContext,
createRoute,
@@ -15,38 +14,7 @@ import { meQueryOptions } from '@/lib/auth'
import { queryClient } from '@/lib/queryClient'
import { safeRedirectPath } from '@/lib/redirect'
import { getLastGardenId } from '@/lib/lastGarden'
-
-// Lazily load a page by its named export, with recovery for the stale-chunk
-// problem. A push to main redeploys, so a still-open app references chunk hashes
-// the server has just replaced; that import 404s and React.lazy MEMOIZES the
-// rejection, so RouteError's "Try again" (router.invalidate) can never recover —
-// the user is stuck until a manual hard reload. On the first such failure we
-// reload once (fetching the fresh index + hashes); a session flag stops a reload
-// loop, and a success clears it so a later genuine failure can reload again.
-function lazyPage(load: () => Promise, name: K) {
- return lazy(async () => {
- try {
- const mod = await load()
- try {
- sessionStorage.removeItem('pansy:chunk-reload')
- } catch {
- /* storage unavailable — fine */
- }
- return { default: mod[name] as ComponentType }
- } catch (err) {
- try {
- if (!sessionStorage.getItem('pansy:chunk-reload')) {
- sessionStorage.setItem('pansy:chunk-reload', '1')
- window.location.reload()
- return await new Promise<{ default: ComponentType }>(() => {}) // hold for the reload
- }
- } catch {
- /* storage unavailable — fall through to surface the error */
- }
- throw err // already reloaded once (or can't); let the error boundary show it
- }
- })
-}
+import { lazyPage } from '@/lib/lazyPage'
// Code-split the heavier / deeper routes so a phone on cell data doesn't download
// the whole app (notably the canvas editor with its gesture + geometry deps)