perf(web): reduce chat ui rendering work

- batch runtime tool output updates and drop stale queued deltas
- defer code highlighting, timeline scroll, and relative-time ticks
- surface provider usage refresh time and clean up theme chrome sync

Author: tyulyukov

README.md

@@ -1,76 +1,57 @@
 # MarCode
 
-MarCode is a web GUI for coding agents. On top of a solid foundation, MarCode brings performance optimizations, new integrations, and a refined experience:
+**One window for every AI coding agent. Wired into Jira, Git, and your team's workflow.**
 
-- **Claude Code CLI** as the default and primary provider
-- **Jira Cloud integration** (OAuth 2.0, sprint browsing, `@PROJ-123` mentions in composer)
-- **GitLab support** alongside GitHub (auto-detected from remote origin)
-- **Preview diff display** for proposed file changes
-- **Incremental state updates** for smooth, non-blocking UI during agent work
-- **Additional directories in composer** — add extra directories to agent context per thread
-- And much more
+MarCode is a desktop-grade GUI that puts Claude Code, Codex, OpenCode, and Cursor under a single, consistent surface — with first-class Jira context, GitHub & GitLab automation, remote control, and a tool-call display that actually makes agent runs readable.
 
-## Installation
-
-> [!WARNING]
-> MarCode currently supports Codex and Claude.
-> Install and authenticate at least one provider before use:
->
-> - Codex: install [Codex CLI](https://github.com/openai/codex) and run `codex login`
-> - Claude: install Claude Code and run `claude auth login`
-
-### Prerequisites
-
-You need at least one of the following coding agent CLIs installed and authorized:
-
-- [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code)
-- [Codex CLI](https://github.com/openai/codex)
-
-For git host integration:
+## The enterprise workflow
 
-- **PRs (GitHub):** [GitHub CLI (`gh`)](https://cli.github.com/) installed and authenticated
-- **MRs (GitLab):** [GitLab CLI (`glab`)](https://gitlab.com/gitlab-org/cli) installed and authenticated (Personal Access Token works for self-hosted instances)
+The whole point: your engineers stay in **one app** from ticket to merge request.
 
-### Desktop app
-
-Install the latest version of the desktop app from [GitHub Releases](https://github.com/tyulyukov/marcode/releases), or from your favorite package registry:
-
-#### Windows (`winget`)
-
-```bash
-winget install tyulyukov.MarCode
-```
+1. **Drop in a Jira ticket.** `@PROJ-123` in the composer pulls the title, description, attachments, and links straight into context. Paste an `*.atlassian.net/browse/...` URL and MarCode auto-detects it. Browse boards and sprints with `/jira` without ever leaving the chat.
+2. **Pick how you want to work.** Run the agent **in-place** against your local checkout, or one-click into an **isolated git worktree** so the agent can refactor without ever touching your working tree. Switch between threads, branches, and worktrees from the sidebar.
+3. **Watch every step in plain English.** File reads, shell commands, web searches, MCP tool calls, and subagent task groups all render as purpose-built cards — not raw JSON. Approve, reject, or revert any checkpoint with one click.
+4. **Ship with one click.** When the work is good, MarCode handles the rest of the chore work for you: it generates a semantic branch name (`feature/PROJ-123-…`), writes a clean commit message that reads naturally, opens a **PR on GitHub** or an **MR on GitLab** — auto-detected from your remote — with the Jira ticket key engraved in the title and the "why" lifted from the ticket description.
 
-#### macOS (Homebrew)
+The Jira ticket key follows the work end-to-end: classified once on the first turn (so reference tickets don't leak), persisted on the thread, and visible on the chip beside the Commit / Push / MR button so reviewers always know what's being shipped.
 
-```bash
-brew install --cask marcode
-```
+## One GUI, every agent
 
-#### Arch Linux (AUR)
+| Provider        | Status       | CLI                                                        |
+| --------------- | ------------ | ---------------------------------------------------------- |
+| **Claude Code** | Default      | [`claude`](https://docs.anthropic.com/en/docs/claude-code) |
+| **Codex**       | Stable       | [`codex`](https://github.com/openai/codex)                 |
+| **OpenCode**    | Stable       | [`opencode`](https://opencode.ai)                          |
+| **Cursor**      | Early Access | [`cursor-agent`](https://docs.cursor.com/en/cli/overview)  |
 
-```bash
-yay -S marcode-bin
-```
+Pick a CLI, pick a model, switch mid-thread. Your agents share one history, one settings panel, and one set of keybindings.
 
-## Some notes
+## Why MarCode
 
-We are very very early in this project. Expect bugs.
+- **Rich tool-call display.** Every shell command, file edit, web fetch, MCP call, and subagent spawn renders as a dedicated card with diffs, status, and inline previews — not a wall of JSON.
+- **Native multi-host Git.** GitHub PRs and GitLab MRs from the same composer. The host is auto-detected from `remote.origin.url`; the UI relabels itself accordingly.
+- **Jira-aware end-to-end.** OAuth 2.0 to Atlassian Cloud, sprint browsing, `@PROJ-123` mentions, and ticket-engraved branches / titles / MRs.
+- **Remote control.** Run the server headless on a workstation or build box and connect from another desktop, phone, or tablet over your tailnet. See [REMOTE.md](./REMOTE.md).
+- **Yours to customize.** 24+ themes across Catppuccin, Dracula, Nord, Tokyo Night, Rose Pine, Ayu, Solarized, GitHub, Gruvbox, One Dark, Monokai, and the branded MarCode set. Custom keybindings via [`~/.marcode/keybindings.json`](./KEYBINDINGS.md).
+- **Fast under load.** Incremental event streaming, structural sharing in the store, and virtualized timelines keep the UI smooth through long agent runs.
 
-We are not accepting contributions yet.
+A full inventory of fork-exclusive features lives in [FEATURES.md](./FEATURES.md).
 
-Observability guide: [docs/observability.md](./docs/observability.md)
+## Installation
 
-## If you REALLY want to contribute still.... read this first
+> [!NOTE]
+> MarCode requires at least one coding-agent CLI installed and authenticated. Install whichever you use:
+>
+> - **Claude Code:** install [Claude Code](https://docs.anthropic.com/en/docs/claude-code) and run `claude`
+> - **Codex:** install [Codex CLI](https://github.com/openai/codex) and run `codex login`
+> - **OpenCode:** install [OpenCode](https://opencode.ai) (`npm i -g opencode-ai`) and authenticate
+> - **Cursor (Early Access):** install [Cursor CLI](https://docs.cursor.com/en/cli/installation) and run `agent login`
 
-Before local development, prepare the environment and install dependencies:
+For Git host integration:
 
-```bash
-# Optional: only needed if you use mise for dev tool management.
-mise install
-bun install .
-```
+- **GitHub PRs:** [`gh`](https://cli.github.com/) installed and authenticated
+- **GitLab MRs:** [`glab`](https://gitlab.com/gitlab-org/cli) installed and authenticated (Personal Access Token works for self-hosted GitLab)
 
-Read [CONTRIBUTING.md](./CONTRIBUTING.md) before opening an issue or PR.
+### Desktop app
 
-Need support? Join the [Discord](https://discord.gg/jn4EGJjrvv).
+Install the latest release from [GitHub Releases](https://github.com/tyulyukov/marcode/releases).

apps/web/src/components/ChatMarkdown.tsx

@@ -241,6 +241,61 @@ function SuspenseShikiCodeBlock({
   );
 }
 
+function DeferredShikiCodeBlock({
+  className,
+  code,
+  themeName,
+  isStreaming,
+  fallback,
+}: SuspenseShikiCodeBlockProps & { fallback: ReactNode }) {
+  const [enabled, setEnabled] = useState(false);
+
+  useEffect(() => {
+    setEnabled(false);
+    if (isStreaming) {
+      return;
+    }
+
+    let cancelled = false;
+    const enable = () => {
+      if (!cancelled) {
+        setEnabled(true);
+      }
+    };
+
+    if ("requestIdleCallback" in window) {
+      const idleId = window.requestIdleCallback(enable, { timeout: 1_000 });
+      return () => {
+        cancelled = true;
+        window.cancelIdleCallback(idleId);
+      };
+    }
+
+    const timeoutId = globalThis.setTimeout(enable, 120);
+    return () => {
+      cancelled = true;
+      globalThis.clearTimeout(timeoutId);
+    };
+  }, [className, code, isStreaming, themeName]);
+
+  if (!enabled) {
+    return <>{fallback}</>;
+  }
+
+  return (
+    <CodeHighlightErrorBoundary fallback={fallback}>
+      <Suspense fallback={fallback}>
+        <SuspenseShikiCodeBlock
+          className={className}
+          code={code}
+          themeName={themeName}
+          isStreaming={isStreaming}
+        />
+      </Suspense>
+    </CodeHighlightErrorBoundary>
+  );
+}
+
 interface MarkdownFileLinkProps {
   href: string;
   targetPath: string;
@@ -541,16 +596,13 @@ function ChatMarkdown({ text, cwd, isStreaming = false }: ChatMarkdownProps) {
 
         return (
           <MarkdownCodeBlock code={codeBlock.code}>
-            <CodeHighlightErrorBoundary fallback={<pre {...props}>{children}</pre>}>
-              <Suspense fallback={<pre {...props}>{children}</pre>}>
-                <SuspenseShikiCodeBlock
-                  className={codeBlock.className}
-                  code={codeBlock.code}
-                  themeName={diffThemeName}
-                  isStreaming={isStreaming}
-                />
-              </Suspense>
-            </CodeHighlightErrorBoundary>
+            <DeferredShikiCodeBlock
+              className={codeBlock.className}
+              code={codeBlock.code}
+              themeName={diffThemeName}
+              isStreaming={isStreaming}
+              fallback={<pre {...props}>{children}</pre>}
+            />
           </MarkdownCodeBlock>
         );
       },

apps/web/src/components/ChatView.tsx

@@ -2663,7 +2663,7 @@ export default function ChatView({
     return () => {
       observer.disconnect();
     };
-  }, [activeThread?.id, composerFooterActionLayoutKey, composerFooterHasWideActions, scrollToEnd]);
+  }, [composerFooterActionLayoutKey, composerFooterHasWideActions, scrollToEnd]);
   useEffect(() => {
     const prevPhase = previousPhaseRef.current;
     const prevThreadId = previousThreadIdRef.current;

apps/web/src/components/DiffPanelShell.tsx

@@ -12,7 +12,7 @@ function getDiffPanelHeaderRowClassName(mode: DiffPanelMode) {
   return cn(
     "flex items-center justify-between gap-2 px-4",
     shouldUseDragRegion
-      ? "drag-region h-[52px] border-b border-border wco:h-[env(titlebar-area-height)] wco:pr-[calc(100vw-env(titlebar-area-width)-env(titlebar-area-x)+1em)]"
+      ? "drag-region h-[56px] border-b border-border wco:h-[env(titlebar-area-height)] wco:pr-[calc(100vw-env(titlebar-area-width)-env(titlebar-area-x)+1em)]"
       : "h-12 wco:max-h-[env(titlebar-area-height)]",
   );
 }

apps/web/src/components/Sidebar.tsx

@@ -322,7 +322,7 @@ interface SidebarThreadRowProps {
 }
 
 const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowProps) {
-  useSyncedRelativeTimeTick();
+  const relativeTimeNowMs = useSyncedRelativeTimeTick();
   const {
     orderedProjectThreadKeys,
     isActive,
@@ -722,6 +722,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
                   >
                     {formatRelativeTimeLabel(
                       thread.latestUserMessageAt ?? thread.updatedAt ?? thread.createdAt,
+                      relativeTimeNowMs,
                     )}
                   </span>
                 )}

apps/web/src/components/chat/ChatHeader.tsx

@@ -80,9 +80,9 @@ export const ChatHeader = memo(function ChatHeader({
   onToggleDiff,
   onTogglePlanSidebar,
 }: ChatHeaderProps) {
-  useSyncedRelativeTimeTick();
+  const relativeTimeNowMs = useSyncedRelativeTimeTick();
   const relativeActivityAt = activeThreadActivityAt
-    ? formatRelativeTimeLabel(activeThreadActivityAt)
+    ? formatRelativeTimeLabel(activeThreadActivityAt, relativeTimeNowMs)
     : null;
   const showMetaRow = Boolean(activeProjectName) || Boolean(relativeActivityAt);
   const primaryEnvironmentId = usePrimaryEnvironmentId();

apps/web/src/components/chat/MessagesTimeline.tsx

@@ -387,22 +387,18 @@ export const MessagesTimeline = memo(function MessagesTimeline({
     let completed = false;
     let rafId: number | null = null;
 
-    const scheduleScroll = (depth: number) => {
+    const scheduleScroll = () => {
       rafId = window.requestAnimationFrame(() => {
         rafId = null;
         if (cancelled) return;
         void listRef.current?.scrollToEnd?.({ animated: false });
-        if (depth > 0) {
-          scheduleScroll(depth - 1);
-        } else {
-          completed = true;
-          hasFinishedInitialScrollRef.current = true;
-          syncIsAtEnd();
-        }
+        completed = true;
+        hasFinishedInitialScrollRef.current = true;
+        syncIsAtEnd();
       });
     };
 
-    scheduleScroll(2);
+    scheduleScroll();
 
     return () => {
       cancelled = true;
@@ -414,7 +410,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
         hasAutoScrolledOnMountRef.current = false;
       }
     };
-  }, [listRef, rows.length, syncIsAtEnd, updateIsAtEnd]);
+  }, [listRef, rows.length, syncIsAtEnd, threadId, updateIsAtEnd]);
 
   useEffect(() => {
     if (rows.length === 0) return;
@@ -564,13 +560,13 @@ export const MessagesTimeline = memo(function MessagesTimeline({
     <TimelineRowCtx.Provider value={sharedState}>
       <div className="@container/chat relative h-full">
         <LegendList<MessagesTimelineRow>
-          key={threadId}
           ref={listRef}
           data={rows}
           keyExtractor={keyExtractor}
           renderItem={renderItem}
           estimatedItemSize={160}
           getEstimatedItemSize={estimateRowSize}
+          drawDistance={120}
           initialScrollAtEnd
           maintainScrollAtEnd
           maintainScrollAtEndThreshold={0.1}

apps/web/src/components/chat/ProviderUsageMeter.tsx

@@ -6,7 +6,11 @@ function formatResetTime(resetsAt: number | null): string | null {
     return null;
   }
   const date = new Date(resetsAt * 1000);
-  return `Resets ${date.toLocaleDateString(undefined, {
+  return `Resets ${formatUsageDate(date)}`;
+}
+
+function formatUsageDate(date: Date): string {
+  return `${date.toLocaleDateString(undefined, {
     month: "short",
     day: "numeric",
   })}, ${date.toLocaleTimeString(undefined, {
@@ -16,6 +20,14 @@ function formatResetTime(resetsAt: number | null): string | null {
   })}`;
 }
 
+function formatLastUpdatedAt(updatedAt: string): string | null {
+  const timestamp = Date.parse(updatedAt);
+  if (!Number.isFinite(timestamp)) {
+    return null;
+  }
+  return `Last updated ${formatUsageDate(new Date(timestamp))}`;
+}
+
 function usageBarColor(percent: number | null): string {
   if (percent === null) {
     return "color-mix(in oklab, var(--color-muted-foreground) 45%, transparent)";
@@ -76,6 +88,7 @@ export function ProviderUsageMeter(props: { usage: ProviderUsageSnapshot }) {
     .filter((percent): percent is number => percent !== null);
   const maxPercent = Math.max(...reportedPercents, 0);
   const hasReportedPercent = reportedPercents.length > 0;
+  const lastUpdatedText = formatLastUpdatedAt(usage.updatedAt);
 
   return (
     <Popover>
@@ -122,6 +135,12 @@ export function ProviderUsageMeter(props: { usage: ProviderUsageSnapshot }) {
               </div>
             );
           })}
+
+          {lastUpdatedText ? (
+            <div className="border-t border-border/60 pt-2 text-[11px] text-muted-foreground">
+              {lastUpdatedText}
+            </div>
+          ) : null}
         </div>
       </PopoverPopup>
     </Popover>

apps/web/src/hooks/useTheme.ts

@@ -72,26 +72,18 @@ function normalizeThemeColor(value: string | null | undefined): string | null {
   return value?.trim() ?? null;
 }
 
-function resolveBrowserChromeSurface(): HTMLElement {
-  return (
-    document.querySelector<HTMLElement>("main[data-slot='sidebar-inset']") ??
-    document.querySelector<HTMLElement>("[data-slot='sidebar-inner']") ??
-    document.body
-  );
-}
-
-export function syncBrowserChromeTheme() {
-  if (typeof document === "undefined" || typeof getComputedStyle === "undefined") return;
-  const surfaceColor = normalizeThemeColor(
-    getComputedStyle(resolveBrowserChromeSurface()).backgroundColor,
-  );
-  const fallbackColor = normalizeThemeColor(getComputedStyle(document.body).backgroundColor);
-  const backgroundColor = surfaceColor ?? fallbackColor;
-  if (!backgroundColor) return;
+export function syncBrowserChromeTheme(backgroundColor?: string | null) {
+  if (typeof document === "undefined") return;
+  const normalizedBackgroundColor = normalizeThemeColor(backgroundColor);
+  const chromeColor = normalizedBackgroundColor ?? "var(--app-chrome-background)";
 
-  document.documentElement.style.backgroundColor = backgroundColor;
-  document.body.style.backgroundColor = backgroundColor;
-  ensureThemeColorMetaTag().setAttribute("content", backgroundColor);
+  document.documentElement.style.backgroundColor = chromeColor;
+  if (document.body) {
+    document.body.style.backgroundColor = chromeColor;
+  }
+  if (normalizedBackgroundColor) {
+    ensureThemeColorMetaTag().setAttribute("content", normalizedBackgroundColor);
+  }
 }
 
 function getAutoNightPair(): AutoNightPair {
@@ -148,7 +140,7 @@ function applyTheme(preference: ThemePreference, suppressTransitions = false) {
   const definition = resolvePreference(preference, getSystemDark(), getAutoNightPair());
   applyThemeToDOM(definition, suppressTransitions);
   applyAccentOverride(definition);
-  syncBrowserChromeTheme();
+  syncBrowserChromeTheme(definition.variables?.["--background"] ?? null);
   syncDesktopTheme(definition, preference === "system");
 }