@skyhook-io/radar-app 1.17.0 → 1.17.1

package/src/components/timeline/TimelineView.tsx

@@ -1,7 +1,7 @@
 import { useState, useMemo, useRef, useCallback, useEffect } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import type { ReactNode } from 'react'
-import { Network, AlertTriangle, RefreshCw, Boxes, X } from 'lucide-react'
+import { Network, AlertTriangle, Boxes, X } from 'lucide-react'
 import {
   clampLensToSelection,
   deriveLiveSelection,
@@ -21,6 +21,9 @@ import {
   useDebouncedValue,
 } from '@skyhook-io/k8s-ui'
 import { TimelineList } from './TimelineList'
+import { TimelineLoadError, TimelineStaleNote } from './TimelineLoadError'
+import { ViewModeToggle } from './ViewModeToggle'
+import { useStickyError } from './useStickyError'
 import type { ActivityFilterKey } from './TimelineList'
 import { TimelineSwimlanes } from './TimelineSwimlanes'
 import { RetainedTimelineScrubber, extendSelection, type ScrubberDomainInfo } from './RetainedTimelineScrubber'
@@ -275,6 +278,7 @@ interface TimelineViewProps {
   requiresNamespaceFilter?: boolean
   availableNamespaces?: { name: string }[]
   onNamespaceSelect?: (ns: string) => void
+  onOpenDiagnostics?: () => void
 }
 
 export function resolveApplicationTimelineScope(searchParams: URLSearchParams, namespaces: string[]) {
@@ -293,7 +297,7 @@ export function resolveApplicationTimelineScope(searchParams: URLSearchParams, n
   }
 }
 
-export function TimelineView({ namespaces, onResourceClick, initialViewMode, initialFilter, initialTimeRange, requiresNamespaceFilter, availableNamespaces, onNamespaceSelect }: TimelineViewProps) {
+export function TimelineView({ namespaces, onResourceClick, initialViewMode, initialFilter, initialTimeRange, requiresNamespaceFilter, availableNamespaces, onNamespaceSelect, onOpenDiagnostics }: TimelineViewProps) {
   // URL is the source of truth for every control below (deep-linkable +
   // back/forward-restorable). Read on mount, written on user change.
   const [searchParams, setSearchParams] = useSearchParams()
@@ -683,7 +687,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
   // Fetch all activity - zoom controls what's visible in the UI. This ring feeds
   // the swimlanes and the local strip's histogram, so it also runs in list mode
   // when that strip is shown; the list itself fetches its own 2000.
-  const { data: activity, isLoading, isError, error, refetch, truncated: ringTruncated } = timelineSource.useEvents({
+  const { data: activity, isLoading, isFetching, isError, error, refetch, truncated: ringTruncated } = timelineSource.useEvents({
     namespaces: timelineNamespaces,
     timeRange: 'all',
     includeK8sEvents: true,
@@ -701,6 +705,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     fromMs: isRetained ? selection.fromMs : undefined,
     toMs: isRetained ? selection.toMs : undefined,
   })
+  const loadError = useStickyError(error, activity != null)
 
   // Topology powers both swimlane hierarchy and application-scoped attribution.
   const { data: rawTopology } = useTopology(timelineNamespaces, 'resources', {
@@ -869,13 +874,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
         {/* Failing background polls with a loaded ring: keep the data, say
             it's going stale. The full-screen error is reserved for no-data. */}
         {isError && activity && (
-          <div className="flex items-center gap-1.5 border-b border-theme-border px-4 py-1.5 text-xs text-theme-text-tertiary">
-            <AlertTriangle className={`h-3.5 w-3.5 shrink-0 ${SEVERITY_TEXT.warning}`} />
-            Live updates are failing — the timeline may be stale.
-            <button type="button" onClick={() => refetch()} className="underline hover:text-theme-text-primary">
-              Retry now
-            </button>
-          </div>
+          <TimelineStaleNote error={error} subject="timeline" onRetry={() => refetch()} />
         )}
         {isRetained ? (
           <RetainedTimelineScrubber
@@ -967,29 +966,23 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     // a load failure. With a loaded ring on screen, a failing background poll
     // must NOT blank it (gate on data before error); the stale-data banner
     // below carries the warning instead.
-    if (isError && !activity) {
+    if (loadError && !activity) {
       // Surface the server's own message — a generic "failed to load" would
       // swallow whatever the hub said. "Try again" is a full resync: the
       // retained source drops its delta cursor and reloads the whole ring.
-      const detail = error?.message?.trim()
       return wrap(
         <div className="flex-1 flex flex-col">
           <div className="flex items-center justify-between px-4 py-2 border-b border-theme-border">
             <div />
             <ViewModeToggle viewMode={viewMode} onViewModeChange={setViewMode} />
           </div>
-          <div className="flex-1 flex flex-col items-center justify-center text-theme-text-tertiary gap-3 px-6">
-            <AlertTriangle className="w-10 h-10 text-amber-400/70" />
-            <p className="text-base">Failed to load timeline data</p>
-            {detail && <p className="max-w-md text-center text-sm text-theme-text-tertiary">{detail}</p>}
-            <button
-              onClick={() => refetch()}
-              className="flex items-center gap-2 px-3 py-1.5 text-sm bg-theme-elevated border border-theme-border-light rounded-lg hover:bg-theme-hover transition-colors"
-            >
-              <RefreshCw className="w-3.5 h-3.5" />
-              Try again
-            </button>
-          </div>
+          <TimelineLoadError
+            className="flex-1"
+            error={loadError}
+            retrying={isFetching}
+            onRetry={() => refetch()}
+            onOpenDiagnostics={onOpenDiagnostics}
+          />
         </div>
       )
     }
@@ -1064,27 +1057,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
       appScoped={Boolean(focusedAppKey)}
       topology={stableTopology}
       appScopeLoading={focusedAppLoading}
+      onOpenDiagnostics={onOpenDiagnostics}
     />
   )
 }
-
-function ViewModeToggle({ viewMode, onViewModeChange }: { viewMode: TimelineViewMode, onViewModeChange: (mode: TimelineViewMode) => void }) {
-  return (
-    <div className="flex items-center gap-1 bg-theme-base rounded-lg p-0.5 border border-theme-border">
-      <button
-        type="button"
-        onClick={() => onViewModeChange('list')}
-        className={`px-2 py-1 text-xs rounded-md transition-colors ${viewMode === 'list' ? 'bg-theme-surface text-theme-text-primary shadow-sm' : 'text-theme-text-secondary hover:text-theme-text-primary'}`}
-      >
-        List
-      </button>
-      <button
-        type="button"
-        onClick={() => onViewModeChange('swimlane')}
-        className={`px-2 py-1 text-xs rounded-md transition-colors ${viewMode === 'swimlane' ? 'bg-theme-surface text-theme-text-primary shadow-sm' : 'text-theme-text-secondary hover:text-theme-text-primary'}`}
-      >
-        Swimlane
-      </button>
-    </div>
-  )
-}

package/src/components/timeline/ViewModeToggle.tsx

@@ -0,0 +1,20 @@
+export function ViewModeToggle({ viewMode, onViewModeChange }: { viewMode: 'list' | 'swimlane', onViewModeChange: (mode: 'list' | 'swimlane') => void }) {
+  return (
+    <div className="flex items-center gap-1 bg-theme-base rounded-lg p-0.5 border border-theme-border">
+      <button
+        type="button"
+        onClick={() => onViewModeChange('list')}
+        className={`px-2 py-1 text-xs rounded-md transition-colors ${viewMode === 'list' ? 'bg-theme-surface text-theme-text-primary shadow-sm' : 'text-theme-text-secondary hover:text-theme-text-primary'}`}
+      >
+        List
+      </button>
+      <button
+        type="button"
+        onClick={() => onViewModeChange('swimlane')}
+        className={`px-2 py-1 text-xs rounded-md transition-colors ${viewMode === 'swimlane' ? 'bg-theme-surface text-theme-text-primary shadow-sm' : 'text-theme-text-secondary hover:text-theme-text-primary'}`}
+      >
+        Swimlane
+      </button>
+    </div>
+  )
+}

package/src/components/timeline/useStickyError.test.tsx

@@ -0,0 +1,47 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { useStickyError } from './useStickyError'
+
+const seen: (Error | null)[] = []
+function Harness({ error, hasData }: { error: Error | null; hasData: boolean }) {
+  seen.push(useStickyError(error, hasData))
+  return null
+}
+
+let root: Root
+let container: HTMLDivElement
+beforeEach(() => {
+  seen.length = 0
+  container = document.createElement('div')
+  root = createRoot(container)
+})
+afterEach(() => act(() => root.unmount()))
+const render = (error: Error | null, hasData: boolean) => act(() => root.render(<Harness error={error} hasData={hasData} />))
+const last = () => seen[seen.length - 1]
+
+describe('useStickyError', () => {
+  it('keeps the error while a refetch with no data clears it', () => {
+    const down = new Error('database down')
+    render(down, false)
+    expect(last()).toBe(down)
+    render(null, false)
+    expect(last()).toBe(down)
+  })
+
+  it('drops the error once data arrives', () => {
+    render(new Error('database down'), false)
+    render(null, true)
+    expect(last()).toBeNull()
+  })
+
+  // A page with data on screen whose poll starts failing: the hook must settle,
+  // not bounce between the error and null until React gives up.
+  it('settles when an error arrives while data is on screen', () => {
+    render(null, true)
+    render(new Error('database down'), true)
+    expect(last()).toBeNull()
+    expect(seen.length).toBeLessThan(10)
+  })
+})

package/src/components/timeline/useStickyError.ts

@@ -0,0 +1,15 @@
+import { useState } from 'react'
+
+// React Query clears the error of a query that has never loaded each time it
+// refetches, so a failure that persists across polls would flicker to a loader
+// on every interval. This keeps the last error on screen until data arrives.
+// Once data is loaded it returns null: a failing poll then belongs to the
+// stale-data banner, not the full-screen error.
+export function useStickyError(error: Error | null | undefined, hasData: boolean): Error | null {
+  const [shown, setShown] = useState<Error | null>(null)
+  const next = hasData ? null : (error ?? shown)
+  // Adjusting state during render: converges in one extra pass because `next`
+  // is a fixed point once stored.
+  if (next !== shown) setShown(next)
+  return next
+}

package/src/components/ui/DiagnosticsOverlay.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback } from 'react'
+import { useEffect, useState, useCallback, useRef } from 'react'
 import { X, Copy, Check, ExternalLink } from 'lucide-react'
 import { clsx } from 'clsx'
 import { TRANSITION_BACKDROP, TRANSITION_PANEL, overlayTransitionStyle } from '../../utils/animation'
@@ -7,15 +7,29 @@ import { useDiagnostics } from '../../api/client'
 import type { DiagnosticsSnapshot, DiagEnvVar, DiagMetricsSourceHealth, DiagDropRecord, DiagErrorEntry, DiagCacheSyncStatus, DiagInformerSyncStatus, DiagSyncPhase, DiagSampleWindow } from '../../api/client'
 import { getK8sUIPerfSnapshot, type K8sUIPerfSnapshot } from '@skyhook-io/k8s-ui'
 
+export type DiagnosticsFocus = 'timeline'
+
 interface DiagnosticsOverlayProps {
   onClose: () => void
   isOpen?: boolean
+  /** Section to scroll to on open, for callers linking to one specific problem. */
+  focus?: DiagnosticsFocus
 }
 
-export function DiagnosticsOverlay({ onClose, isOpen = true }: DiagnosticsOverlayProps) {
+export function DiagnosticsOverlay({ onClose, isOpen = true, focus }: DiagnosticsOverlayProps) {
   const { data, isLoading, error } = useDiagnostics(true)
   const [copied, setCopied] = useState<'json' | 'formatted' | null>(null)
   const [reportOpened, setReportOpened] = useState(false)
+  const timelineRef = useRef<HTMLDivElement>(null)
+  const hasData = data != null
+
+  // Once, when the snapshot first renders: the overlay polls, and re-scrolling
+  // on every refresh would yank the reader back while they read other sections.
+  useEffect(() => {
+    if (isOpen && hasData && focus === 'timeline') {
+      timelineRef.current?.scrollIntoView({ block: 'start' })
+    }
+  }, [isOpen, hasData, focus])
 
   // Close on Escape (capture phase) — only while logically open: the overlay
   // stays mounted through its exit.
@@ -119,6 +133,7 @@ export function DiagnosticsOverlay({ onClose, isOpen = true }: DiagnosticsOverla
               <CacheSection data={data} />
               <MetricsSection data={data} />
               <EventPipelineSection data={data} />
+              <div ref={timelineRef} className="scroll-mt-4"><TimelineSection data={data} /></div>
               <InformersSection data={data} />
               <PrometheusSection data={data} />
               <TrafficSection data={data} />
@@ -330,6 +345,20 @@ function EventPipelineSection({ data }: { data: DiagnosticsSnapshot }) {
   )
 }
 
+function TimelineSection({ data }: { data: DiagnosticsSnapshot }) {
+  if (!data.timeline) return null
+  const t = data.timeline
+  return (
+    <Section title="Timeline" warn={t.degraded}>
+      <Row label="Storage" value={t.storageType} warn={t.degraded} />
+      {t.degraded && t.degradedReason && <Row label="Unavailable" value={t.degradedReason} warn />}
+      {/* An unreachable database has no count to report; 0 would read as empty. */}
+      {(!t.degraded || t.storageType === 'memory') && <Row label="Events" value={t.totalEvents.toLocaleString()} />}
+      <Row label="Dropped" value={t.totalDrops.toLocaleString()} warn={t.totalDrops > 0} />
+    </Section>
+  )
+}
+
 function InformersSection({ data }: { data: DiagnosticsSnapshot }) {
   if (!data.informers) return null
   const inf = data.informers
@@ -702,6 +731,9 @@ export function formatForGitHub(data: DiagnosticsSnapshot, frontendPerf?: K8sUIP
     const t = data.timeline
     lines.push(`### Timeline`)
     lines.push(`- Storage: \`${t.storageType}\` | Events: ${t.totalEvents.toLocaleString()} | Errors: ${t.storeErrors} | Drops: ${t.totalDrops}`)
+    if (t.degraded && t.degradedReason) {
+      lines.push(`- Unavailable: ${t.degradedReason}`)
+    }
     lines.push(``)
   }
 

package/src/components/ui/Markdown.test.tsx

@@ -0,0 +1,65 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { Markdown } from './Markdown'
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+
+const TEXT = 'First paragraph.\n\nRun `kubectl get pods` then open [the docs](https://example.com).\n\n```\nkubectl describe pod x\n```'
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+})
+
+// Callers pass fresh inline callbacks on every render, as the investigation
+// views do, so the rendered elements must survive a re-render with new ones.
+function render(label: string) {
+  act(() => {
+    root.render(
+      <Markdown
+        codeActions={(code) => <button type="button">{`${label}:${code}`}</button>}
+        linkRenderer={(href, children) => (href?.includes('example') ? <a data-custom={label}>{children}</a> : null)}
+      >
+        {TEXT}
+      </Markdown>,
+    )
+  })
+}
+
+describe('Markdown', () => {
+  it('keeps its rendered elements across parent re-renders', () => {
+    render('a')
+    const paragraph = container.querySelector('p')
+    const pre = container.querySelector('pre')
+    expect(paragraph).not.toBeNull()
+    expect(pre).not.toBeNull()
+
+    render('b')
+
+    expect(container.querySelector('p')).toBe(paragraph)
+    expect(container.querySelector('pre')).toBe(pre)
+    expect(paragraph?.isConnected).toBe(true)
+  })
+
+  it('applies the latest link and code hooks', () => {
+    render('a')
+    render('b')
+
+    expect(container.querySelector('a')?.getAttribute('data-custom')).toBe('b')
+    const labels = Array.from(container.querySelectorAll('button')).map((b) => b.textContent?.trim())
+    expect(labels).toContain('b:kubectl get pods')
+    expect(labels).toContain('b:kubectl describe pod x')
+    expect(labels.some((l) => l?.startsWith('a:'))).toBe(false)
+  })
+})

package/src/components/ui/Markdown.tsx

@@ -1,12 +1,11 @@
-import ReactMarkdown from 'react-markdown'
+import { createContext, useContext, useMemo } from 'react'
+import ReactMarkdown, { type Components } from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { clsx } from 'clsx'
 
 import type { ReactNode } from 'react'
 
-interface MarkdownProps {
-  children: string
-  className?: string
+interface MarkdownHooks {
   /**
    * Intercepts links before the default anchor renders. Return null to fall
    * through. Lets a caller turn a reserved href (an in-page evidence
@@ -16,132 +15,150 @@ interface MarkdownProps {
   codeActions?: (code: string) => ReactNode
 }
 
+interface MarkdownProps extends MarkdownHooks {
+  children: string
+  className?: string
+}
+
+const MarkdownHooksContext = createContext<MarkdownHooks>({})
+
+const REMARK_PLUGINS = [remarkGfm]
+
+// Module-level so every render hands react-markdown the same component types.
+// A fresh map per render makes React unmount and remount the whole rendered
+// tree whenever the parent re-renders; WebKit then moves the scroll position
+// of any pane the text sits in. Per-call hooks arrive through context instead.
+const COMPONENTS: Components = {
+  h1: ({ children }) => (
+    <h1 className="text-lg font-bold text-theme-text-primary mt-4 mb-2 first:mt-0">{children}</h1>
+  ),
+  h2: ({ children }) => (
+    <h2 className="text-base font-semibold text-theme-text-primary mt-4 mb-2 first:mt-0">{children}</h2>
+  ),
+  h3: ({ children }) => (
+    <h3 className="text-sm font-semibold text-theme-text-primary mt-3 mb-1.5">{children}</h3>
+  ),
+  h4: ({ children }) => (
+    <h4 className="text-sm font-medium text-theme-text-primary mt-2 mb-1">{children}</h4>
+  ),
+  p: ({ children }) => (
+    <p className="text-theme-text-secondary my-2 leading-relaxed">{children}</p>
+  ),
+  a: function MarkdownLink({ href, children }) {
+    const { linkRenderer } = useContext(MarkdownHooksContext)
+    const custom = linkRenderer?.(href, children)
+    if (custom !== null && custom !== undefined) return <>{custom}</>
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-blue-400 hover:text-blue-300 underline underline-offset-2"
+      >
+        {children}
+      </a>
+    )
+  },
+  ul: ({ children }) => (
+    <ul className="list-disc list-outside pl-4 my-2 space-y-1 text-theme-text-secondary">{children}</ul>
+  ),
+  ol: ({ children }) => (
+    <ol className="list-decimal list-outside pl-4 my-2 space-y-1 text-theme-text-secondary">{children}</ol>
+  ),
+  li: ({ children }) => (
+    <li className="leading-relaxed">{children}</li>
+  ),
+  code: function MarkdownCode({ className, children }) {
+    const { codeActions } = useContext(MarkdownHooksContext)
+    const isInline = !className
+    if (isInline) {
+      const actions = codeActions?.(String(children))
+      if (actions) {
+        return (
+          <span className="inline-flex max-w-full items-start gap-1 align-middle">
+            <code className="inline-code min-w-0">{children}</code>
+            {actions}
+          </span>
+        )
+      }
+      return (
+        <code className="inline-code">
+          {children}
+        </code>
+      )
+    }
+    return (
+      <code className="block font-mono text-theme-text-secondary">{children}</code>
+    )
+  },
+  pre: function MarkdownPre({ children, node }) {
+    const { codeActions } = useContext(MarkdownHooksContext)
+    const code = node?.children[0]
+    const text = code?.type === 'element'
+      ? code.children.filter(child => child.type === 'text').map(child => child.value).join('')
+      : ''
+    const actions = codeActions?.(text)
+    if (actions) {
+      // Render the code directly so an unlabelled fence does not also
+      // receive the inline-code action. Only the code scrolls, not Copy.
+      return (
+        <pre className="my-3 flex items-start gap-2 rounded-lg bg-theme-elevated p-3 text-xs font-mono text-theme-text-secondary">
+          <code className="min-w-0 flex-1 overflow-x-auto">{text}</code>
+          {actions}
+        </pre>
+      )
+    }
+    return (
+      <pre className="my-3 p-3 bg-theme-elevated rounded-lg overflow-x-auto text-xs font-mono text-theme-text-secondary">
+        {children}
+      </pre>
+    )
+  },
+  blockquote: ({ children }) => (
+    <blockquote className="border-l-2 border-theme-border pl-3 my-2 text-theme-text-tertiary italic">
+      {children}
+    </blockquote>
+  ),
+  table: ({ children }) => (
+    <div className="my-3 overflow-x-auto">
+      <table className="min-w-full border-collapse text-sm">{children}</table>
+    </div>
+  ),
+  thead: ({ children }) => (
+    <thead className="bg-theme-elevated">{children}</thead>
+  ),
+  tbody: ({ children }) => (
+    <tbody className="divide-y divide-theme-border">{children}</tbody>
+  ),
+  tr: ({ children }) => (
+    <tr className="border-b border-theme-border">{children}</tr>
+  ),
+  th: ({ children }) => (
+    <th className="px-3 py-2 text-left text-theme-text-primary font-medium border border-theme-border">
+      {children}
+    </th>
+  ),
+  td: ({ children }) => (
+    <td className="px-3 py-2 text-theme-text-secondary border border-theme-border">{children}</td>
+  ),
+  hr: () => <hr className="my-4 border-theme-border" />,
+  strong: ({ children }) => (
+    <strong className="font-semibold text-theme-text-primary">{children}</strong>
+  ),
+  em: ({ children }) => (
+    <em className="italic">{children}</em>
+  ),
+}
+
 export function Markdown({ children, className, linkRenderer, codeActions }: MarkdownProps) {
+  const hooks = useMemo(() => ({ linkRenderer, codeActions }), [linkRenderer, codeActions])
   return (
     <div className={clsx('markdown-content', className)}>
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
-        components={{
-        h1: ({ children }) => (
-          <h1 className="text-lg font-bold text-theme-text-primary mt-4 mb-2 first:mt-0">{children}</h1>
-        ),
-        h2: ({ children }) => (
-          <h2 className="text-base font-semibold text-theme-text-primary mt-4 mb-2 first:mt-0">{children}</h2>
-        ),
-        h3: ({ children }) => (
-          <h3 className="text-sm font-semibold text-theme-text-primary mt-3 mb-1.5">{children}</h3>
-        ),
-        h4: ({ children }) => (
-          <h4 className="text-sm font-medium text-theme-text-primary mt-2 mb-1">{children}</h4>
-        ),
-        p: ({ children }) => (
-          <p className="text-theme-text-secondary my-2 leading-relaxed">{children}</p>
-        ),
-        a: ({ href, children }) => {
-          const custom = linkRenderer?.(href, children)
-          if (custom !== null && custom !== undefined) return <>{custom}</>
-          return (
-            <a
-              href={href}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-blue-400 hover:text-blue-300 underline underline-offset-2"
-            >
-              {children}
-            </a>
-          )
-        },
-        ul: ({ children }) => (
-          <ul className="list-disc list-outside pl-4 my-2 space-y-1 text-theme-text-secondary">{children}</ul>
-        ),
-        ol: ({ children }) => (
-          <ol className="list-decimal list-outside pl-4 my-2 space-y-1 text-theme-text-secondary">{children}</ol>
-        ),
-        li: ({ children }) => (
-          <li className="leading-relaxed">{children}</li>
-        ),
-        code: ({ className, children }) => {
-          const isInline = !className
-          if (isInline) {
-            const actions = codeActions?.(String(children))
-            if (actions) {
-              return (
-                <span className="inline-flex max-w-full items-start gap-1 align-middle">
-                  <code className="inline-code min-w-0">{children}</code>
-                  {actions}
-                </span>
-              )
-            }
-            return (
-              <code className="inline-code">
-                {children}
-              </code>
-            )
-          }
-          return (
-            <code className="block font-mono text-theme-text-secondary">{children}</code>
-          )
-        },
-        pre: ({ children, node }) => {
-          const code = node?.children[0]
-          const text = code?.type === 'element'
-            ? code.children.filter(child => child.type === 'text').map(child => child.value).join('')
-            : ''
-          const actions = codeActions?.(text)
-          if (actions) {
-            // Render the code directly so an unlabelled fence does not also
-            // receive the inline-code action. Only the code scrolls, not Copy.
-            return (
-              <pre className="my-3 flex items-start gap-2 rounded-lg bg-theme-elevated p-3 text-xs font-mono text-theme-text-secondary">
-                <code className="min-w-0 flex-1 overflow-x-auto">{text}</code>
-                {actions}
-              </pre>
-            )
-          }
-          return (
-            <pre className="my-3 p-3 bg-theme-elevated rounded-lg overflow-x-auto text-xs font-mono text-theme-text-secondary">
-              {children}
-            </pre>
-          )
-        },
-        blockquote: ({ children }) => (
-          <blockquote className="border-l-2 border-theme-border pl-3 my-2 text-theme-text-tertiary italic">
-            {children}
-          </blockquote>
-        ),
-        table: ({ children }) => (
-          <div className="my-3 overflow-x-auto">
-            <table className="min-w-full border-collapse text-sm">{children}</table>
-          </div>
-        ),
-        thead: ({ children }) => (
-          <thead className="bg-theme-elevated">{children}</thead>
-        ),
-        tbody: ({ children }) => (
-          <tbody className="divide-y divide-theme-border">{children}</tbody>
-        ),
-        tr: ({ children }) => (
-          <tr className="border-b border-theme-border">{children}</tr>
-        ),
-        th: ({ children }) => (
-          <th className="px-3 py-2 text-left text-theme-text-primary font-medium border border-theme-border">
-            {children}
-          </th>
-        ),
-        td: ({ children }) => (
-          <td className="px-3 py-2 text-theme-text-secondary border border-theme-border">{children}</td>
-        ),
-        hr: () => <hr className="my-4 border-theme-border" />,
-        strong: ({ children }) => (
-          <strong className="font-semibold text-theme-text-primary">{children}</strong>
-        ),
-        em: ({ children }) => (
-          <em className="italic">{children}</em>
-        ),
-      }}
-      >
-        {children}
-      </ReactMarkdown>
+      <MarkdownHooksContext.Provider value={hooks}>
+        <ReactMarkdown remarkPlugins={REMARK_PLUGINS} components={COMPONENTS}>
+          {children}
+        </ReactMarkdown>
+      </MarkdownHooksContext.Provider>
     </div>
   )
 }