Release v0.0.52

## What's New

### Features
- **File Viewer Sidebar** — Monaco Editor-powered file viewer with theme support, custom context menu, and find widget
- **Cmd+P File Search** — Quick file search dialog with recently opened files
- **Terminal Display Modes** — Switch between sidebar and bottom panel terminal layout
- **AGENTS.md Support** — Project-level instructions via AGENTS.md files
- **Task Tools in Sidebar** — Show task tools in details sidebar todo widget

### Improvements & Fixes
- **Reply to Wrong Sub-Chat Fix** — Fixed pending messages being sent to inactive sub-chat tab — thanks @jjjrmy! (#127)
- **Project-Level Skills Discovery** — Pass project path to skills and agents queries — thanks @amal-irgashev! (#132)
- **Relative Paths in Tools** — Show relative paths instead of absolute in tool UI
- **Attachments Layout** — Render all attachment blocks in a single row above message bubble
- **Any File Attachments** — Allow attaching any file type in chat
- **Cmd+J Terminal Toggle** — Toggle terminal with keyboard shortcut
- **Rollback Fix** — Handle checkpoint not found gracefully
- **Multi-Account Fix** — Stop deleting active account when adding new one
- **File Icons** — Added icons for .gitignore, .npmrc, .prettierrc, and .txt files
- **Sub Agent Labels** — Renamed Task tool display labels to Sub agent

Author: serafimcloud

README.md

@@ -19,7 +19,7 @@ By [21st.dev](https://21st.dev) team
 | **Integrated Terminal** | ✅ | ❌ |
 | **Plan Mode** | ✅ | ✅ |
 | **MCP Support** | ✅ | ✅ |
-| **Memory (CLAUDE.md & AGENTS.md)** | ✅ | ✅ |
+| **Memory (CLAUDE.md)** | ✅ | ✅ |
 | **Skills & Slash Commands** | ✅ | ✅ |
 | **Custom Subagents** | ✅ | ✅ |
 | **Subscription & API Key Support** | ✅ | ✅ |

bun.lockb

@@ -1,6 +1,6 @@
 {
   "name": "21st-desktop",
-  "version": "0.0.51",
+  "version": "0.0.52",
   "private": true,
   "description": "1Code - UI for parallel work with AI agents",
   "author": {
@@ -37,6 +37,7 @@
     "@git-diff-view/react": "^0.0.35",
     "@git-diff-view/shiki": "^0.0.36",
     "@modelcontextprotocol/sdk": "^1.25.3",
+    "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-checkbox": "^1.3.3",
@@ -82,6 +83,7 @@
     "jsonc-parser": "^3.3.1",
     "lucide-react": "^0.468.0",
     "mermaid": "^11.12.2",
+    "monaco-editor": "^0.55.1",
     "motion": "^11.15.0",
     "next-themes": "^0.4.4",
     "node-pty": "^1.1.0",
@@ -92,7 +94,6 @@
     "react-dom": "19.2.1",
     "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",
@@ -116,7 +117,6 @@
     "@types/node": "^20.17.50",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
-    "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^4.3.4",
     "@welldone-software/why-did-you-render": "^10.0.1",
     "autoprefixer": "^10.4.20",

package.json

@@ -1,8 +1,10 @@
 import { z } from "zod"
 import { router, publicProcedure } from "../index"
 import { readdir, stat, readFile, writeFile, mkdir } from "node:fs/promises"
-import { join, relative, basename } from "node:path"
+import { join, relative, basename, extname } from "node:path"
 import { app } from "electron"
+import { watch } from "node:fs"
+import { observable } from "@trpc/server/observable"
 
 // Directories to ignore when scanning
 const IGNORED_DIRS = new Set([
@@ -280,6 +282,109 @@ export const filesRouter = router({
       }
     }),
 
+  /**
+   * Read a text file with size/binary validation
+   * Returns structured result with error reasons
+   */
+  readTextFile: publicProcedure
+    .input(z.object({ filePath: z.string() }))
+    .query(async ({ input }) => {
+      const { filePath } = input
+      const MAX_SIZE = 2 * 1024 * 1024 // 2 MB
+
+      try {
+        const fileStat = await stat(filePath)
+
+        if (fileStat.size > MAX_SIZE) {
+          return { ok: false as const, reason: "too-large" as const, byteLength: fileStat.size }
+        }
+
+        const buffer = await readFile(filePath)
+
+        // Check if binary by looking for null bytes in first 8KB
+        const sample = buffer.subarray(0, 8192)
+        if (sample.includes(0)) {
+          return { ok: false as const, reason: "binary" as const, byteLength: fileStat.size }
+        }
+
+        const content = buffer.toString("utf-8")
+        return { ok: true as const, content, byteLength: fileStat.size }
+      } catch (error) {
+        const msg = error instanceof Error ? error.message : "Unknown error"
+        if (msg.includes("ENOENT") || msg.includes("no such file")) {
+          return { ok: false as const, reason: "not-found" as const, byteLength: 0 }
+        }
+        throw new Error(`Failed to read file: ${msg}`)
+      }
+    }),
+
+  /**
+   * Read a binary file as base64 (for images)
+   */
+  readBinaryFile: publicProcedure
+    .input(z.object({ filePath: z.string() }))
+    .query(async ({ input }) => {
+      const { filePath } = input
+      const MAX_SIZE = 20 * 1024 * 1024 // 20 MB
+
+      try {
+        const fileStat = await stat(filePath)
+
+        if (fileStat.size > MAX_SIZE) {
+          return { ok: false as const, reason: "too-large" as const, byteLength: fileStat.size }
+        }
+
+        const buffer = await readFile(filePath)
+        const ext = extname(filePath).toLowerCase()
+
+        // Determine MIME type
+        const mimeMap: Record<string, string> = {
+          ".png": "image/png",
+          ".jpg": "image/jpeg",
+          ".jpeg": "image/jpeg",
+          ".gif": "image/gif",
+          ".svg": "image/svg+xml",
+          ".webp": "image/webp",
+          ".ico": "image/x-icon",
+          ".bmp": "image/bmp",
+        }
+        const mimeType = mimeMap[ext] || "application/octet-stream"
+
+        return {
+          ok: true as const,
+          data: buffer.toString("base64"),
+          mimeType,
+          byteLength: fileStat.size,
+        }
+      } catch (error) {
+        const msg = error instanceof Error ? error.message : "Unknown error"
+        if (msg.includes("ENOENT") || msg.includes("no such file")) {
+          return { ok: false as const, reason: "not-found" as const, byteLength: 0 }
+        }
+        throw new Error(`Failed to read binary file: ${msg}`)
+      }
+    }),
+
+  /**
+   * Watch for file changes in a project directory
+   * Emits events when files are modified
+   */
+  watchChanges: publicProcedure
+    .input(z.object({ projectPath: z.string() }))
+    .subscription(({ input }) => {
+      return observable<{ filename: string; eventType: string }>((emit) => {
+        const watcher = watch(input.projectPath, { recursive: true }, (eventType, filename) => {
+          if (filename) {
+            emit.next({ filename, eventType })
+          }
+        })
+
+        return () => {
+          watcher.close()
+        }
+      })
+    }),
+
   /**
    * Write pasted text to a file in the session's pasted directory
    * Used for large text pastes that shouldn't be embedded inline

src/main/lib/trpc/routers/files.ts

@@ -0,0 +1,62 @@
+import { Component, type ReactNode } from "react"
+import { AlertCircle } from "lucide-react"
+import { Button } from "./button"
+
+interface ErrorBoundaryProps {
+  children: ReactNode
+  viewerType?: string
+  onReset?: () => void
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean
+  error: Error | null
+}
+
+export class ViewerErrorBoundary extends Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props)
+    this.state = { hasError: false, error: null }
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error(
+      `[ViewerErrorBoundary] ${this.props.viewerType || "viewer"} crashed:`,
+      error,
+      errorInfo,
+    )
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: null })
+    this.props.onReset?.()
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex flex-col items-center justify-center h-full gap-3 p-4 text-center">
+          <AlertCircle className="h-10 w-10 text-muted-foreground" />
+          <p className="font-medium text-foreground">
+            Failed to render {this.props.viewerType || "file"}
+          </p>
+          <p className="text-sm text-muted-foreground max-w-[300px]">
+            {this.state.error?.message || "An unexpected error occurred."}
+          </p>
+          <Button variant="outline" size="sm" onClick={this.handleReset}>
+            Try again
+          </Button>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}

src/renderer/components/ui/error-boundary.tsx

@@ -5681,6 +5681,26 @@ export function IconFullPage(props: IconProps) {
   )
 }
 
+export function IconBottomPanel(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24" {...props}>
+      <path fillRule="evenodd" clipRule="evenodd" d="M8.72505 3H14.2749C15.4129 2.99999 16.3307 2.99998 17.074 3.06071C17.8394 3.12324 18.5116 3.25534 19.1335 3.57222C20.1213 4.07555 20.9245 4.8787 21.4278 5.86655C21.7446 6.48846 21.8767 7.16066 21.9393 7.92595C22 8.66921 22 9.58706 22 10.7251V14.1749C22 15.3129 22 16.2308 21.9393 16.974C21.8767 17.7394 21.7446 18.4116 21.4278 19.0335C20.9245 20.0213 20.1213 20.8245 19.1335 21.3277C18.5116 21.6446 17.8394 21.7767 17.074 21.8393C16.3308 21.9 15.4129 21.9 14.2749 21.9H8.72503C7.58706 21.9 6.66921 21.9 5.92595 21.8393C5.16066 21.7767 4.48846 21.6446 3.86655 21.3277C2.8787 20.8245 2.07555 20.0213 1.57222 19.0335C1.25534 18.4116 1.12324 17.7394 1.06071 16.974C0.999979 16.2307 0.99999 15.3129 1 14.1749V10.7251C0.99999 9.58708 0.999979 8.66922 1.06071 7.92595C1.12324 7.16066 1.25534 6.48846 1.57222 5.86655C2.07555 4.8787 2.8787 4.07555 3.86655 3.57222C4.48846 3.25534 5.16066 3.12324 5.92595 3.06071C6.66922 2.99998 7.58708 2.99999 8.72505 3ZM6.09695 5.15374C5.46152 5.20565 5.09645 5.30243 4.81993 5.44333C4.22722 5.74533 3.74533 6.22722 3.44333 6.81993C3.30243 7.09645 3.20565 7.46152 3.15374 8.09695C3.10082 8.74463 3.1 9.57656 3.1 10.77V14.13C3.1 15.3234 3.10082 16.1553 3.15374 16.8031C3.20565 17.4384 3.30243 17.8035 3.44333 18.0801C3.74533 18.6728 4.22722 19.1547 4.81993 19.4566C5.09645 19.5976 5.46152 19.6944 6.09695 19.7462C6.74464 19.7992 7.57656 19.8 8.77 19.8H14.23C15.4234 19.8 16.2553 19.7992 16.9031 19.7462C17.5384 19.6944 17.9035 19.5976 18.1801 19.4566C18.7728 19.1547 19.2547 18.6728 19.5567 18.0801C19.6976 17.8035 19.7944 17.4384 19.8462 16.8031C19.8992 16.1553 19.9 15.3234 19.9 14.13V10.77C19.9 9.57656 19.8992 8.74463 19.8462 8.09695C19.7944 7.46152 19.6976 7.09645 19.5567 6.81993C19.2547 6.22722 18.7728 5.74533 18.1801 5.44333C17.9035 5.30243 17.5384 5.20565 16.9031 5.15374C16.2553 5.10082 15.4234 5.1 14.23 5.1H8.77C7.57656 5.1 6.74464 5.10082 6.09695 5.15374Z" />
+      <path d="M16.7783 11.501C17.3447 11.5164 17.7987 11.9797 17.7988 12.5498V16.6504C17.7987 17.2302 17.3289 17.7002 16.749 17.7002C16.706 17.7002 16.6637 17.6964 16.6221 17.6914H6.65625C6.6131 17.6968 6.56903 17.7002 6.52441 17.7002C5.94462 17.7001 5.47466 17.2302 5.47461 16.6504V12.5498C5.47471 11.9868 5.91799 11.5281 6.47461 11.502V11.5H16.7783V11.501Z" />
+    </svg>
+  )
+}
+
+export function IconLineNumbers(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" width="24" height="24" {...props}>
+      <path d="M12 17H20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M12 7H20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M6 9.5V4.5L4 5.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M4.25 15C4.25 15 4.9 14.5 5.61102 14.5C6.37813 14.5 7 15.1219 7 15.889C7 17.6885 4 18 4 19.5H7.25" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+}
+
 export function AIPenIcon(props: IconProps) {
   return (
     <svg