Release v0.0.60-beta.2

## What's New

### Improvements & Fixes
- **Attachment card styling** — Unified attachment card styling and removed hover cards
- **Split view streaming** — Fixed concurrent streaming interference in split view
- **Notifications** — Fixed notification handling

Author: serafimcloud

package.json

@@ -1,6 +1,6 @@
 {
   "name": "21st-desktop",
-  "version": "0.0.60-beta.1",
+  "version": "0.0.60-beta.2",
   "private": true,
   "description": "1Code - UI for parallel work with AI agents",
   "author": {

src/main/windows/main.ts

@@ -1,5 +1,6 @@
 import {
   BrowserWindow,
+  Notification,
   shell,
   nativeTheme,
   ipcMain,
@@ -100,26 +101,36 @@ function registerIpcHandlers(): void {
     "app:show-notification",
     (event, options: { title: string; body: string }) => {
       try {
-        const { Notification } = require("electron")
-        const iconPath = join(__dirname, "../../../build/icon.ico")
-        const icon = existsSync(iconPath) ? nativeImage.createFromPath(iconPath) : undefined
+        if (!Notification.isSupported()) {
+          console.warn("[Main] Notifications not supported on this system")
+          return
+        }
+
+        // On macOS, the app icon is used automatically — no custom icon needed.
+        // On Windows, use .ico; on Linux, use .png.
+        let icon: Electron.NativeImage | undefined
+        if (process.platform !== "darwin") {
+          const ext = process.platform === "win32" ? "icon.ico" : "icon.png"
+          const iconPath = join(__dirname, "../../build", ext)
+          icon = existsSync(iconPath) ? nativeImage.createFromPath(iconPath) : undefined
+        }
 
         const notification = new Notification({
           title: options.title,
           body: options.body,
-          icon,
+          ...(icon && { icon }),
           ...(process.platform === "win32" && { silent: false }),
         })
 
-        notification.show()
-
         notification.on("click", () => {
           const win = getWindowFromEvent(event)
           if (win) {
             if (win.isMinimized()) win.restore()
             win.focus()
           }
         })
+
+        notification.show()
       } catch (error) {
         console.error("[Main] Failed to show notification:", error)
       }

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

@@ -332,7 +332,6 @@ export function AgentsBetaTab() {
           </p>
         </div>
 
-        {/* Early Access section hidden until beta-mac.yml is published to CDN
         <div className="bg-background rounded-lg border border-border overflow-hidden">
           <div className="flex items-center justify-between p-4">
             <div className="flex flex-col space-y-1">
@@ -378,7 +377,6 @@ export function AgentsBetaTab() {
             </div>
           </div>
         </div>
-        */}
       </div>
     </div>
   )

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

@@ -7,6 +7,7 @@ import {
   defaultAgentModeAtom,
   desktopNotificationsEnabledAtom,
   extendedThinkingEnabledAtom,
+  notifyWhenFocusedAtom,
   soundNotificationsEnabledAtom,
   preferredEditorAtom,
   type AgentMode,
@@ -146,6 +147,7 @@ export function AgentsPreferencesTab() {
   )
   const [soundEnabled, setSoundEnabled] = useAtom(soundNotificationsEnabledAtom)
   const [desktopNotificationsEnabled, setDesktopNotificationsEnabled] = useAtom(desktopNotificationsEnabledAtom)
+  const [notifyWhenFocused, setNotifyWhenFocused] = useAtom(notifyWhenFocusedAtom)
   const [analyticsOptOut, setAnalyticsOptOut] = useAtom(analyticsOptOutAtom)
   const [ctrlTabTarget, setCtrlTabTarget] = useAtom(ctrlTabTargetAtom)
   const [autoAdvanceTarget, setAutoAdvanceTarget] = useAtom(autoAdvanceTargetAtom)
@@ -273,6 +275,21 @@ export function AgentsPreferencesTab() {
           </div>
           <Switch checked={soundEnabled} onCheckedChange={setSoundEnabled} />
         </div>
+        <div className="flex items-center justify-between p-4 border-t border-border">
+          <div className="flex flex-col space-y-1">
+            <span className="text-sm font-medium text-foreground">
+              Notify When Focused
+            </span>
+            <span className="text-xs text-muted-foreground">
+              Show notifications even when the app window is active
+            </span>
+          </div>
+          <Switch
+            checked={notifyWhenFocused}
+            onCheckedChange={setNotifyWhenFocused}
+            disabled={!desktopNotificationsEnabled}
+          />
+        </div>
       </div>
 
       {/* Navigation */}

src/renderer/features/agents/hooks/use-desktop-notifications.ts

@@ -6,7 +6,7 @@
 import { useCallback, useRef, useEffect } from "react"
 import { useAtomValue } from "jotai"
 import { isDesktopApp } from "../../../lib/utils/platform"
-import { desktopNotificationsEnabledAtom } from "../../../lib/atoms"
+import { desktopNotificationsEnabledAtom, notifyWhenFocusedAtom } from "../../../lib/atoms"
 
 // throttle interval to prevent notification spam (ms)
 const NOTIFICATION_THROTTLE_MS = 3000
@@ -30,6 +30,7 @@ export interface NotificationOptions {
 
 export function useDesktopNotifications() {
   const notificationsEnabled = useAtomValue(desktopNotificationsEnabledAtom)
+  const notifyWhenFocused = useAtomValue(notifyWhenFocusedAtom)
 
   // track last notification time to throttle rapid-fire notifications
   const lastNotificationTime = useRef<number>(0)
@@ -98,15 +99,15 @@ export function useDesktopNotifications() {
   }, [notificationsEnabled])
 
   const notifyAgentComplete = useCallback((chatName: string) => {
-    // don't notify if window is focused - user is already watching
-    if (document.hasFocus()) {
+    // Skip if window is focused and user hasn't opted into focused notifications
+    if (!notifyWhenFocused && document.hasFocus()) {
       return
     }
 
     const title = "Agent Complete"
     const body = chatName ? `Finished working on "${chatName}"` : "Agent has completed its task"
     showNotification(title, body, { priority: "complete" })
-  }, [showNotification])
+  }, [showNotification, notifyWhenFocused])
 
   const notifyAgentError = useCallback((errorMessage: string) => {
     // always notify on errors, even if window is focused
@@ -116,26 +117,24 @@ export function useDesktopNotifications() {
   }, [showNotification])
 
   const notifyAgentNeedsInput = useCallback((chatName: string) => {
-    // don't notify if window is focused
-    if (document.hasFocus()) {
+    if (!notifyWhenFocused && document.hasFocus()) {
       return
     }
 
     const title = "Input Required"
     const body = chatName ? `"${chatName}" is waiting for your input` : "Agent is waiting for your input"
     showNotification(title, body, { priority: "input" })
-  }, [showNotification])
+  }, [showNotification, notifyWhenFocused])
 
   const notifyPlanReady = useCallback((chatName: string) => {
-    // don't notify if window is focused
-    if (document.hasFocus()) {
+    if (!notifyWhenFocused && document.hasFocus()) {
       return
     }
 
     const title = "Plan Ready"
     const body = chatName ? `"${chatName}" has a plan ready for approval` : "A plan is ready for your approval"
     showNotification(title, body, { priority: "plan" })
-  }, [showNotification])
+  }, [showNotification, notifyWhenFocused])
 
   const requestPermission = useCallback(async (): Promise<NotificationPermission> => {
     if (isDesktopApp()) {

src/renderer/features/agents/main/active-chat.tsx

@@ -6113,12 +6113,15 @@ Make sure to preserve all functionality from both branches when resolving confli
                   // Ignore audio errors
                 }
               }
-
-              // Show native notification (desktop app, when window not focused)
-              notifyAgentComplete(agentChat?.name || "Agent")
             }
           }
 
+          // Show native notification if not manually aborted
+          // (the hook handles focus/preference checks internally)
+          if (!wasManuallyAborted) {
+            notifyAgentComplete(agentChat?.name || "Agent")
+          }
+
           // Refresh diff stats after agent finishes making changes
           fetchDiffStatsRef.current()
 
@@ -6309,12 +6312,15 @@ Make sure to preserve all functionality from both branches when resolving confli
                   // Ignore audio errors
                 }
               }
-
-              // Show native notification (desktop app, when window not focused)
-              notifyAgentComplete(agentChat?.name || "Agent")
             }
           }
 
+          // Show native notification if not manually aborted
+          // (the hook handles focus/preference checks internally)
+          if (!wasManuallyAborted) {
+            notifyAgentComplete(agentChat?.name || "Agent")
+          }
+
           // Refresh diff stats after agent finishes making changes
           fetchDiffStatsRef.current()
 

src/renderer/features/agents/main/chat-input-area.tsx

@@ -526,6 +526,9 @@ export const ChatInputArea = memo(function ChatInputArea({
     updateMode(getNextMode(subChatMode))
   }, [subChatMode, updateMode])
 
+  // Track narrow width for compact layout (hide labels when < 310px)
+  const [isNarrow, setIsNarrow] = useState(false)
+
   // Voice input state
   const {
     isRecording: isVoiceRecording,
@@ -1041,6 +1044,7 @@ export const ChatInputArea = memo(function ChatInputArea({
           el.style.setProperty("--chat-input-width", `${width}px`)
           parent?.style.setProperty("--chat-input-height", `${height}px`)
           parent?.style.setProperty("--chat-input-width", `${width}px`)
+          setIsNarrow(width < 310)
         })
         observer.observe(el)
       }}
@@ -1067,7 +1071,7 @@ export const ChatInputArea = memo(function ChatInputArea({
               onSubmit={onSend}
               contextItems={
                 images.length > 0 || files.length > 0 || textContexts.length > 0 || (diffTextContexts?.length ?? 0) > 0 || pastedTexts.length > 0 ? (
-                  <div className="flex flex-wrap gap-[6px]">
+                  <div className="flex flex-wrap items-center gap-[6px]">
                     {(() => {
                       // Build allImages array for gallery navigation
                       const allImages = images
@@ -1195,7 +1199,7 @@ export const ChatInputArea = memo(function ChatInputArea({
                         ) : (
                           <AgentIcon className="h-3.5 w-3.5 shrink-0" />
                         )}
-                        <span className="truncate">{subChatMode === "plan" ? "Plan" : "Agent"}</span>
+                        {!isNarrow && <span className="truncate">{subChatMode === "plan" ? "Plan" : "Agent"}</span>}
                         <ChevronDown className="h-3 w-3 shrink-0 opacity-50" />
                       </button>
                     </DropdownMenuTrigger>
@@ -1407,10 +1411,12 @@ export const ChatInputArea = memo(function ChatInputArea({
                               : "hover:text-foreground hover:bg-muted/50",
                           )}
                         >
-                          <ClaudeCodeIcon className="h-3.5 w-3.5 shrink-0" />
+                          {!isNarrow && <ClaudeCodeIcon className="h-3.5 w-3.5 shrink-0" />}
                           <span className="truncate">
                             {hasCustomClaudeConfig ? (
                               "Custom Model"
+                            ) : isNarrow ? (
+                              selectedModel?.name
                             ) : (
                               <>
                                 {selectedModel?.name}{" "}

src/renderer/features/agents/main/isolated-message-group.tsx

@@ -1,15 +1,15 @@
 "use client"
 
-import { memo, useMemo } from "react"
+import { memo, useCallback, useMemo } from "react"
 import { useAtomValue } from "jotai"
 import {
   messageAtomFamily,
   assistantIdsPerChatAtomFamily,
   isLastUserMessagePerChatAtomFamily,
   rollbackTargetPerChatAtomFamily,
-  isStreamingAtom,
   isRollingBackAtom,
 } from "../stores/message-store"
+import { useStreamingStatusStore } from "../stores/streaming-status-store"
 import { MemoizedAssistantMessages } from "./messages-list"
 import { extractTextMentions, TextMentionBlocks, TextMentionBlock } from "../mentions/render-file-mentions"
 import { AgentImageItem } from "../ui/agent-image-item"
@@ -104,7 +104,10 @@ export const IsolatedMessageGroup = memo(function IsolatedMessageGroup({
   const assistantIds = useAtomValue(assistantIdsPerChatAtomFamily(perChatKey))
   const isLastGroup = useAtomValue(isLastUserMessagePerChatAtomFamily(perChatKey))
   const rollbackTargetSdkUuid = useAtomValue(rollbackTargetPerChatAtomFamily(perChatKey))
-  const isStreaming = useAtomValue(isStreamingAtom)
+  const subChatStatus = useStreamingStatusStore(
+    useCallback((s) => s.statuses[subChatId] ?? "ready", [subChatId])
+  )
+  const isStreaming = subChatStatus === "streaming" || subChatStatus === "submitted"
   const isRollingBack = useAtomValue(isRollingBackAtom)
 
   // Show rollback button only when this user turn has a valid rollback target.
@@ -148,7 +151,7 @@ export const IsolatedMessageGroup = memo(function IsolatedMessageGroup({
     <MessageGroupWrapper isLastGroup={isLastGroup}>
       {/* All attachments in one row - NOT sticky (only when there's also text) */}
       {((!isImageOnlyMessage && imageParts.length > 0) || textMentions.length > 0) && (
-        <div className="mb-2 pointer-events-auto flex flex-wrap items-end gap-1.5">
+        <div className="mb-2 pointer-events-auto flex flex-wrap items-center gap-1.5">
           {imageParts.length > 0 && !isImageOnlyMessage && (() => {
             const resolveImgUrl = (img: any) =>
               img.data?.base64Data && img.data?.mediaType

src/renderer/features/agents/main/messages-list.tsx

@@ -5,11 +5,11 @@ import { createContext, memo, useCallback, useContext, useLayoutEffect, useMemo,
 import { showMessageJsonAtom } from "../atoms"
 import { extractTextMentions, TextMentionBlocks } from "../mentions/render-file-mentions"
 import {
-  chatStatusAtom,
   isLastMessageAtomFamily,
-  isStreamingAtom,
+  isLastMessagePerChatAtomFamily,
   messageAtomFamily,
 } from "../stores/message-store"
+import { useStreamingStatusStore } from "../stores/streaming-status-store"
 import { MessageJsonDisplay } from "../ui/message-json-display"
 import { AssistantMessageItem } from "./assistant-message-item"
 
@@ -407,9 +407,11 @@ const StreamingMessageItem = memo(function StreamingMessageItem({
   // Subscribe to this specific message via Jotai - only re-renders when THIS message changes
   const message = useAtomValue(messageAtomFamily(messageId))
 
-  // Subscribe to streaming status
-  const isStreaming = useAtomValue(isStreamingAtom)
-  const status = useAtomValue(chatStatusAtom)
+  // Subscribe to per-subchat streaming status (fixes split view concurrent streaming)
+  const status = useStreamingStatusStore(
+    useCallback((s) => s.statuses[subChatId] ?? "ready", [subChatId])
+  )
+  const isStreaming = status === "streaming" || status === "submitted"
 
   if (!message) return null
 
@@ -484,7 +486,9 @@ export const MessageItemWrapper = memo(function MessageItemWrapper({
 
   // Only subscribe to isLast - NOT to message content!
   // StreamingMessageItem and NonStreamingMessageItem will subscribe to message themselves
-  const isLast = useAtomValue(isLastMessageAtomFamily(messageId))
+  // Use per-subchat atom to avoid cross-pane interference in split view
+  const perChatKey = `${subChatId}:${messageId}`
+  const isLast = useAtomValue(isLastMessagePerChatAtomFamily(perChatKey))
 
   // Only the last message subscribes to streaming status
   if (isLast) {

src/renderer/features/agents/main/new-chat-form.tsx

@@ -1423,7 +1423,7 @@ export function NewChatForm({
   // Context items for images, files, and pasted text files
   const contextItems =
     images.length > 0 || files.length > 0 || pastedTexts.length > 0 ? (
-      <div className="flex flex-wrap gap-[6px]">
+      <div className="flex flex-wrap items-center gap-[6px]">
         {(() => {
           // Build allImages array for gallery navigation
           const allImages = images