QOL: Add Automatic Code Block & Syntax Highlighting In Chat Input #128

jjjrmy · 2026-01-29T00:00:22Z

Summary

Detect pasted code automatically (via IDE clipboard detection, language-specific patterns, and structural analysis) and render it as a styled, non-editable code block in the chat input
Syntax-highlight code blocks using Shiki in the input editor, sent message bubbles, and full message modal
Support user-typed fenced code blocks (```lang) — including consuming an opening fence when code is pasted after it
Dynamically load Shiki languages on demand so any supported language highlights without pre-bundling

Details

New file: parse-user-code-blocks.ts

parseCodeBlocks() / hasCodeBlocks() — split text by triple-backtick fences into typed segments
detectLanguage() — identify 20+ languages (PHP, TypeScript, Python, Java, C#, Ruby, Go, Rust, SQL, etc.) from text patterns
looksLikeCode() — two-pass detection: language-specific patterns then structural analysis (indentation, line endings, special char density, balanced delimiters)

Editor (agents-mentions-editor.tsx)

createCodeBlockNode() — creates a contenteditable=false block with language header, remove button, and async Shiki highlighting
Fixed serialization ordering: data-code-block is now checked before the generic <div> handler in serializeContent(), which was causing backtick fences to be lost
Debounced code block detection on input (converts typed ```lang...``` into styled blocks)
Extracted skipSubtree() helper for TreeWalker traversal
Code blocks re-highlight on theme change via onThemeChange subscription

Paste handling (paste-text.ts)

isPastedFromCodeEditor() — detects VS Code, IntelliJ, etc. via clipboard HTML (monospace fonts, colored spans)
consumeOpenFence() — if the user typed ```php before pasting, consumes the fence and uses its language
insertCodeBlockAtCursor() — extracted helper for code block DOM insertion (was duplicated 3x)
Paste priority: opening fence > fenced blocks in pasted text > IDE clipboard detection > heuristic code detection > plain text

Sent message rendering (render-file-mentions.tsx)

UserCodeBlock component — read-only Shiki-highlighted code block for sent messages, re-highlights on theme toggle
RenderUserContent — wraps RenderFileMentions, splits text by fenced code blocks and renders UserCodeBlock for code segments

Bug fixes

Fixed extractTextMentions() stripping code indentation (removed per-line .trim())
Fixed RenderUserContent wrapper from <span> to <div> (code blocks are block-level elements)
Dynamic language loading in shiki-theme-loader.ts — languages not in the initial bundle load on demand

Test plan

Open source release of 1Code - Best UI for Claude Code with Local and Remote agent execution. Apache License 2.0

## What's New in v0.0.11 ### Changes - Renamed app from Agents to 1Code - Fixed appId to dev.21st.agents for auto-update compatibility - Prevent todo list flickering and improve streaming UX - Handle stale lock files from crashed instances - Show Open PR button when no uncommitted changes - Improved auto-update UX

## What's New in v0.0.12 ### Features - Drafts section in sidebar with preview and delete functionality - Interrupted state for tools - shows "{toolName} interrupted" when stopping agent with ESC - Tooltip with full file path when hovering over truncated filenames - "See what's new" banner after app updates with link to changelog ### Improvements & Fixes - Fixed sub-chat renaming not persisting to database - Fixed editor focus after drag & drop image insertion - Pending questions now bound to specific sub-chat (no longer appear in wrong chat) - Fixed duplicate text in todo tool when status is in_progress - Renamed "Premium support" button to "Feedback" - Performance optimizations for pending questions

## What's New in v0.0.16 ### Improvements & Fixes - Fixed authentication redirect URL for packaged app - Fixed sidebar workspace timestamps updating on message send - Exclude session/plan files from changed files status bar - Reduced stop button icon size in send button

Adds ability to clone repos directly from GitHub by entering a URL or owner/repo format. Repos are stored in userData/repos/{owner}/{repo}. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Stores cloned repos alongside worktrees for consistency. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Shows "Clone from GitHub" button alongside "Select folder" during first-time setup. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

## What's New in v0.0.18 ### Improvements & Fixes - Fixed sidebar flickering when switching between chats

## What's New ### Features - Added Cmd+Enter shortcut for "Implement plan" button - Improved archive popover: auto-unarchive on selection, input clears on revisit ### Fixes - Fixed sidebar flickering when switching between chats

## What's New ### Features - Added Cmd+Enter shortcut for "Implement plan" button - Improved archive popover: auto-unarchive on selection, input clears on revisit

Fixing 21st-dev#18 21st-dev#18

## What's New ### Fixes - Fixed z-index layering for sticky user message bubble - Removed MCP servers indicator from header

Prevent message submission during IME composition (Chinese/Japanese/Korean input). Users can now use Enter to confirm IME candidate selection without triggering message send. Added isComposing check to both AgentsMentionsEditor and PromptInputTextarea components. Changes: - agents-mentions-editor.tsx: Add !e.nativeEvent.isComposing check - prompt-input.tsx: Add !e.nativeEvent.isComposing check

## What's New ### Fixes - Fixed scroll behavior: users can now scroll up freely during streaming - Fixed input lag by deferring trigger detection to next frame

Add animated GIF demos for key features: - Worktree isolation and background agent execution - Cursor-like UI with diff previews and git client - Plan mode with clarifying questions and structured plans Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Fix IME composition issue with Enter key

Add animated GIF demos for key features: - Worktree isolation and background agent execution - Cursor-like UI with diff previews and git client - Plan mode with clarifying questions and structured plans Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Move GIF assets to root assets/ directory and update paths in README. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Ref 21st-dev#36

## What's New ### Fixes - Fixed scroll behavior: users can now scroll up freely during streaming - Fixed input lag by deferring trigger detection to next frame - Fixed tool display state during streaming

## What's New ### Features - Added scroll-to-bottom button with Cmd+↓ hotkey - Archive now kills terminal processes and deletes worktree ### Fixes - Fixed excessive re-renders in sidebar during scroll - Restored copy and play buttons for AI messages - ESC now skips AskQuestion instead of stopping stream - Show full command in collapsed tool view - Fixed tool display state during streaming

Update download URL to include binary name

fix: Add author email in package.json for .deb package generation

Add clone from GitHub feature

* feat: human-readable worktree folder names Replace cryptic base36 IDs with readable names for worktree directories: - Worktree folders now use adjective-landscape pattern (e.g., "golden-meadow") - Project folders now use the sanitized project name (e.g., "lumpos-saas") Before: ~/.21st/worktrees/mksuo7x8o4j231wz/mkt3o6tuipqprfwl/ After: ~/.21st/worktrees/lumpos-saas/golden-meadow/ Backward compatible: existing worktrees continue to work via dual-lookup strategy in resolveProjectPathFromWorktree(). Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * fix: address PR review feedback - Add short projectId suffix to sanitized project names to prevent slug collisions (e.g., "My Project" and "my_project" now produce distinct folder names like "my-project-abc123" vs "my-project-def456") - Truncate sanitized project names to 50 chars to avoid filesystem path length limits - Add database index on chats.worktree_path for faster lookups in resolveProjectPathFromWorktree() - Document TOCTOU race condition as acceptable (180k combinations, git worktree add fails atomically on collision) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * fix: remove projectId suffix from project folder names Slug collisions (e.g., "My Project" and "my_project" → "my-project") are safe because resolveProjectPathFromWorktree() resolves via the full chats.worktreePath (unique per chat), not the project folder name alone. Keeps the 50-char truncation for filesystem safety. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

## What's New ### Features - **Multi-Window Support** — Open chats in new windows via context menu - **VS Code Theme Import** — Import themes from VS Code, Cursor, and Windsurf - **Human-Readable Worktree Names** — Worktree folders now have readable names ### Improvements & Fixes - **Window-Scoped Sidebars** — Sub-chat and details sidebars are now per-window - **Image Drops** — Handle image drops as attachments, not file mentions - **Plan Refetch** — Fixed plan refetch trigger with subChatId

## What's New ### Features - **Kanban Board View** — New Kanban board view for managing workspaces - **Voice Input** — Voice dictation with OpenAI Whisper API - **Extensible Mention Providers** — Add custom mention providers for @ mentions - **Custom Hotkeys in Context Menus** — Your keyboard shortcuts now show in context menus ### Improvements & Fixes - **Kanban UI** — Smaller, centered columns for better layout - **Plan Indicator** — Removed PlanIcon from plan update status indicator - **Kanban Settings** — Hide Kanban hotkey in settings when feature is disabled

…v#93) When typing a command prefix, suggestions now appear sorted by name length (shortest first). This makes the closest match appear first. Example: typing "ape" now shows "/apex" before "/apex-analyze". Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

…1st-dev#102) Co-authored-by: Jeremy Holstein <jjjrmy@gmail.com>

- Add right-click context menu for terminal with copy/paste support - If text is selected: copies to clipboard and shows toast notification - If no selection: pastes from clipboard - Fix Ctrl+V paste by intercepting the key to prevent xterm showing ^v and letting Electron's menu paste role handle it via paste event - Works on both Windows and macOS Co-authored-by: Claude <noreply@anthropic.com>

…t-dev#100) Prevent SQLite migration crash on startup. `0005_marvelous_master_chief.sql` may run `ALTER TABLE sub_chats DROP COLUMN ...` on DBs where these columns never existed, causing `SQLITE_ERROR: no such column` and aborting migrations. Remove the unsafe DROP COLUMN statements (keep index creation). Related: 15ee551 (PR 21st-dev#87) - https://github.com/paul-bouzian/1code/blob/15ee55107f3eefbf012fb9754484f987b9fbf399/drizzle/0005_marvelous_master_chief.sql#L1-L4 - https://github.com/paul-bouzian/1code/blob/15ee55107f3eefbf012fb9754484f987b9fbf399/drizzle/meta/_journal.json#L40-L46

@serafimcloud

…1st-dev#80) * feat: add platform provider abstraction for cross-platform support Introduce a platform provider pattern to centralize all platform-specific logic (Windows, macOS, Linux) in one place. This fixes Windows shell command execution issues and improves maintainability. Changes: - Add platform provider interface and implementations for Windows, macOS, Linux - Refactor cli.ts to use platform provider for CLI installation - Refactor terminal/env.ts to use platform provider for shell detection - Refactor claude/env.ts to use platform provider for environment building - Refactor claude-token.ts to use platform provider for PATH extension - Fix path separator issues (use path.basename instead of split('/')) The platform provider handles: - Shell configuration and detection - PATH building with common tool locations - Environment variable setup - CLI installation/uninstallation - Locale detection Co-Authored-By: Claude <noreply@anthropic.com> * fix: address PR review feedback Based on PR 21st-dev#80 review by @serafimcloud: 1. Windows PATH limitation (Critical): - Remove `setx PATH` which has 1024 char limit and can truncate PATH - CLI install dir is already in buildExtendedPath() for app usage - Return pathHint for users who want terminal access 2. Variable shadowing (Critical): - Rename `path` to `filePath` in chats.ts to avoid shadowing the imported `path` module 3. Electron coupling (Medium): - Remove unused `app` import from windows.ts - Remove unused `exec`, `promisify`, `lstatSync` imports 4. execCommand consistency (Low): - Add documentation explaining execCommand is for simple commands - Complex shell commands (osascript, pipes) may use exec directly Co-Authored-By: Claude <noreply@anthropic.com> * fix(windows): install CLI to ~/.local/bin instead of %LOCALAPPDATA% - Install to ~/.local/bin which is already in buildExtendedPath() - Avoids needing to modify system PATH or prompt user - App can find CLI automatically via extended PATH - Users with ~/.local/bin in their PATH can use it from terminal too Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>

@serafimcloud

## What's New ### Features - **Multi-Account Support** — Switch between multiple Anthropic accounts - **Remote Sandbox Chats** — Full support for remote sandbox chats - **Default Agent Mode** — Set default agent mode preference with per-chat mode isolation — thanks @serafimcloud! (21st-dev#102) - **Batch Discard** — Multi-select files for batch discard in changes view - **Terminal Copy/Paste** — Improved terminal copy/paste support on Windows — thanks @ChrisPei! (21st-dev#91) ### Improvements & Fixes - **Command Autocomplete** — Sort by name length for better UX — thanks @paul-bouzian! (21st-dev#93) - **SQLite Migration Fix** — Prevent crash on sub_chats drop column — thanks @a3my! (21st-dev#100) - **Cross-Platform Support** — Add platform provider abstraction — thanks @ChrisPei! (21st-dev#80) - **Theme Selector** — Add scroll and max-height to dropdown - **Kanban View** — Various fixes and improvements

## What's New ### Improvements & Fixes - **Chat Stability** — Improved chat remounting and migration idempotency - **Selected Text Indicator** — Show "Using selected text" bubble for pasted text attachments - **UI Polish** — Updated spinner icons and selectors to match desktop style

## What's New ### Improvements & Fixes - **MCP Cache Fix** — Fixed MCP caching issues - **Tool UI Polish** — Improved expand button spacing in bash/edit tools - **Onboarding Cleanup** — Removed welcome dialog and streamlined sidebar

## What's New ### Bug Fixes - **Startup Crash Fix** — Fixed "Cannot find module async-mutex" error that prevented app from launching

## What's New ### Features - **Copy Plan** — Copy plan content to clipboard - **Raw Plan View** — View raw markdown of implementation plans ### Improvements & Fixes - **New Subchat Button** — Fixed blocked state for add subchat button - **Message Store** — Include meta in message store state - **Community PRs** — Merged community contributions (21st-dev#117, 21st-dev#118)

FIX: Reply Sends To Wrong Sub-Chat In Multi-Chat Workspace

jjjrmy · 2026-01-29T00:00:43Z

@jjjrmy

## What's New ### Features - **Automations & Inbox** — New automations and inbox pages (beta — enable in Settings → Beta) - **Open in Editor** — Open worktree workspaces directly in your code editor ### Improvements & Fixes - **Expired Questions UX** — Keep expired AskUserQuestion visible and send answers as messages — thanks @jjjrmy! (21st-dev#121) - **Default Model Fix** — Fixed chat UI disabled state when creating new chat with wrong default model

@jjjrmy

## What's New ### Features - **Open Automations in Browser** — Automations now open in browser with external link icon ### Improvements & Fixes - **Send Now Fix** — Fixed queued messages being lost when clicking "Send Now" during streaming — thanks @jjjrmy! (21st-dev#126) - **Symlinks in Skills** — Fixed symlink handling in skills - **Compact Commands** — Improved compact command display - **Plan Text Fix** — Fixed build plan text rendering

…t-dev#141) The "viewed" file tracking (GitHub-style eye icon) was showing inconsistent state across different UI panels during a session. agent-diff-view checked content hashes to detect changes, but changes-view and changes-widget only checked the boolean flag, causing files to appear as "viewed" even after their content changed. Two fixes: 1. agent-diff-view now proactively invalidates stale viewed entries in the shared atom when it detects content hash mismatches, so all consumers see the correct state 2. changes-widget now uses the exact diff key from ParsedDiffFile instead of guessing possible key formats from the file path Co-authored-by: Claude <noreply@anthropic.com>

…ng new one (21st-dev#135) The "Add Account" button was calling `disconnect()` which deleted the currently active account before opening the onboarding flow. This caused new accounts to overwrite previous ones instead of storing both. Now the Add button simply opens the onboarding dialog without disconnecting, allowing users to add multiple accounts that are properly stored. Fixes ENG-587 Co-authored-by: Claude <claude@anthropic.com> Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

…ab (21st-dev#140) The pendingPrMessage, pendingReviewMessage, and pendingConflictMessage atoms are global and shared across all ChatViewInner instances. When multiple sub-chat tabs are mounted, any non-streaming inactive tab could consume the pending message before the active tab, sending the PR creation prompt to the wrong Claude session. This made Create PR appear broken since the user wouldn't see the message in their active tab. Add isActive guard to all three pending message effects so only the currently active tab consumes and sends pending messages. Co-authored-by: Claude <noreply@anthropic.com>

The applyRollbackStash function was returning true (success) when a checkpoint wasn't found, which caused the rollbackToMessage mutation to proceed with truncating messages even though the git state wasn't reverted. This led to message history being out of sync with git state. Changed the return type to a discriminated union that explicitly indicates whether a checkpoint was found and applied, allowing the caller to handle the case properly. Now rollback will fail with a clear error message when the checkpoint doesn't exist. Co-authored-by: Claude <assistant@claude.ai> Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Skills and agents from project-level .claude/ folders were not showing up in the settings tab or @ mention dropdown because the frontend was not passing the project path (cwd) to the backend tRPC queries. Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Read AGENTS.md from project root and pass its content to the Claude SDK via systemPrompt append, and include it in Ollama offline context. This allows users who maintain AGENTS.md files in their projects to have those instructions automatically loaded into chat sessions. Co-authored-by: Claude <noreply@anthropic.com>

@jjjrmy

## 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! (21st-dev#127) - **Project-Level Skills Discovery** — Pass project path to skills and agents queries — thanks @amal-irgashev! (21st-dev#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

serafimcloud and others added 30 commits January 14, 2026 12:44

Initial commit: 1Code v0.0.10

f0c51dc

Open source release of 1Code - Best UI for Claude Code with Local and Remote agent execution. Apache License 2.0

Release v0.0.13

95fbdc3

Release v0.0.14

42f20ce

Release v0.0.15

b011705

Release v0.0.16

91fffda

## What's New in v0.0.16 ### Improvements & Fixes - Fixed authentication redirect URL for packaged app - Fixed sidebar workspace timestamps updating on message send - Exclude session/plan files from changed files status bar - Reduced stop button icon size in send button

Release v0.0.17

a8c54fa

Add clone from GitHub feature to project selector

f5a9a32

Adds ability to clone repos directly from GitHub by entering a URL or owner/repo format. Repos are stored in userData/repos/{owner}/{repo}. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

build

4c81d79

Change clone path to ~/.21st/repos/{owner}/{repo}

85733ef

Stores cloned repos alongside worktrees for consistency. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Add clone from GitHub to onboarding page

1c0c337

Shows "Clone from GitHub" button alongside "Select folder" during first-time setup. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Release v0.0.18

1181c7a

## What's New in v0.0.18 ### Improvements & Fixes - Fixed sidebar flickering when switching between chats

Release v0.0.18

c384541

## What's New ### Features - Added Cmd+Enter shortcut for "Implement plan" button - Improved archive popover: auto-unarchive on selection, input clears on revisit ### Fixes - Fixed sidebar flickering when switching between chats

Release v0.0.19

33c2462

## What's New ### Features - Added Cmd+Enter shortcut for "Implement plan" button - Improved archive popover: auto-unarchive on selection, input clears on revisit

fix: Add author email in package.json for .deb package generation

9c89fa1

Fixing 21st-dev#18 21st-dev#18

Release v0.0.20

26d8620

## What's New ### Fixes - Fixed z-index layering for sticky user message bubble - Removed MCP servers indicator from header

Release v0.0.21

761b411

Release v0.0.22

7f5ed44

## What's New ### Fixes - Fixed scroll behavior: users can now scroll up freely during streaming - Fixed input lag by deferring trigger detection to next frame

Merge pull request 21st-dev#25 from may3rr/special-goat-6cdc52

e75ddb7

Fix IME composition issue with Enter key

docs: fix asset paths in README

863b937

Move GIF assets to root assets/ directory and update paths in README. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Update download URL to include binary name

97635f4

Ref 21st-dev#36

Release v0.0.22

4b3eb1f

## What's New ### Fixes - Fixed scroll behavior: users can now scroll up freely during streaming - Fixed input lag by deferring trigger detection to next frame - Fixed tool display state during streaming

Merge pull request 21st-dev#37 from Braunson/patch-1

b659509

Update download URL to include binary name

Merge pull request 21st-dev#19 from theodorosploumis/main

ec8348d

fix: Add author email in package.json for .deb package generation

Merge pull request 21st-dev#15 from caffeinum/feat/clone-from-github

54133ff

Add clone from GitHub feature

paul-bouzian and others added 17 commits January 24, 2026 19:23

QOL: Add default agent mode preference and per-chat mode isolation (2…

c4e478e

…1st-dev#102) Co-authored-by: Jeremy Holstein <jjjrmy@gmail.com>

Release v0.0.47

f35e488

## What's New ### Improvements & Fixes - **MCP Cache Fix** — Fixed MCP caching issues - **Tool UI Polish** — Improved expand button spacing in bash/edit tools - **Onboarding Cleanup** — Removed welcome dialog and streamlined sidebar

Release v0.0.48

8b9d174

## What's New ### Bug Fixes - **Startup Crash Fix** — Fixed "Cannot find module async-mutex" error that prevented app from launching

reply to the correct chat

6fbd583

fix others

9fa038c

Merge pull request 21st-dev#127 from jjjrmy/fix-reply-to-chat

ef7b203

FIX: Reply Sends To Wrong Sub-Chat In Multi-Chat Workspace

add automatic code block detection and syntax highlighting in chat input

9acf33f

serafimcloud and others added 10 commits January 28, 2026 17:02

Merge branch 'main' into qol-code-block-in-chat-input

61cc531

serafimcloud closed this Jan 31, 2026

serafimcloud force-pushed the main branch from ad0c573 to c69c8be Compare January 31, 2026 19:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

QOL: Add Automatic Code Block & Syntax Highlighting In Chat Input #128

QOL: Add Automatic Code Block & Syntax Highlighting In Chat Input #128

Uh oh!

jjjrmy commented Jan 29, 2026

Uh oh!

jjjrmy commented Jan 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

19 participants

QOL: Add Automatic Code Block & Syntax Highlighting In Chat Input #128

QOL: Add Automatic Code Block & Syntax Highlighting In Chat Input #128

Uh oh!

Conversation

jjjrmy commented Jan 29, 2026

Summary

Details

Test plan

Uh oh!

jjjrmy commented Jan 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

19 participants