From c5158ff52c297516d61c23c47fc152f8dbdd952a Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Thu, 29 Jan 2026 18:23:43 +0200
Subject: [PATCH] Chat input updates with Stop button and update dialog
 changelog UI (#241)

* feat: re-organizaed input footer UI in chat

Add StopIcon component and use it for aborting generation in chat controls
Introduce ProviderLogoOrFallback to show provider logo or fallback icon in model controls
Remove mobile-only abort button in StatusRow and simplify abort handling

* feat: improved render of changelog in UpdateDialog
---
 packages/desktop/src-tauri/Cargo.lock         |   2 +-
 packages/ui/src/components/chat/ChatInput.tsx |  65 ++-----
 .../ui/src/components/chat/ModelControls.tsx  |  78 +++++---
 packages/ui/src/components/chat/StatusRow.tsx |  20 +-
 packages/ui/src/components/icons/StopIcon.tsx |  20 ++
 .../ui/src/components/ui/UpdateDialog.tsx     | 182 +++++++++++++++---
 6 files changed, 251 insertions(+), 116 deletions(-)
 create mode 100644 packages/ui/src/components/icons/StopIcon.tsx

diff --git a/packages/desktop/src-tauri/Cargo.lock b/packages/desktop/src-tauri/Cargo.lock
index 1f68710e..9dfbb9d5 100644
--- a/packages/desktop/src-tauri/Cargo.lock
+++ b/packages/desktop/src-tauri/Cargo.lock
@@ -2994,7 +2994,7 @@ dependencies = [
 
 [[package]]
 name = "openchamber-desktop"
-version = "1.5.9"
+version = "1.6.0"
 dependencies = [
  "anyhow",
  "axum",
diff --git a/packages/ui/src/components/chat/ChatInput.tsx b/packages/ui/src/components/chat/ChatInput.tsx
index c736886a..2cd9d88b 100644
--- a/packages/ui/src/components/chat/ChatInput.tsx
+++ b/packages/ui/src/components/chat/ChatInput.tsx
@@ -4,7 +4,6 @@ import {
     RiAddCircleLine,
     RiAiAgentLine,
     RiAttachment2,
-    RiCloseCircleLine,
     RiFileUploadLine,
     RiSendPlane2Line,
 } from '@remixicon/react';
@@ -31,6 +30,7 @@ import { toast } from '@/components/ui';
 import { useFileStore } from '@/stores/fileStore';
 import { isVSCodeRuntime } from '@/lib/desktop';
 import { isIMECompositionEvent } from '@/lib/ime';
+import { StopIcon } from '@/components/icons/StopIcon';
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -121,7 +121,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
     const abortCurrentOperation = useSessionStore((state) => state.abortCurrentOperation);
     const acknowledgeSessionAbort = useSessionStore((state) => state.acknowledgeSessionAbort);
     const abortPromptSessionId = useSessionStore((state) => state.abortPromptSessionId);
-    const abortPromptExpiresAt = useSessionStore((state) => state.abortPromptExpiresAt);
     const clearAbortPrompt = useSessionStore((state) => state.clearAbortPrompt);
     const sessionAbortFlags = useSessionStore((state) => state.sessionAbortFlags);
     const attachedFiles = useSessionStore((state) => state.attachedFiles);
@@ -297,11 +296,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
 
     const canAbort = working.isWorking;
 
-    const isAbortPromptActive = React.useMemo(() => {
-        if (!currentSessionId) return false;
-        return abortPromptSessionId === currentSessionId && Boolean(abortPromptExpiresAt);
-    }, [abortPromptSessionId, abortPromptExpiresAt, currentSessionId]);
-
     // Add message to queue instead of sending
     const handleQueueMessage = React.useCallback(() => {
         if (!hasContent || !currentSessionId) return;
@@ -1138,7 +1132,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
         event.target.value = '';
     }, [attachFiles]);
 
-    const footerGapClass = 'gap-x-1.5 gap-y-0';
+    const footerGapClass = isMobile ? 'gap-x-0.5 gap-y-0' : 'gap-x-1.5 gap-y-0';
     const isVSCode = isVSCodeRuntime();
     const footerPaddingClass = isMobile ? 'px-1.5 py-1.5' : (isVSCode ? 'px-1.5 py-1' : 'px-2.5 py-1.5');
     const footerHeightClass = isMobile ? 'h-9 w-9' : (isVSCode ? 'h-[22px] w-[22px]' : 'h-7 w-7');
@@ -1149,22 +1143,21 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
         'flex items-center justify-center text-muted-foreground transition-none outline-none focus:outline-none flex-shrink-0'
     );
 
-    // Desktop and VSCode: show abort button in footer when Esc triggered
-    const showAbortInFooter = !isMobile && isAbortPromptActive && canAbort;
-
-    const actionButton = showAbortInFooter ? (
+    const cancelButton = canAbort ? (
         <button
-            type='button'
+            type="button"
             onClick={handleAbort}
             className={cn(
                 iconButtonBaseClass,
                 'text-[var(--status-error)] hover:text-[var(--status-error)]'
             )}
-            aria-label='Stop generating'
+            aria-label="Stop generating"
         >
-            <RiCloseCircleLine className={cn(iconSizeClass)} />
+            <StopIcon className={cn(iconSizeClass)} />
         </button>
-    ) : (
+    ) : null;
+
+    const sendButton = (
         <button
             type={isMobile ? 'button' : 'submit'}
             disabled={!canSend || (!currentSessionId && !newSessionDraftOpen)}
@@ -1319,9 +1312,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
         };
     }, []);
 
-    // For mobile only, show abort in StatusRow; desktop and vscode show in footer (Esc-triggered)
-    const showAbortInStatusRow = isMobile && canAbort;
-
     return (
 
         <form
@@ -1344,8 +1334,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                     abortActive={working.abortActive}
                     completionId={working.lastCompletionId}
                     isComplete={working.isComplete}
-                    showAbort={showAbortInStatusRow}
-                    onAbort={handleAbort}
                     showAbortStatus={showAbortStatus}
                 />
             </div>
@@ -1462,7 +1450,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                         className={cn(
                             'bg-transparent',
                             footerPaddingClass,
-                            isMobile ? 'flex items-center gap-x-1.5' : cn('flex items-center justify-between', footerGapClass)
+                            cn('flex items-center justify-between', footerGapClass)
                         )}
                         style={{
                             borderBottomLeftRadius: cornerRadius,
@@ -1470,29 +1458,18 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                         }}
                         data-chat-input-footer="true"
                     >
-                        {isMobile ? (
-                            <div className="flex w-full items-center gap-x-1.5">
-                                <div className="flex items-center flex-shrink-0 gap-x-1">
-                                    {attachmentsControls}
-                                </div>
-                                <div className="flex flex-1 items-center justify-end gap-x-1 min-w-0">
-                                    <div className="flex flex-1 min-w-0 justify-end overflow-hidden">
-                                        <ModelControls className={cn('w-full flex items-center justify-end min-w-0')} />
-                                    </div>
-                                    {actionButton}
-                                </div>
+                        <div className={cn('flex items-center min-w-0 flex-1', footerGapClass)}>
+                            <div className={cn('flex items-center flex-shrink-0', footerGapClass)}>
+                                {attachmentsControls}
                             </div>
-                        ) : (
-                            <>
-                                <div className={cn("flex items-center flex-shrink-0", footerGapClass)}>
-                                    {attachmentsControls}
-                                </div>
-                                <div className={cn('flex items-center flex-1 justify-end', footerGapClass, 'md:gap-x-3')}>
-                                    <ModelControls className={cn('flex-1 min-w-0 justify-end')} />
-                                    {actionButton}
-                                </div>
-                            </>
-                        )}
+                            <div className="flex min-w-0 flex-1 overflow-hidden">
+                                <ModelControls className={cn('w-full min-w-0')} />
+                            </div>
+                        </div>
+                        <div className={cn('flex items-center flex-shrink-0', footerGapClass)}>
+                            {cancelButton}
+                            {sendButton}
+                        </div>
                     </div>
                 </div>
 
diff --git a/packages/ui/src/components/chat/ModelControls.tsx b/packages/ui/src/components/chat/ModelControls.tsx
index 263fb7ab..f9da3878 100644
--- a/packages/ui/src/components/chat/ModelControls.tsx
+++ b/packages/ui/src/components/chat/ModelControls.tsx
@@ -37,6 +37,7 @@ import { ProviderLogo } from '@/components/ui/ProviderLogo';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
 import { Switch } from '@/components/ui/switch';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { useProviderLogo } from '@/hooks/useProviderLogo';
 import { useIsDesktopRuntime, useIsVSCodeRuntime } from '@/hooks/useRuntimeAPIs';
 import { getAgentColor } from '@/lib/agentColors';
 import { useDeviceInfo } from '@/lib/device';
@@ -138,6 +139,27 @@ type ModalityIcon = {
 
 type ModelApplyResult = 'applied' | 'provider-missing' | 'model-missing';
 
+const ProviderLogoOrFallback: React.FC<{
+    providerId: string;
+    className?: string;
+    fallbackClassName?: string;
+}> = ({ providerId, className, fallbackClassName }) => {
+    const { src, onError, hasLogo } = useProviderLogo(providerId);
+
+    if (hasLogo && src) {
+        return (
+            <img
+                src={src}
+                alt={`${providerId} logo`}
+                className={cn('dark:invert', className)}
+                onError={onError}
+            />
+        );
+    }
+
+    return <RiPencilAiLine className={cn(className, fallbackClassName)} aria-hidden="true" />;
+};
+
 const MODALITY_ICON_MAP: Record<string, ModalityIconDefinition> = {
     text: { icon: RiText, label: 'Text' },
     image: { icon: RiFileImageLine, label: 'Image' },
@@ -415,7 +437,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
     const editToggleIconClass = sizeVariant === 'mobile' ? 'h-5 w-5' : sizeVariant === 'vscode' ? 'h-4 w-4' : 'h-4 w-4';
     const controlIconSize = sizeVariant === 'mobile' ? 'h-5 w-5' : sizeVariant === 'vscode' ? 'h-4 w-4' : 'h-4 w-4';
     const controlTextSize = isCompact ? 'typography-micro' : 'typography-meta';
-    const inlineGapClass = sizeVariant === 'mobile' ? 'gap-x-1' : sizeVariant === 'vscode' ? 'gap-x-1' : 'gap-x-3';
+    const inlineGapClass = sizeVariant === 'mobile' ? 'gap-x-0.5' : sizeVariant === 'vscode' ? 'gap-x-1' : 'gap-x-2';
     const renderEditModeIcon = React.useCallback((mode: EditPermissionMode, iconClass = editToggleIconClass) => {
         const combinedClassName = cn(iconClass, 'flex-shrink-0');
         const modeColors = getEditModeColors(mode);
@@ -1973,11 +1995,11 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                                 >
                                     {currentProviderId ? (
                                         <>
-                                            <ProviderLogo
+                                            <ProviderLogoOrFallback
                                                 providerId={currentProviderId}
                                                 className={cn(controlIconSize, 'flex-shrink-0')}
+                                                fallbackClassName="text-muted-foreground"
                                             />
-                                            <RiPencilAiLine className={cn(controlIconSize, 'text-primary/60 hidden')} />
                                         </>
                                     ) : (
                                         <RiPencilAiLine className={cn(controlIconSize, 'text-muted-foreground')} />
@@ -2093,15 +2115,17 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                         onTouchEnd={handleLongPressEnd}
                         onTouchCancel={handleLongPressEnd}
                         className={cn(
-                            'model-controls__model-trigger flex items-center gap-1.5 min-w-0 focus:outline-none',
+                            'model-controls__model-trigger flex items-center gap-1 min-w-0 focus:outline-none',
                             'cursor-pointer hover:opacity-70',
-                            buttonHeight
+                            buttonHeight,
+                            'px-1'
                         )}
                     >
                         {currentProviderId ? (
-                            <ProviderLogo
+                            <ProviderLogoOrFallback
                                 providerId={currentProviderId}
                                 className={cn(controlIconSize, 'flex-shrink-0')}
+                                fallbackClassName="text-muted-foreground"
                             />
                         ) : (
                             <RiPencilAiLine className={cn(controlIconSize, 'text-muted-foreground')} />
@@ -2109,13 +2133,11 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                         <span
                             ref={modelLabelRef}
                             className={cn(
-                                'model-controls__model-label typography-micro font-medium overflow-hidden min-w-0',
+                                'model-controls__model-label typography-micro font-medium min-w-0 truncate',
                                 isMobile ? 'max-w-[120px]' : 'max-w-[220px]',
                             )}
                         >
-                            <span className={cn('marquee-text', isModelLabelTruncated && 'marquee-text--active')}>
-                                {currentModelDisplayName}
-                            </span>
+                            {currentModelDisplayName}
                         </span>
                     </button>
                 )}
@@ -2261,21 +2283,15 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                     type="button"
                     onClick={() => setActiveMobilePanel('variant')}
                     className={cn(
-                        'model-controls__variant-trigger flex items-center gap-1.5 transition-opacity min-w-0 focus:outline-none',
+                        'model-controls__variant-trigger flex items-center justify-center transition-opacity focus:outline-none',
                         buttonHeight,
+                        'w-9',
                         'cursor-pointer hover:opacity-70',
                     )}
+                    aria-label={`Thinking: ${displayVariant}`}
+                    title={`Thinking: ${displayVariant}`}
                 >
                     <RiBrainAi3Line className={cn(controlIconSize, 'flex-shrink-0', colorClass)} />
-                    <span className={cn(
-                        'model-controls__variant-label',
-                        controlTextSize,
-                        'font-medium truncate min-w-0',
-                        isMobile && 'max-w-[60px]',
-                        colorClass
-                    )}>
-                        {displayVariant}
-                    </span>
                 </button>
             );
         }
@@ -2430,11 +2446,12 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                 onTouchStart={() => handleLongPressStart('agent')}
                 onTouchEnd={handleLongPressEnd}
                 onTouchCancel={handleLongPressEnd}
-                className={cn(
-                    'model-controls__agent-trigger flex items-center gap-1.5 transition-opacity min-w-0 focus:outline-none',
-                    buttonHeight,
-                    'cursor-pointer hover:opacity-70',
-                )}
+                    className={cn(
+                        'model-controls__agent-trigger flex items-center gap-1 transition-opacity min-w-0 focus:outline-none',
+                        buttonHeight,
+                        'cursor-pointer hover:opacity-70',
+                        'px-1',
+                    )}
             >
                                         <RiAiAgentLine
                                             className={cn(
@@ -2460,9 +2477,10 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
     };
 
     const inlineClassName = cn(
-        '@container/model-controls flex items-center min-w-0',
+        (isMobile ? '@container' : '@container/model-controls'),
+        'flex items-center min-w-0',
         // Only force full-width + truncation behaviors on true mobile layouts.
-        // VS Code also uses "compact" mode, but should keep its right-aligned inline sizing.
+        // VS Code uses desktop dropdowns.
         isMobile && 'w-full',
         className,
     );
@@ -2472,14 +2490,14 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
             <div className={inlineClassName}>
                 <div
                     className={cn(
-                        'flex items-center min-w-0 flex-1 justify-end',
+                        'flex items-center min-w-0 flex-1 justify-start',
                         inlineGapClass,
                         isMobile && 'overflow-hidden'
                     )}
                 >
-                    {renderVariantSelector()}
-                    {renderModelSelector()}
                     {renderAgentSelector()}
+                    {renderModelSelector()}
+                    {renderVariantSelector()}
                 </div>
             </div>
 
diff --git a/packages/ui/src/components/chat/StatusRow.tsx b/packages/ui/src/components/chat/StatusRow.tsx
index 8a44123a..1b0db201 100644
--- a/packages/ui/src/components/chat/StatusRow.tsx
+++ b/packages/ui/src/components/chat/StatusRow.tsx
@@ -55,9 +55,6 @@ interface StatusRowProps {
   abortActive?: boolean;
   completionId?: string | null;
   isComplete?: boolean;
-  // Abort state (for mobile/vscode)
-  showAbort?: boolean;
-  onAbort?: () => void;
   // Abort status display
   showAbortStatus?: boolean;
 }
@@ -71,8 +68,6 @@ export const StatusRow: React.FC<StatusRowProps> = ({
   abortActive,
   completionId,
   isComplete,
-  showAbort,
-  onAbort,
   showAbortStatus,
 }) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
@@ -158,18 +153,6 @@ export const StatusRow: React.FC<StatusRowProps> = ({
 
   const toggleExpanded = () => setIsExpanded((prev) => !prev);
 
-  // Abort button for mobile/vscode
-  const abortButton = showAbort && onAbort ? (
-    <button
-      type="button"
-      onClick={onAbort}
-      className="flex items-center justify-center h-[1.2rem] w-[1.2rem] text-[var(--status-error)] transition-opacity hover:opacity-80 focus-visible:outline-none flex-shrink-0"
-      aria-label="Stop generating"
-    >
-      <RiCloseCircleLine size={18} aria-hidden="true" />
-    </button>
-  ) : null;
-
   // Todo trigger button
   const todoTrigger = hasActiveTodos ? (
     <button
@@ -223,9 +206,8 @@ export const StatusRow: React.FC<StatusRowProps> = ({
           ) : null}
         </div>
 
-        {/* Right: Abort (mobile only) + Todo */}
+        {/* Right: Todo */}
         <div className="relative flex items-center gap-2 flex-shrink-0" ref={popoverRef}>
-          {abortButton}
           {todoTrigger}
 
           {/* Popover dropdown */}
diff --git a/packages/ui/src/components/icons/StopIcon.tsx b/packages/ui/src/components/icons/StopIcon.tsx
new file mode 100644
index 00000000..b9159111
--- /dev/null
+++ b/packages/ui/src/components/icons/StopIcon.tsx
@@ -0,0 +1,20 @@
+import type { SVGProps } from 'react';
+
+export function StopIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      fill="currentColor"
+      viewBox="0 0 256 256"
+      {...props}
+    >
+      <path
+        d="M208,56V200a8,8,0,0,1-8,8H56a8,8,0,0,1-8-8V56a8,8,0,0,1,8-8H200A8,8,0,0,1,208,56Z"
+        opacity="0.2"
+      />
+      <path d="M200,40H56A16,16,0,0,0,40,56V200a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,160H56V56H200V200Z" />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/components/ui/UpdateDialog.tsx b/packages/ui/src/components/ui/UpdateDialog.tsx
index 1b03d1ad..70ca4a61 100644
--- a/packages/ui/src/components/ui/UpdateDialog.tsx
+++ b/packages/ui/src/components/ui/UpdateDialog.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import {
   Dialog,
   DialogContent,
@@ -6,6 +6,7 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
+import { SimpleMarkdownRenderer } from '@/components/chat/MarkdownRenderer';
 import { RiCheckLine, RiClipboardLine, RiDownloadCloudLine, RiDownloadLine, RiExternalLinkLine, RiLoaderLine, RiRestartLine, RiTerminalLine } from '@remixicon/react';
 import { cn } from '@/lib/utils';
 import type { UpdateInfo, UpdateProgress } from '@/lib/desktop';
@@ -28,6 +29,80 @@ interface UpdateDialogProps {
 
 const GITHUB_RELEASES_URL = 'https://github.com/btriapitsyn/openchamber/releases';
 
+type ChangelogSection = {
+  version: string;
+  date: string;
+  start: number;
+  end: number;
+  raw: string;
+};
+
+type ParsedChangelog =
+  | {
+      kind: 'raw';
+      title: string;
+      content: string;
+    }
+  | {
+      kind: 'sections';
+      title: string;
+      sections: Array<{ version: string; dateLabel: string; content: string }>;
+    };
+
+function formatIsoDateForUI(isoDate: string): string {
+  const d = new Date(`${isoDate}T00:00:00`);
+  if (Number.isNaN(d.getTime())) {
+    return isoDate;
+  }
+  return new Intl.DateTimeFormat(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  }).format(d);
+}
+
+function stripChangelogHeading(sectionRaw: string): string {
+  return sectionRaw.replace(/^## \[[^\]]+\] - \d{4}-\d{2}-\d{2}\s*\n?/, '').trim();
+}
+
+function compareSemverDesc(a: string, b: string): number {
+  const pa = a.split('.').map((v) => Number.parseInt(v, 10));
+  const pb = b.split('.').map((v) => Number.parseInt(v, 10));
+  for (let i = 0; i < 3; i += 1) {
+    const da = Number.isFinite(pa[i]) ? (pa[i] as number) : 0;
+    const db = Number.isFinite(pb[i]) ? (pb[i] as number) : 0;
+    if (da !== db) {
+      return db - da;
+    }
+  }
+  return 0;
+}
+
+function parseChangelogSections(body: string): ChangelogSection[] {
+  const re = /^## \[(\d+\.\d+\.\d+)\] - (\d{4}-\d{2}-\d{2})\s*$/gm;
+  const matches: Array<{ version: string; date: string; start: number }> = [];
+
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(body)) !== null) {
+    matches.push({
+      version: m[1] ?? '',
+      date: m[2] ?? '',
+      start: m.index,
+    });
+  }
+
+  if (matches.length === 0) {
+    return [];
+  }
+
+  return matches.map((match, idx) => {
+    const end = matches[idx + 1]?.start ?? body.length;
+    const raw = body.slice(match.start, end).trim();
+    return { version: match.version, date: match.date, start: match.start, end, raw };
+  });
+}
+
+
 async function installWebUpdate(): Promise<{ success: boolean; error?: string }> {
   try {
     const response = await fetch('/api/openchamber/update-install', {
@@ -139,6 +214,38 @@ export const UpdateDialog: React.FC<UpdateDialogProps> = ({
 
   const isWebUpdating = webUpdateState !== 'idle' && webUpdateState !== 'error';
 
+  const changelog = useMemo<ParsedChangelog | null>(() => {
+    if (!info?.body) {
+      return null;
+    }
+
+    const body = info.body.trim();
+    if (!body) {
+      return null;
+    }
+
+    const sections = parseChangelogSections(body);
+
+    if (sections.length === 0) {
+      return {
+        kind: 'raw',
+        title: "What's new",
+        content: body,
+      };
+    }
+
+    const sorted = [...sections].sort((a, b) => compareSemverDesc(a.version, b.version));
+    return {
+      kind: 'sections',
+      title: "What's new",
+      sections: sorted.map((section) => ({
+        version: section.version,
+        dateLabel: formatIsoDateForUI(section.date),
+        content: stripChangelogHeading(section.raw) || body,
+      })),
+    };
+  }, [info?.body]);
+
   return (
     <Dialog open={open} onOpenChange={isWebUpdating ? undefined : onOpenChange}>
       <DialogContent className="max-w-md">
@@ -183,28 +290,59 @@ export const UpdateDialog: React.FC<UpdateDialogProps> = ({
             </div>
           )}
 
-          {info?.body && !isWebUpdating && (
-            <ScrollableOverlay
-              className="max-h-48 rounded-md border border-border bg-muted/30 p-3"
-              fillContainer={false}
-            >
-              <div className="text-sm text-muted-foreground whitespace-pre-wrap pr-3">
-                {info.body
-                  .split(/^## \[(\d+\.\d+\.\d+)\] - \d{4}-\d{2}-\d{2}\s*/gm)
-                  .filter(Boolean)
-                  .map((part, index) => {
-                    if (/^\d+\.\d+\.\d+$/.test(part.trim())) {
-                      return (
-                        <span key={index} className="font-semibold text-foreground">
-                          v{part.trim()}
-                          {'\n'}
-                        </span>
-                      );
-                    }
-                    return part.replace(/^- /gm, '• ').trim() + '\n\n';
-                  })}
+          {changelog && !isWebUpdating && (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between gap-3">
+                <div className="typography-ui-label font-medium text-foreground/90">
+                  {changelog.title}
+                </div>
               </div>
-            </ScrollableOverlay>
+
+              <ScrollableOverlay
+                className={cn(
+                  'max-h-56 rounded-md border border-border/70',
+                  'bg-background/40 p-3'
+                )}
+                fillContainer={false}
+              >
+                {changelog.kind === 'raw' ? (
+                  <SimpleMarkdownRenderer
+                    content={changelog.content}
+                    className="typography-markdown-body text-foreground/90 leading-relaxed pr-3"
+                  />
+                ) : (
+                  <div className="space-y-4 pr-3">
+                    {changelog.sections.map((section, idx) => (
+                      <div
+                        key={section.version}
+                        className={cn(
+                          idx > 0 && 'border-t border-border/40 pt-3'
+                        )}
+                      >
+                        <div className="flex items-center gap-2 mb-2">
+                          <span
+                            className={cn(
+                              'typography-ui-badge font-mono',
+                              'bg-primary/10 text-primary',
+                              'px-2 py-0.5 rounded-md'
+                            )}
+                          >
+                            v{section.version}
+                          </span>
+                          <span className="typography-micro text-muted-foreground">
+                            {section.dateLabel}
+                          </span>
+                        </div>
+                        <SimpleMarkdownRenderer
+                          content={section.content}
+                          className="typography-markdown-body text-foreground/90 leading-relaxed"
+                        />
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </ScrollableOverlay>
+            </div>
           )}
 
           {/* Web runtime: show CLI command only on error as fallback */}