Release v0.0.30

## What's New

### Features
- **Custom Slash Commands** — Create your own slash commands with custom prompts
- **Configurable Keyboard Shortcuts** — Customize keyboard shortcuts in Settings
- **Thinking Toggle** — Enable/disable extended thinking from the model selector dropdown
- **Hover-to-Select** — Quick switch dialogs now select items on hover
- **File Stats in Archive** — See file counts in the archive popover

### Improvements & Fixes
- Markdown tables now render correctly (GFM support)
- Fixed newlines being lost in user messages
- Fixed "Send now" not stopping the current stream before sending queued message
- Improved pending question and plan approval indicators
- Fixed diff sidebar issues in dialog and fullscreen modes
- Fixed React 19 ref cleanup error when closing diff sidebar
- Workspace icon setting now respected in archive popover

Author: serafimcloud

package.json

@@ -1,6 +1,6 @@
 {
   "name": "21st-desktop",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "private": true,
   "description": "1Code - UI for parallel work with AI agents",
   "author": {
@@ -35,14 +35,14 @@
     "@anthropic-ai/claude-agent-sdk": "^0.2.12",
     "@git-diff-view/react": "^0.0.35",
     "@git-diff-view/shiki": "^0.0.36",
-    "@radix-ui/react-accordion": "^1.2.11",
-    "@radix-ui/react-alert-dialog": "^1.1.1",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-hover-card": "^1.1.14",
+    "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",
@@ -89,6 +89,7 @@
     "react-icons": "^5.5.0",
     "react-syntax-highlighter": "^16.1.0",
     "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.1",
     "shiki": "^1.24.4",
     "simple-git": "^3.28.0",
     "sonner": "^1.7.1",

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

@@ -1167,28 +1167,50 @@ export const chatsRouter = router({
   /**
    * Get file change stats for workspaces
    * Parses messages from specified sub-chats and aggregates Edit/Write tool calls
-   * REQUIRES openSubChatIds to avoid loading all sub-chats (performance optimization)
+   * Supports two modes:
+   * - openSubChatIds: query specific sub-chats (used by main sidebar)
+   * - chatIds: query all sub-chats for given chats (used by archive popover)
    */
   getFileStats: publicProcedure
-    .input(z.object({ openSubChatIds: z.array(z.string()) }))
+    .input(z.object({
+      openSubChatIds: z.array(z.string()).optional(),
+      chatIds: z.array(z.string()).optional(),
+    }))
     .query(({ input }) => {
     const db = getDatabase()
 
-    // Early return if no sub-chats to check
-    if (input.openSubChatIds.length === 0) {
+    // Early return if nothing to check
+    if ((!input.openSubChatIds || input.openSubChatIds.length === 0) &&
+        (!input.chatIds || input.chatIds.length === 0)) {
       return []
     }
 
-    // Query only the specified sub-chats (VS Code style: load only what's needed)
-    const allChats = db
-      .select({
-        chatId: subChats.chatId,
-        subChatId: subChats.id,
-        messages: subChats.messages,
-      })
-      .from(subChats)
-      .where(inArray(subChats.id, input.openSubChatIds))
-      .all()
+    // Query sub-chats based on input mode
+    let allChats: Array<{ chatId: string | null; subChatId: string; messages: string | null }>
+
+    if (input.chatIds && input.chatIds.length > 0) {
+      // Archive mode: query all sub-chats for given chat IDs
+      allChats = db
+        .select({
+          chatId: subChats.chatId,
+          subChatId: subChats.id,
+          messages: subChats.messages,
+        })
+        .from(subChats)
+        .where(inArray(subChats.chatId, input.chatIds))
+        .all()
+    } else {
+      // Main sidebar mode: query specific sub-chats
+      allChats = db
+        .select({
+          chatId: subChats.chatId,
+          subChatId: subChats.id,
+          messages: subChats.messages,
+        })
+        .from(subChats)
+        .where(inArray(subChats.id, input.openSubChatIds!))
+        .all()
+    }
 
     // Aggregate stats per workspace (chatId)
     const statsMap = new Map<
@@ -1198,6 +1220,7 @@ export const chatsRouter = router({
 
     for (const row of allChats) {
       if (!row.messages || !row.chatId) continue
+      const chatId = row.chatId // TypeScript narrowing
 
       try {
         const messages = JSON.parse(row.messages) as Array<{
@@ -1274,15 +1297,15 @@ export const chatsRouter = router({
         }
 
         // Add to workspace total
-        const existing = statsMap.get(row.chatId) || {
+        const existing = statsMap.get(chatId) || {
           additions: 0,
           deletions: 0,
           fileCount: 0,
         }
         existing.additions += subChatAdditions
         existing.deletions += subChatDeletions
         existing.fileCount += subChatFileCount
-        statsMap.set(row.chatId, existing)
+        statsMap.set(chatId, existing)
       } catch {
         // Skip invalid JSON
       }
@@ -1339,32 +1362,34 @@ export const chatsRouter = router({
 
         // Traverse messages from end to find unapproved ExitPlanMode
         // Logic matches active-chat.tsx hasUnapprovedPlan
-        let hasUnapprovedPlan = false
-
-        for (let i = messages.length - 1; i >= 0; i--) {
-          const msg = messages[i]
-          if (!msg) continue
-
-          // If user message says "Build plan" or "Implement plan" (exact match), plan is already approved
-          if (msg.role === "user") {
-            const textPart = msg.parts?.find((p) => p.type === "text")
-            const text = textPart?.text || ""
-            const normalizedText = text.trim().toLowerCase()
-            if (normalizedText === "implement plan" || normalizedText === "build plan") {
-              break // Plan was approved, stop searching
+        const checkHasUnapprovedPlan = (): boolean => {
+          for (let i = messages.length - 1; i >= 0; i--) {
+            const msg = messages[i]
+            if (!msg) continue
+
+            // If user message says "Build plan" or "Implement plan" (exact match), plan is already approved
+            if (msg.role === "user") {
+              const textPart = msg.parts?.find((p) => p.type === "text")
+              const text = textPart?.text || ""
+              const normalizedText = text.trim().toLowerCase()
+              if (normalizedText === "implement plan" || normalizedText === "build plan") {
+                return false // Plan was approved
+              }
             }
-          }
 
-          // If assistant message with ExitPlanMode, we found an unapproved plan
-          if (msg.role === "assistant" && msg.parts) {
-            const exitPlanPart = msg.parts.find((p) => p.type === "tool-ExitPlanMode")
-            if (exitPlanPart) {
-              hasUnapprovedPlan = true
-              break
+            // If assistant message with ExitPlanMode that has output.plan, we found an unapproved plan
+            if (msg.role === "assistant" && msg.parts) {
+              const exitPlanPart = msg.parts.find((p) => p.type === "tool-ExitPlanMode") as { output?: { plan?: string } } | undefined
+              if (exitPlanPart?.output?.plan) {
+                return true
+              }
             }
           }
+          return false
         }
 
+        const hasUnapprovedPlan = checkHasUnapprovedPlan()
+
         if (hasUnapprovedPlan) {
           pendingApprovals.push({
             subChatId: row.subChatId,

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

@@ -0,0 +1,171 @@
+import { z } from "zod"
+import { router, publicProcedure } from "../index"
+import * as fs from "fs/promises"
+import * as path from "path"
+import * as os from "os"
+import matter from "gray-matter"
+
+interface FileCommand {
+  name: string
+  description: string
+  argumentHint?: string
+  source: "user" | "project"
+  path: string
+}
+
+/**
+ * Parse command .md frontmatter to extract description and argument-hint
+ */
+function parseCommandMd(content: string): {
+  description?: string
+  argumentHint?: string
+} {
+  try {
+    const { data } = matter(content)
+    return {
+      description:
+        typeof data.description === "string" ? data.description : undefined,
+      argumentHint:
+        typeof data["argument-hint"] === "string"
+          ? data["argument-hint"]
+          : undefined,
+    }
+  } catch (err) {
+    console.error("[commands] Failed to parse frontmatter:", err)
+    return {}
+  }
+}
+
+/**
+ * Validate entry name for security (prevent path traversal)
+ */
+function isValidEntryName(name: string): boolean {
+  return !name.includes("..") && !name.includes("/") && !name.includes("\\")
+}
+
+/**
+ * Recursively scan a directory for .md command files
+ * Supports namespaces via nested folders: git/commit.md → git:commit
+ */
+async function scanCommandsDirectory(
+  dir: string,
+  source: "user" | "project",
+  prefix = "",
+): Promise<FileCommand[]> {
+  const commands: FileCommand[] = []
+
+  try {
+    // Check if directory exists
+    try {
+      await fs.access(dir)
+    } catch {
+      return commands
+    }
+
+    const entries = await fs.readdir(dir, { withFileTypes: true })
+
+    for (const entry of entries) {
+      if (!isValidEntryName(entry.name)) {
+        console.warn(`[commands] Skipping invalid entry name: ${entry.name}`)
+        continue
+      }
+
+      const fullPath = path.join(dir, entry.name)
+
+      if (entry.isDirectory()) {
+        // Recursively scan nested directories
+        const nestedCommands = await scanCommandsDirectory(
+          fullPath,
+          source,
+          prefix ? `${prefix}:${entry.name}` : entry.name,
+        )
+        commands.push(...nestedCommands)
+      } else if (entry.isFile() && entry.name.endsWith(".md")) {
+        const baseName = entry.name.replace(/\.md$/, "")
+        const commandName = prefix ? `${prefix}:${baseName}` : baseName
+
+        try {
+          const content = await fs.readFile(fullPath, "utf-8")
+          const parsed = parseCommandMd(content)
+
+          commands.push({
+            name: commandName,
+            description: parsed.description || "",
+            argumentHint: parsed.argumentHint,
+            source,
+            path: fullPath,
+          })
+        } catch (err) {
+          console.warn(`[commands] Failed to read ${fullPath}:`, err)
+        }
+      }
+    }
+  } catch (err) {
+    console.error(`[commands] Failed to scan directory ${dir}:`, err)
+  }
+
+  return commands
+}
+
+export const commandsRouter = router({
+  /**
+   * List all commands from filesystem
+   * - User commands: ~/.claude/commands/
+   * - Project commands: .claude/commands/ (relative to projectPath)
+   */
+  list: publicProcedure
+    .input(
+      z
+        .object({
+          projectPath: z.string().optional(),
+        })
+        .optional(),
+    )
+    .query(async ({ input }) => {
+      const userCommandsDir = path.join(os.homedir(), ".claude", "commands")
+      const userCommandsPromise = scanCommandsDirectory(userCommandsDir, "user")
+
+      let projectCommandsPromise = Promise.resolve<FileCommand[]>([])
+      if (input?.projectPath) {
+        const projectCommandsDir = path.join(
+          input.projectPath,
+          ".claude",
+          "commands",
+        )
+        projectCommandsPromise = scanCommandsDirectory(
+          projectCommandsDir,
+          "project",
+        )
+      }
+
+      // Scan both directories in parallel
+      const [userCommands, projectCommands] = await Promise.all([
+        userCommandsPromise,
+        projectCommandsPromise,
+      ])
+
+      // Project commands first (more specific), then user commands
+      return [...projectCommands, ...userCommands]
+    }),
+
+  /**
+   * Get content of a specific command file (without frontmatter)
+   */
+  getContent: publicProcedure
+    .input(z.object({ path: z.string() }))
+    .query(async ({ input }) => {
+      // Security: prevent path traversal
+      if (input.path.includes("..")) {
+        throw new Error("Invalid path")
+      }
+
+      try {
+        const content = await fs.readFile(input.path, "utf-8")
+        const { content: body } = matter(content)
+        return { content: body.trim() }
+      } catch (err) {
+        console.error(`[commands] Failed to read command content:`, err)
+        return { content: "" }
+      }
+    }),
+})

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

@@ -11,6 +11,7 @@ import { debugRouter } from "./debug"
 import { skillsRouter } from "./skills"
 import { agentsRouter } from "./agents"
 import { worktreeConfigRouter } from "./worktree-config"
+import { commandsRouter } from "./commands"
 import { createGitRouter } from "../../git"
 import { BrowserWindow } from "electron"
 
@@ -32,6 +33,7 @@ export function createAppRouter(getWindow: () => BrowserWindow | null) {
     skills: skillsRouter,
     agents: agentsRouter,
     worktreeConfig: worktreeConfigRouter,
+    commands: commandsRouter,
     // Git operations - named "changes" to match Superset API
     changes: createGitRouter(),
   })

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

@@ -2,6 +2,7 @@ import { cn } from "../lib/utils"
 import { memo, useState, useCallback, useEffect, useMemo } from "react"
 import { Streamdown, parseMarkdownIntoBlocks } from "streamdown"
 import remarkBreaks from "remark-breaks"
+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"
@@ -436,7 +437,7 @@ export const ChatMarkdownRenderer = memo(function ChatMarkdownRenderer({
       <Streamdown
         mode="streaming"
         components={components}
-        remarkPlugins={[remarkBreaks]}
+        remarkPlugins={[remarkGfm, remarkBreaks]}
         isAnimating={isStreaming}
         parseIncompleteMarkdown={isStreaming}
         controls={false}
@@ -675,7 +676,7 @@ const MemoizedMarkdownBlock = memo(
       <Streamdown
         mode="static"
         components={components}
-        remarkPlugins={[remarkBreaks]}
+        remarkPlugins={[remarkGfm, remarkBreaks]}
         controls={false}
       >
         {content}