Release v0.0.38

## What's New

- Desktop app release v0.0.38

## Downloads

- **macOS ARM64 (Apple Silicon)**: Download the `-arm64.dmg` file
- **macOS Intel**: Download the `.dmg` file (without arm64)

Auto-updates are enabled. Existing users will be notified automatically.

Author: serafimcloud

package.json

@@ -1,6 +1,6 @@
 {
   "name": "21st-desktop",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "private": true,
   "description": "1Code - UI for parallel work with AI agents",
   "author": {
@@ -79,6 +79,7 @@
     "gray-matter": "^4.0.3",
     "jotai": "^2.11.1",
     "lucide-react": "^0.468.0",
+    "mermaid": "^11.12.2",
     "motion": "^11.15.0",
     "next-themes": "^0.4.4",
     "node-pty": "^1.1.0",
@@ -90,6 +91,7 @@
     "react-hotkeys-hook": "^4.6.1",
     "react-icons": "^5.5.0",
     "react-syntax-highlighter": "^16.1.0",
+    "react-zoom-pan-pinch": "^3.7.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "shiki": "^1.24.4",

src/main/lib/auto-updater.ts

@@ -139,13 +139,29 @@ export async function initAutoUpdater(getWindow: () => BrowserWindow | null) {
  */
 function registerIpcHandlers() {
   // Check for updates
-  ipcMain.handle("update:check", async () => {
+  ipcMain.handle("update:check", async (_event, force?: boolean) => {
     if (!app.isPackaged) {
       log.info("[AutoUpdater] Skipping update check in dev mode")
       return null
     }
     try {
+      // If force is true, add cache-busting timestamp to URL
+      if (force) {
+        const cacheBuster = `?t=${Date.now()}`
+        autoUpdater.setFeedURL({
+          provider: "generic",
+          url: `${CDN_BASE}${cacheBuster}`,
+        })
+        log.info("[AutoUpdater] Force check with cache-busting:", `${CDN_BASE}${cacheBuster}`)
+      }
       const result = await autoUpdater.checkForUpdates()
+      // Reset feed URL back to normal after force check
+      if (force) {
+        autoUpdater.setFeedURL({
+          provider: "generic",
+          url: CDN_BASE,
+        })
+      }
       return result?.updateInfo || null
     } catch (error) {
       log.error("[AutoUpdater] Check failed:", error)

src/preload/index.d.ts

@@ -25,7 +25,7 @@ export interface DesktopApi {
   getVersion: () => Promise<string>
 
   // Auto-update
-  checkForUpdates: () => Promise<UpdateInfo | null>
+  checkForUpdates: (force?: boolean) => Promise<UpdateInfo | null>
   downloadUpdate: () => Promise<boolean>
   installUpdate: () => void
   onUpdateChecking: (callback: () => void) => () => void

src/preload/index.ts

@@ -25,7 +25,7 @@ contextBridge.exposeInMainWorld("desktopApi", {
   isPackaged: () => ipcRenderer.invoke("app:isPackaged"),
 
   // Auto-update methods
-  checkForUpdates: () => ipcRenderer.invoke("update:check"),
+  checkForUpdates: (force?: boolean) => ipcRenderer.invoke("update:check", force),
   downloadUpdate: () => ipcRenderer.invoke("update:download"),
   installUpdate: () => ipcRenderer.invoke("update:install"),
 

src/renderer/components/chat-markdown-renderer.tsx

@@ -6,6 +6,7 @@ import remarkGfm from "remark-gfm"
 import { Copy, Check } from "lucide-react"
 import { useCodeTheme } from "../lib/hooks/use-code-theme"
 import { highlightCode } from "../lib/themes/shiki-theme-loader"
+import { MermaidBlock } from "./mermaid-block"
 
 // Function to strip emojis from text (only common emojis, preserving markdown symbols)
 export function stripEmojis(text: string): string {
@@ -246,8 +247,8 @@ const sizeStyles: Record<
 }
 
 // Custom code component that uses our theme system
-function createCodeComponent(codeTheme: string, size: MarkdownSize, styles: typeof sizeStyles.md) {
-  return function CodeComponent({ className, children, ...props }: any) {
+function createCodeComponent(codeTheme: string, size: MarkdownSize, styles: typeof sizeStyles.md, isStreaming: boolean = false) {
+  return function CodeComponent({ className, children, node, ...props }: any) {
     const match = /language-(\w+)/.exec(className || "")
     const language = match ? match[1] : undefined
     const codeContent = String(children)
@@ -257,6 +258,13 @@ function createCodeComponent(codeTheme: string, size: MarkdownSize, styles: type
     const isCodeBlock = language || (codeContent.includes("\n") && codeContent.length > 100)
 
     if (isCodeBlock) {
+      // Route mermaid blocks to MermaidBlock component
+      if (language === "mermaid") {
+        // Pass isStreaming to MermaidBlock
+        // When streaming, MermaidBlock shows a placeholder instead of trying to render
+        return <MermaidBlock code={codeContent.replace(/\n$/, "")} size={size} isStreaming={isStreaming} />
+      }
+
       return (
         <CodeBlock
           language={language}
@@ -403,9 +411,9 @@ export const ChatMarkdownRenderer = memo(function ChatMarkdownRenderer({
         </td>
       ),
       pre: ({ children }: any) => <>{children}</>,
-      code: createCodeComponent(codeTheme, size, styles),
+      code: createCodeComponent(codeTheme, size, styles, isStreaming),
     }),
-    [styles, codeTheme, size],
+    [styles, codeTheme, size, isStreaming],
   )
 
   return (

src/renderer/components/dialogs/agents-settings-dialog.tsx

@@ -536,7 +536,7 @@ export function AgentsSettingsDialog({
                         key={tab.id}
                         tab={tab}
                         isActive={activeTab === tab.id}
-                        onClick={() => setActiveTab(tab.id)}
+                        onClick={() => handleTabClick(tab.id)}
                       />
                     ))}
                   </div>
@@ -551,7 +551,7 @@ export function AgentsSettingsDialog({
                         key={tab.id}
                         tab={tab}
                         isActive={activeTab === tab.id}
-                        onClick={() => setActiveTab(tab.id)}
+                        onClick={() => handleTabClick(tab.id)}
                       />
                     ))}
                   </div>
@@ -568,7 +568,7 @@ export function AgentsSettingsDialog({
                             key={tab.id}
                             tab={tab}
                             isActive={activeTab === tab.id}
-                            onClick={() => setActiveTab(tab.id)}
+                            onClick={() => handleTabClick(tab.id)}
                           />
                         ))}
                       </div>

src/renderer/components/dialogs/settings-tabs/agents-beta-tab.tsx

@@ -16,7 +16,8 @@ import {
   SelectValue,
 } from "../../ui/select"
 import { ExternalLinkIcon } from "../../ui/icons"
-import { Copy, Check } from "lucide-react"
+import { Copy, Check, RefreshCw } from "lucide-react"
+import { Button } from "../../ui/button"
 import { cn } from "../../../lib/utils"
 
 // Hook to detect narrow screen
@@ -46,6 +47,40 @@ export function AgentsBetaTab() {
   const [autoOffline, setAutoOffline] = useAtom(autoOfflineModeAtom)
   const [selectedOllamaModel, setSelectedOllamaModel] = useAtom(selectedOllamaModelAtom)
   const [copied, setCopied] = useState(false)
+  const [updateStatus, setUpdateStatus] = useState<"idle" | "checking" | "available" | "not-available" | "error">("idle")
+  const [updateVersion, setUpdateVersion] = useState<string | null>(null)
+  const [currentVersion, setCurrentVersion] = useState<string | null>(null)
+
+  // Get current version on mount
+  useEffect(() => {
+    window.desktopApi?.getVersion().then(setCurrentVersion)
+  }, [])
+
+  // Check for updates with force flag to bypass cache
+  const handleCheckForUpdates = async () => {
+    // Check if we're in dev mode
+    const isPackaged = await window.desktopApi?.isPackaged?.()
+    if (!isPackaged) {
+      setUpdateStatus("error")
+      console.log("Update check skipped in dev mode")
+      return
+    }
+
+    setUpdateStatus("checking")
+    setUpdateVersion(null)
+    try {
+      const result = await window.desktopApi?.checkForUpdates(true)
+      if (result) {
+        setUpdateStatus("available")
+        setUpdateVersion(result.version)
+      } else {
+        setUpdateStatus("not-available")
+      }
+    } catch (error) {
+      console.error("Failed to check for updates:", error)
+      setUpdateStatus("error")
+    }
+  }
 
   // Get Ollama status
   const { data: ollamaStatus } = trpc.ollama.getStatus.useQuery(undefined, {
@@ -247,6 +282,44 @@ export function AgentsBetaTab() {
           </div>
         </div>
       )}
+
+      {/* Updates Section */}
+      <div className="space-y-2">
+        <div className="pb-2">
+          <h4 className="text-sm font-medium text-foreground">Updates</h4>
+          <p className="text-xs text-muted-foreground mt-1">
+            Check for new versions manually (bypasses CDN cache)
+          </p>
+        </div>
+
+        <div className="bg-background rounded-lg border border-border overflow-hidden">
+          <div className="p-4">
+            <div className="flex items-center justify-between">
+              <div className="flex flex-col space-y-1">
+                <span className="text-sm font-medium text-foreground">
+                  {currentVersion ? `Current: v${currentVersion}` : "Version"}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  {updateStatus === "checking" && "Checking for updates..."}
+                  {updateStatus === "available" && `Update available: v${updateVersion}`}
+                  {updateStatus === "not-available" && "You're on the latest version"}
+                  {updateStatus === "error" && "Failed to check (dev mode?)"}
+                  {updateStatus === "idle" && "Click to check for updates"}
+                </span>
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleCheckForUpdates}
+                disabled={updateStatus === "checking"}
+              >
+                <RefreshCw className={cn("h-4 w-4 mr-2", updateStatus === "checking" && "animate-spin")} />
+                {updateStatus === "checking" ? "Checking..." : "Check Now"}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   )
 }