Release v0.0.60-beta.1

## What's New

### Features
- **Split View** — Side-by-side sub-chats with up to 6 panes for parallel work with AI agents

### Improvements & Fixes
- **Smart file click** — Click files in git activity badges to open them directly
- **Split view polish** — Address various split view review issues

Author: serafimcloud

package.json

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

src/main/lib/claude/transform.ts

@@ -36,6 +36,15 @@ export function createTransformer(options?: { isUsingOllama?: boolean }) {
   let inThinkingBlock = false // Track if we're currently in a thinking block
   let thinkingJsonStarted = false // Track if we've sent the JSON prefix for thinking deltas
 
+  // Track usage from the last main assistant message (exclude sidechain/subagents).
+  // This is used for accurate context window display in final metadata.
+  let lastMainAssistantUsage: {
+    input_tokens: number
+    cache_read_input_tokens: number
+    cache_creation_input_tokens: number
+    output_tokens: number
+  } | null = null
+
   // Helper to create composite toolCallId: "parentId:childId" or just "childId"
   const makeCompositeId = (originalId: string, parentId: string | null): string => {
     if (parentId) return `${parentId}:${originalId}`
@@ -233,6 +242,17 @@ export function createTransformer(options?: { isUsingOllama?: boolean }) {
       }
     }
 
+    // Track per-turn usage from main assistant messages only.
+    // Sidechain/subagent assistant messages have parent_tool_use_id set.
+    if (msg.type === "assistant" && msg.message?.usage && msg.parent_tool_use_id == null) {
+      lastMainAssistantUsage = {
+        input_tokens: msg.message.usage.input_tokens ?? 0,
+        cache_read_input_tokens: msg.message.usage.cache_read_input_tokens ?? 0,
+        cache_creation_input_tokens: msg.message.usage.cache_creation_input_tokens ?? 0,
+        output_tokens: msg.message.usage.output_tokens ?? 0,
+      }
+    }
+
     // ===== ASSISTANT MESSAGE (complete, often with tool_use) =====
     // When streaming is enabled, text arrives via stream_event, not here
     if (msg.type === "assistant" && msg.message?.content) {
@@ -410,51 +430,25 @@ export function createTransformer(options?: { isUsingOllama?: boolean }) {
       yield* endTextBlock()
       yield* endToolInput()
 
-      const inputTokens = msg.usage?.input_tokens
-      const outputTokens = msg.usage?.output_tokens
-
-      // Extract per-model usage from SDK (if available)
-      const modelUsage = msg.modelUsage
-        ? Object.fromEntries(
-            Object.entries(msg.modelUsage).map(([model, usage]: [string, any]) => [
-              model,
-              {
-                inputTokens: usage.inputTokens || 0,
-                outputTokens: usage.outputTokens || 0,
-                cacheReadInputTokens: usage.cacheReadInputTokens || 0,
-                cacheCreationInputTokens: usage.cacheCreationInputTokens || 0,
-                costUSD: usage.costUSD || 0,
-              },
-            ])
-          )
-        : undefined
-
-      // Fallback: if SDK didn't populate msg.usage, derive totals from modelUsage
-      const fallbackInputTokens = msg.modelUsage
-        ? Object.values(msg.modelUsage).reduce(
-            (sum: number, usage: any) => sum + (usage?.inputTokens || 0),
-            0,
-          )
-        : undefined
-      const fallbackOutputTokens = msg.modelUsage
-        ? Object.values(msg.modelUsage).reduce(
-            (sum: number, usage: any) => sum + (usage?.outputTokens || 0),
-            0,
-          )
-        : undefined
-
-      const resolvedInputTokens =
-        inputTokens == null || (inputTokens === 0 && (fallbackInputTokens || 0) > 0)
-          ? fallbackInputTokens
-          : inputTokens
-      const resolvedOutputTokens =
-        outputTokens == null || (outputTokens === 0 && (fallbackOutputTokens || 0) > 0)
-          ? fallbackOutputTokens
-          : outputTokens
+      const resultOutputTokens = msg.usage?.output_tokens
+      const fallbackUsage = {
+        input_tokens: msg.usage?.input_tokens ?? 0,
+        cache_read_input_tokens: msg.usage?.cache_read_input_tokens ?? 0,
+        cache_creation_input_tokens: msg.usage?.cache_creation_input_tokens ?? 0,
+        output_tokens: resultOutputTokens ?? 0,
+      }
+
+      // Prefer the last main assistant usage snapshot for context metrics.
+      // Fallback to result usage when assistant usage is unavailable.
+      const usage = lastMainAssistantUsage ?? fallbackUsage
 
+      const resolvedInputTokens = usage.input_tokens
+      const resolvedOutputTokens = resultOutputTokens ?? usage.output_tokens
       const metadata: MessageMetadata = {
         sessionId: msg.session_id,
         inputTokens: resolvedInputTokens,
+        cacheReadInputTokens: usage.cache_read_input_tokens,
+        cacheCreationInputTokens: usage.cache_creation_input_tokens,
         outputTokens: resolvedOutputTokens,
         totalTokens:
           resolvedInputTokens != null && resolvedOutputTokens != null
@@ -465,8 +459,6 @@ export function createTransformer(options?: { isUsingOllama?: boolean }) {
         resultSubtype: msg.subtype || "success",
         // Include finalTextId for collapsing tools when there's a final response
         finalTextId: lastTextId || undefined,
-        // Per-model usage breakdown
-        modelUsage,
       }
       yield { type: "message-metadata", messageMetadata: metadata }
       yield { type: "finish-step" }

src/main/lib/claude/types.ts

@@ -68,24 +68,16 @@ export type MCPServer = {
   error?: string
 }
 
-export type ModelUsageEntry = {
-  inputTokens: number
-  outputTokens: number
-  cacheReadInputTokens: number
-  cacheCreationInputTokens: number
-  costUSD: number
-}
-
 export type MessageMetadata = {
   sessionId?: string
   sdkMessageUuid?: string // SDK's message UUID for resumeSessionAt (rollback support)
   inputTokens?: number
+  cacheReadInputTokens?: number
+  cacheCreationInputTokens?: number
   outputTokens?: number
   totalTokens?: number
   totalCostUsd?: number
   durationMs?: number
   resultSubtype?: string
   finalTextId?: string
-  // Per-model usage breakdown from SDK (model name -> usage)
-  modelUsage?: Record<string, ModelUsageEntry>
 }

src/main/windows/main.ts

@@ -196,7 +196,7 @@ function registerIpcHandlers(): void {
   })
 
   // New window - optionally open with specific chat/subchat
-  ipcMain.handle("window:new", (_event, options?: { chatId?: string; subChatId?: string }) => {
+  ipcMain.handle("window:new", (_event, options?: { chatId?: string; subChatId?: string; splitPaneIds?: string[] }) => {
     createWindow(options)
   })
 
@@ -562,7 +562,7 @@ function getUseNativeFramePreference(): boolean {
  * @param options.chatId Open this chat in the new window
  * @param options.subChatId Open this sub-chat in the new window
  */
-export function createWindow(options?: { chatId?: string; subChatId?: string }): BrowserWindow {
+export function createWindow(options?: { chatId?: string; subChatId?: string; splitPaneIds?: string[] }): BrowserWindow {
   // Register IPC handlers before creating first window
   registerIpcHandlers()
 
@@ -697,6 +697,7 @@ export function createWindow(options?: { chatId?: string; subChatId?: string }):
       params.set("windowId", windowId)
       if (options?.chatId) params.set("chatId", options.chatId)
       if (options?.subChatId) params.set("subChatId", options.subChatId)
+      if (options?.splitPaneIds) params.set("splitPaneIds", JSON.stringify(options.splitPaneIds))
     }
 
     if (devServerUrl) {

src/preload/index.ts

@@ -107,7 +107,7 @@ contextBridge.exposeInMainWorld("desktopApi", {
   getZoom: () => ipcRenderer.invoke("window:get-zoom"),
 
   // Multi-window
-  newWindow: (options?: { chatId?: string; subChatId?: string }) => ipcRenderer.invoke("window:new", options),
+  newWindow: (options?: { chatId?: string; subChatId?: string; splitPaneIds?: string[] }) => ipcRenderer.invoke("window:new", options),
   setWindowTitle: (title: string) => ipcRenderer.invoke("window:set-title", title),
 
   // DevTools
@@ -307,7 +307,7 @@ export interface DesktopApi {
   zoomReset: () => Promise<void>
   getZoom: () => Promise<number>
   // Multi-window
-  newWindow: (options?: { chatId?: string; subChatId?: string }) => Promise<void>
+  newWindow: (options?: { chatId?: string; subChatId?: string; splitPaneIds?: string[] }) => Promise<void>
   setWindowTitle: (title: string) => Promise<void>
   toggleDevTools: () => Promise<void>
   unlockDevTools: () => Promise<void>

src/renderer/App.tsx

@@ -54,14 +54,17 @@ function AppContent() {
   const setSelectedChatId = useSetAtom(selectedAgentChatIdAtom)
   const { setActiveSubChat, addToOpenSubChats, setChatId } = useAgentSubChatStore()
 
-  // Apply initial window params (chatId/subChatId) when opening via "Open in new window"
+  // Apply initial window params (chatId/subChatId/splitPaneIds) when opening via "Open in new window"
   useEffect(() => {
     const params = getInitialWindowParams()
     if (params.chatId) {
-      console.log("[App] Opening chat from window params:", params.chatId, params.subChatId)
+      console.log("[App] Opening chat from window params:", params.chatId, params.subChatId, params.splitPaneIds)
       setSelectedChatId(params.chatId)
       setChatId(params.chatId)
-      if (params.subChatId) {
+      if (params.splitPaneIds && params.splitPaneIds.length >= 2) {
+        // Open all split panes in the new window
+        useAgentSubChatStore.getState().initSplitFromWindow(params.splitPaneIds)
+      } else if (params.subChatId) {
         addToOpenSubChats(params.subChatId)
         setActiveSubChat(params.subChatId)
       }

src/renderer/contexts/WindowContext.tsx

@@ -68,7 +68,7 @@ export function getWindowId(): string {
  * Get initial window params (chatId, subChatId) passed when opening a new window.
  * These are one-time use - cleared from sessionStorage after first read.
  */
-export function getInitialWindowParams(): { chatId?: string; subChatId?: string } {
+export function getInitialWindowParams(): { chatId?: string; subChatId?: string; splitPaneIds?: string[] } {
   // Check if already consumed
   const consumed = sessionStorage.getItem("windowParamsConsumed")
   if (consumed) return {}
@@ -77,21 +77,29 @@ export function getInitialWindowParams(): { chatId?: string; subChatId?: string
   const urlParams = new URLSearchParams(window.location.search)
   let chatId = urlParams.get("chatId")
   let subChatId = urlParams.get("subChatId")
+  let rawSplitPaneIds = urlParams.get("splitPaneIds")
 
   // Try hash params (production file:// URLs)
   if (!chatId && window.location.hash) {
     const hashParams = new URLSearchParams(window.location.hash.slice(1))
     chatId = hashParams.get("chatId")
     subChatId = hashParams.get("subChatId")
+    rawSplitPaneIds = rawSplitPaneIds || hashParams.get("splitPaneIds")
   }
 
   // Mark as consumed so we don't re-apply on hot reload
   if (chatId || subChatId) {
     sessionStorage.setItem("windowParamsConsumed", "true")
   }
 
+  let splitPaneIds: string[] | undefined
+  if (rawSplitPaneIds) {
+    try { splitPaneIds = JSON.parse(rawSplitPaneIds) } catch {}
+  }
+
   return {
     chatId: chatId || undefined,
     subChatId: subChatId || undefined,
+    splitPaneIds,
   }
 }

src/renderer/features/agents/atoms/index.ts

@@ -378,6 +378,31 @@ export const diffFilesCollapsedAtomFamily = atomFamily((chatId: string) =>
   ),
 )
 
+// Helpers for split view ratio management
+export function getDefaultRatios(n: number): number[] {
+  if (n <= 0) return []
+  return Array(n).fill(1 / n) as number[]
+}
+
+export function addPaneRatio(ratios: number[]): number[] {
+  const n = ratios.length + 1
+  const scale = (n - 1) / n
+  return [...ratios.map(r => r * scale), 1 / n]
+}
+
+export function removePaneRatio(ratios: number[], removeIdx: number): number[] {
+  if (removeIdx < 0 || removeIdx >= ratios.length) return getDefaultRatios(ratios.length)
+  const removed = ratios[removeIdx]!
+  const rest = ratios.filter((_, i) => i !== removeIdx)
+  if (rest.length === 0) return []
+  const sum = rest.reduce((a, b) => a + b, 0)
+  if (sum === 0) return getDefaultRatios(rest.length)
+  const result = rest.map(r => r + (r / sum) * removed)
+  // Normalize to prevent floating-point drift
+  const total = result.reduce((a, b) => a + b, 0)
+  return total > 0 ? result.map(r => r / total) : getDefaultRatios(rest.length)
+}
+
 // Sub-chats display mode - tabs (horizontal) or sidebar (vertical list)
 // Window-scoped so each window can have its own layout preference
 export const agentsSubChatsSidebarModeAtom = atomWithWindowStorage<

src/renderer/features/agents/components/agents-help-popover.tsx

@@ -20,23 +20,31 @@ interface ReleaseHighlight {
   title: string
 }
 
-function parseFirstHighlight(content: string): string {
-  const lines = content.split("\n")
-  let inFeatures = false
+function parseFirstItemFromSection(lines: string[], sectionPattern: RegExp): string | null {
+  let inSection = false
   for (const line of lines) {
-    if (/^###\s+Features/i.test(line)) {
-      inFeatures = true
+    if (sectionPattern.test(line)) {
+      inSection = true
       continue
     }
-    if (inFeatures && /^###?\s+/.test(line)) break
-    if (inFeatures) {
+    if (inSection && /^###?\s+/.test(line)) break
+    if (inSection) {
       const bold = line.match(/^[-*]\s+\*\*(.+?)\*\*/)
       if (bold) return bold[1]
       const plain = line.match(/^[-*]\s+(.+)/)
       if (plain) return plain[1].replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").trim()
     }
   }
-  return "Bug fixes & improvements"
+  return null
+}
+
+function parseFirstHighlight(content: string): string {
+  const lines = content.split("\n")
+  return (
+    parseFirstItemFromSection(lines, /^###\s+Features/i) ??
+    parseFirstItemFromSection(lines, /^###\s+Improvements/i) ??
+    "Bug fixes & improvements"
+  )
 }
 
 interface AgentsHelpPopoverProps {