feat: performance and renderer improvements

Author: kg912

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "desktop-intelligence",
-  "version": "3.0.0-beta-2",
+  "version": "3.0.0-beta-4",
   "description": "Electron orchestration layer for local and cloud LLMs via LMStudio, Ollama, OpenRouter and Nvidia Build",
   "main": "out/main/index.js",
   "author": "Karan Grover",

package.json

@@ -292,3 +292,5 @@ append a row. Never delete rows. This is how you know what has and hasn't been d
 | 246 | 2026-06-07 | src/renderer/src/components/chat/MessageBubble.tsx, package.json | fix(ui): rail line opacity raised to 13% (was invisible at 7%), inter-row margins zeroed via wrapper divs inside RailSegment. Version 3.0.0-alpha-14 → 3.0.0-alpha-15. | ✅ Done |
 | 247 | 2026-06-07 | src/renderer/src/components/chat/MessageBubble.tsx, package.json | fix(ui): fix vertical alignment regression in rail rows — removed wrapper divs, use className="!mb-0" directly on each component to override mb-2 via Tailwind important modifier. Version 3.0.0-alpha-15 → 3.0.0-alpha-16. | ✅ Done |
 | 248 | 2026-06-07 | src/renderer/src/components/chat/MessageBubble.tsx, package.json | feat(ui): answer blocks break the rail inline in sequence — isPaneBlock renamed isBreakBlock, answer type added alongside stock_chart, segmentBlocks() simplified to return Segment[] directly, separate answerBlocks render path removed. Model commentary now appears inline between tool call groups preserving agentic sequence. Version 3.0.0-beta-1 → 3.0.0-beta-2. | ✅ Done |
+| 249 | 2026-06-07 | src/renderer/src/lib/markdownUtils.ts | fix(renderer): splitMarkdownIntoBlocks uses CommonMark-correct fence matching — replaces broken boolean toggle with fenceMinLen tracker (null = outside fence, number = min backtick run length needed to close). Prevents long responses with multiple code blocks from corrupting fence state and dropping trailing content mid-render. | ✅ Done |
+| 250 | 2026-06-07 | src/renderer/src/components/layout/InputBar.tsx, package.json | fix(perf): remove CSS @property --ib-angle which caused Chromium to tick the animation compositor at 60fps continuously even at complete idle — root cause of persistent M1 Pro stutter across hover, typing, and settings. Replaced pseudo-element conic-gradient animation (which required @property to drive from var) with two real DOM nodes (.ib-glow-border, .ib-glow-blur) using hardware-accelerated transform:rotate. .ib-glow-ring gains overflow:hidden to clip the oversized rotating divs. .ib-glow-inner gains margin:1px replacing the old padding:1px on the ring. Visual output is identical. Version 3.0.0-beta-3 → 3.0.0-beta-4. | ✅ Done |

progress.md

