Bohdan Triapitsyn
edfc9779cf
Switching sessions ran as one synchronous commit: sidebar highlight, URL, a full timeline remount with markdown re-parse, and around nine requests, so nothing changed on screen for 150-250ms after the click. - ChatContainer swaps the timeline on a deferred copy of the selection, so the active row, URL, and tab commit first and the timeline renders behind them; selection policy keeps reading the live store value. - The message fetch starts before the selection is published. - Sidebar rows stop re-rendering on a project switch: directory-scoped sync hooks read the runtime context and a subscribable current-directory source instead of the directory-bearing context; the grouping builder reads git branches through a ref and section caches key the branches they use; descendant ids are keyed by content. Rows per switch went from 73 to 8. - Markdown skips the async re-render when the settled cached blocks are already painted, and mounts synchronously once its lazy module is loaded; the module is preloaded at boot. - A timeline reveal gate holds a freshly opened session at opacity 0 while any provisional markdown paint catches up (250ms cap), then fades the whole timeline in once, so text, tools, and recap appear together. - Switch fan-out trimmed: knowledge summary deduped, MCP status refreshed only when stale, non-repo directories cached by the git repo check, OpenChamber defaults cached briefly, agent memory reused for the same project, goal text cached, PWA manifest rebuilt after the switch settles. - Header tabs snap into the active state and keep the title at the same height in both states. - Prefetch on row press; composer focus moved off the commit. `bun run profile:switch` records ack/content latency, longest task, and requests per switch, cold and warm, and compares runs against a baseline. Measured warm switch: ack 228ms to about 40-60ms, content 228ms to about 100-120ms.
73 lines
2.9 KiB
TypeScript
73 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import { lazyWithChunkRecovery } from '@/lib/chunkLoadRecovery';
|
|
import { isMobileSurfaceRuntime } from '@/lib/runtimeSurface';
|
|
import { cn } from '@/lib/utils';
|
|
import { getLoadedMarkdownRendererModule, loadMarkdownRendererModule } from './markdownRendererLoader';
|
|
|
|
// Thin lazy wrapper around the MarkdownRenderer implementation.
|
|
// The full implementation (marked + Shiki highlighting + KaTeX + morphdom
|
|
// DOM morphing, plus beautiful-mermaid) is loaded on demand, keeping the
|
|
// initial bundle lean.
|
|
|
|
const MarkdownRendererLazy = lazyWithChunkRecovery(() =>
|
|
loadMarkdownRendererModule().then((m) => ({ default: m.MarkdownRenderer }))
|
|
);
|
|
|
|
const SimpleMarkdownRendererLazy = lazyWithChunkRecovery(() =>
|
|
loadMarkdownRendererModule().then((m) => ({ default: m.SimpleMarkdownRenderer }))
|
|
);
|
|
|
|
const MarkdownImageGalleryLazy = lazyWithChunkRecovery(() =>
|
|
import('./MarkdownImageGallery').then((m) => ({ default: m.MarkdownImageGallery }))
|
|
);
|
|
|
|
const fallback = <div className="break-words w-full min-w-0" />;
|
|
|
|
const fallbackContentClassName = (variant: unknown): string => {
|
|
if (variant === 'tool') return 'markdown-content markdown-tool';
|
|
if (variant === 'reasoning') return 'markdown-content markdown-reasoning';
|
|
return 'markdown-content leading-relaxed';
|
|
};
|
|
|
|
const MobileMarkdownFallback = (props: { content?: unknown; className?: unknown; variant?: unknown }) => {
|
|
if (!isMobileSurfaceRuntime() || typeof props.content !== 'string' || props.content.length === 0) {
|
|
return fallback;
|
|
}
|
|
|
|
return (
|
|
<div className={cn('break-words w-full min-w-0 whitespace-pre-wrap', fallbackContentClassName(props.variant), typeof props.className === 'string' ? props.className : undefined)}>
|
|
{props.content}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const MarkdownRenderer: React.FC<React.ComponentPropsWithoutRef<typeof MarkdownRendererLazy>> = (props) => {
|
|
const loaded = getLoadedMarkdownRendererModule();
|
|
if (loaded) return <loaded.MarkdownRenderer {...props} />;
|
|
return (
|
|
<React.Suspense fallback={<MobileMarkdownFallback {...props} />}>
|
|
<MarkdownRendererLazy {...props} />
|
|
</React.Suspense>
|
|
);
|
|
};
|
|
|
|
type SimpleMarkdownRendererProps = React.ComponentPropsWithoutRef<typeof SimpleMarkdownRendererLazy> & {
|
|
fallbackContent?: React.ReactNode;
|
|
};
|
|
|
|
export const SimpleMarkdownRenderer: React.FC<SimpleMarkdownRendererProps> = ({ fallbackContent, ...props }) => {
|
|
const loaded = getLoadedMarkdownRendererModule();
|
|
if (loaded) return <loaded.SimpleMarkdownRenderer {...props} />;
|
|
return (
|
|
<React.Suspense fallback={fallbackContent ?? <MobileMarkdownFallback {...props} />}>
|
|
<SimpleMarkdownRendererLazy {...props} />
|
|
</React.Suspense>
|
|
);
|
|
};
|
|
|
|
export const MarkdownImageGallery: React.FC<React.ComponentPropsWithoutRef<typeof MarkdownImageGalleryLazy>> = (props) => (
|
|
<React.Suspense fallback={null}>
|
|
<MarkdownImageGalleryLazy {...props} />
|
|
</React.Suspense>
|
|
);
|