@@ -522,11 +522,12 @@ function AssistantBubble({
                   }
                   if (block.type === 'answer') {
                     return (
-                      <MarkdownRenderer
-                        key={block.id}
-                        content={block.content}
-                        isStreaming={block.isStreaming}
-                      />
+                      <div key={block.id} style={{ marginTop: '0.6rem', marginBottom: '0.8rem' }}>
+                        <MarkdownRenderer
+                          content={block.content}
+                          isStreaming={block.isStreaming}
+                        />
+                      </div>
                     )
                   }
                   return null

src/renderer/src/components/chat/MessageBubble.tsx

@@ -134,26 +134,24 @@ export const InputBar = memo(function InputBar({
         from { opacity: 0; transform: scale(0.85) translateY(4px); }
         to   { opacity: 1; transform: scale(1) translateY(0); }
       }
-      @property --ib-angle {
-        syntax: '<angle>';
-        initial-value: 0deg;
-        inherits: false;
-      }
       @keyframes ib-revolve {
-        to { --ib-angle: 360deg; }
+        to { transform: translate(-50%, -50%) rotate(360deg); }
       }
       .ib-glow-ring {
         border-radius: 17px;
         padding: 1px;
         position: relative;
+        overflow: hidden;
       }
-      .ib-glow-ring::before {
-        content: '';
+      .ib-glow-border {
         position: absolute;
-        inset: 0;
-        border-radius: 17px;
+        top: 50%;
+        left: 50%;
+        width: 1400px;
+        height: 1400px;
+        transform: translate(-50%, -50%) rotate(0deg);
         background: conic-gradient(
-          from var(--ib-angle),
+          from 0deg,
           transparent 0deg,
           rgba(229,57,53,0.0) 50deg,
           rgba(229,57,53,0.5) 120deg,
@@ -163,20 +161,18 @@ export const InputBar = memo(function InputBar({
           transparent 360deg
         );
         animation: ib-revolve 1.25s linear infinite;
-        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-        -webkit-mask-composite: xor;
-        mask-composite: exclude;
-        padding: 1px;
         z-index: 0;
+        pointer-events: none;
       }
-      .ib-glow-ring::after {
-        content: '';
+      .ib-glow-blur {
         position: absolute;
-        inset: -2px;
-        border-radius: 20px;
+        top: 50%;
+        left: 50%;
+        width: 1400px;
+        height: 1400px;
+        transform: translate(-50%, -50%) rotate(0deg);
         background: conic-gradient(
-          from var(--ib-angle),
+          from 0deg,
           transparent 0deg,
           rgba(229,57,53,0.0) 50deg,
           rgba(229,57,53,0.10) 120deg,
@@ -188,13 +184,15 @@ export const InputBar = memo(function InputBar({
         animation: ib-revolve 1.25s linear infinite;
         filter: blur(8px);
         z-index: 0;
+        pointer-events: none;
       }
       .ib-glow-inner {
         border-radius: 16px;
         background: #141414;
         overflow: hidden;
         position: relative;
         z-index: 1;
+        margin: 1px;
       }
     `
     document.head.appendChild(s)
@@ -439,7 +437,12 @@ export const InputBar = memo(function InputBar({
     >
       {isStreaming ? (
         // ── Streaming: revolving conic-gradient glow ring ──
+        // Uses transform:rotate on real DOM nodes instead of @property --ib-angle
+        // to avoid the Chromium bug where a globally-registered @property with
+        // syntax:'<angle>' keeps the compositor ticking at 60fps even at idle.
         <div className="ib-glow-ring">
+          <div className="ib-glow-blur" aria-hidden="true" />
+          <div className="ib-glow-border" aria-hidden="true" />
           <div className="ib-glow-inner relative">
             {innerContent}
           </div>

src/renderer/src/components/layout/InputBar.tsx

@@ -407,20 +407,36 @@ export function prepareUserContent(raw: string): string {
 /**
  * Splits a markdown answer string by blank lines (\n\n) outside active code blocks,
  * allowing the renderer to memoize completed blocks and only re-parse the growing active one.
+ *
+ * Uses CommonMark-correct fence matching: the opening fence's backtick run length
+ * is remembered, and only a closing line with AT LEAST that many backticks ends
+ * the block.  This prevents a simple toggle from being tripped by backtick
+ * sequences inside fences (e.g. inline ` ``` ` inside a code example) or by
+ * a partial fence at a streaming chunk boundary.
  */
 export function splitMarkdownIntoBlocks(markdown: string): string[] {
   if (!markdown) return []
   const lines = markdown.split('\n')
   const blocks: string[] = []
   let currentBlock: string[] = []
-  let inCodeBlock = false
+  // null = not inside a fence; number = min backtick run needed to close
+  let fenceMinLen: number | null = null
 
   for (const line of lines) {
-    if (/^\s*`{3,}/.test(line)) {
-      inCodeBlock = !inCodeBlock
+    const fenceMatch = line.match(/^(\s*)(`{3,}|~{3,})/)
+    if (fenceMatch) {
+      const runLen = fenceMatch[2].length
+      if (fenceMinLen === null) {
+        // Opening fence — remember minimum closing run length
+        fenceMinLen = runLen
+      } else if (runLen >= fenceMinLen && line.trim().replace(/`+|~+/g, '').trim() === '') {
+        // Closing fence — must be at least as long as the opener AND have no
+        // trailing info-string (info-string means it's a new opening fence)
+        fenceMinLen = null
+      }
     }
 
-    if (!inCodeBlock && line.trim() === '') {
+    if (fenceMinLen === null && line.trim() === '') {
       if (currentBlock.length > 0) {
         blocks.push(currentBlock.join('\n'))
         currentBlock = []