Agent skill

Inline Editor

by marcus in marcus/sidecar

Inline text editing implementation within the file browser preview pane using tmux PTY backend, cursor movement, text manipulation, and editor state management.

MITAuto-check passedFrontend & Design

Install Inline Editor

skills CLI
$ npx skills add marcus/sidecar --skill inline-editor -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install marcus/sidecar inline-editor --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/marcus/sidecar.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/inline-editor .claude/skills/inline-editor && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
inline-editor
GitHub stars
1.1k
Token cost
~2.6k tokens
SKILL.md length
674 words
Files
1
Skills in repo
19
Repo updated
First seen
Licence
MIT

At a glance

Inline text editing implementation within the file browser preview pane using tmux PTY backend, cursor movement, text manipulation, and editor state management.

  • Works in 8 steps: Preview Pane Rendering (Not Full-Screen) → Dimension Calculations → Confirmation Behavior → …
  • Working on inline editing features
  • SKILL.md covers Overview, Architecture, Key Files and Critical Implementation Details, plus 6 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Inline Editor is an agent skill from marcus/sidecar. Inline text editing implementation within the file browser preview pane using tmux PTY backend, cursor movement, text manipulation, and editor state management. Covers entry/exit lifecycle, dimension calculations, confirmation dialogs, click-away detection, mouse forwarding, and app-level key routing. Use when working on inline editing features, text input components, or debugging editor rendering/input issues in the file browser plugin.

Its SKILL.md is about 2.6k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering State management. It works with tmux. The repository describes itself as: Use sidecar next to CLI agents for diffs, file trees, conversation history, and task management with td. The licence is MIT.

When your agent uses it

  • Working on inline editing features
  • Text input components
  • Debugging editor rendering/input issues in the file browser plugin

Example prompts

  • “/inline-editor”

Workflow steps

8 steps, taken from the step headings in SKILL.md.

  1. Preview Pane Rendering (Not Full-Screen)
  2. Dimension Calculations
  3. Confirmation Behavior
  4. Exit Confirmation Dialog
  5. Click-Away Detection
  6. Gradient Border Feedback
  7. Mouse Support (SGR Protocol)
  8. Multi-Editor Support

What it can do on your machine

Read from SKILL.md and the folder at commit 3792a4e. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are go and json).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Inline Editor loads about 2.6k tokens when it runs. Until then it costs about 114 tokens; SKILL.md has 674 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~114
When it runs · the whole SKILL.md, loaded when a task matches
~2.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from marcus/sidecar at commit 3792a4e, republished under its MIT licence (© marcus). 674 words, ~2,625 tokens.

Download SKILL.mdSave it as .claude/skills/inline-editor/SKILL.md (or your agent's skills folder).
name
inline-editor
description
Inline text editing implementation within the file browser preview pane using tmux PTY backend, cursor movement, text manipulation, and editor state management. Covers entry/exit lifecycle, dimension calculations, confirmation dialogs, click-away detection, mouse forwarding, and app-level key routing. Use when working on inline editing features, text input components, or debugging editor rendering/input issues in the file browser plugin.

Inline Editor Implementation

Overview

The inline editor (tmux_inline_edit) lets users edit files directly within the file browser preview pane using their preferred terminal editor (vim, nvim, nano, etc.) without leaving the TUI. The file tree remains visible during editing.

Core Principle: This is NOT a terminal emulator. Tmux manages the PTY backend; Sidecar acts as an input/output relay, similar to the workspace plugin's interactive mode.

Architecture

Components
  1. Entry Layer (internal/plugins/filebrowser/inline_edit.go): Creates tmux sessions, manages editor lifecycle
  2. Rendering Layer (internal/plugins/filebrowser/view.go, inline_edit.go): Renders editor content within preview pane
  3. Input Layer (internal/plugins/filebrowser/plugin.go, mouse.go): Routes keys/clicks to editor or confirmation dialog
  4. TTY Model (internal/tty/tty.go): Handles tmux capture, cursor overlay, and input forwarding
Data Flow
User presses 'e' on file
  -> enterInlineEditMode()
  -> tmux new-session -d -s {sessionName} {editor} {path}
  -> InlineEditStartedMsg
  -> handleInlineEditStarted()
  -> tty.Model.Enter()
  -> Start polling tmux capture-pane
  -> renderInlineEditorContent() in preview pane
  -> User types -> tty.Model forwards to tmux
  -> User exits -> SessionDeadMsg or exit keys
  -> exitInlineEditMode()
  -> Refresh preview

Key Files

FilePurpose
internal/plugins/filebrowser/inline_edit.goEditor lifecycle, confirmation dialog, dimension calculations
internal/plugins/filebrowser/view.goPreview pane rendering, gradient border
internal/plugins/filebrowser/mouse.goClick-away detection
internal/plugins/filebrowser/plugin.goState management, Update routing
internal/tty/tty.goTTY model for tmux interaction (shared with workspace)
internal/app/update.goApp-level key routing for inline edit context

Critical Implementation Details

1. Preview Pane Rendering (Not Full-Screen)

The editor renders within renderPreviewPane(), NOT as a full-screen takeover. The file tree stays visible.

go
// view.go - renderPreviewPane()
func (p *Plugin) renderPreviewPane(visibleHeight int) string {
    if p.inlineEditMode && p.inlineEditor != nil && p.inlineEditor.IsActive() {
        return p.renderInlineEditorContent(visibleHeight)
    }
    // ... normal preview rendering
}
2. Dimension Calculations

The tty.Model needs exact dimensions matching the preview pane content area:

go
func (p *Plugin) calculateInlineEditorWidth() int {
    if !p.treeVisible {
        return p.width - 4 // borders + padding
    }
    p.calculatePaneWidths()
    return p.previewWidth - 4
}

func (p *Plugin) calculateInlineEditorHeight() int {
    paneHeight := p.height
    innerHeight := paneHeight - 2 // pane borders
    contentHeight := innerHeight - 2 // header lines
    if len(p.tabs) > 1 {
        contentHeight-- // tab line
    }
    return contentHeight
}

These MUST stay in sync with renderInlineEditorContent() layout calculations.

3. Confirmation Behavior

Rule: session alive = show confirmation, session dead = exit immediately.

Always show confirmation when the session is alive, regardless of file modification status. Vim's modification status cannot be reliably detected externally.

go
func (p *Plugin) isInlineEditSessionAlive() bool {
    if p.inlineEditSession == "" {
        return false
    }
    err := exec.Command("tmux", "has-session", "-t", p.inlineEditSession).Run()
    return err == nil
}

Check session alive status:

  1. At the start of Update() when in inline edit mode - if dead, exit immediately
  2. In click-away handling - if dead, skip confirmation and clean up
4. Exit Confirmation Dialog

State fields:

go
showExitConfirmation bool        // Dialog visible
pendingClickRegion   string      // Where user clicked
pendingClickData     interface{} // Click data (tree index, tab index)
exitConfirmSelection int         // 0=Save&Exit, 1=Exit without saving, 2=Cancel

Options:

  • Save & Exit: Sends editor-appropriate save-and-quit sequence, waits for session death
  • Exit without saving: Kills tmux session immediately
  • Cancel: Returns to editing
5. Click-Away Detection

Mouse regions are registered during render. Clicks between items may miss regions, so always include position-based fallback:

go
if p.inlineEditMode && p.inlineEditor != nil && p.inlineEditor.IsActive() {
    action := p.mouseHandler.HandleMouse(msg)

    handleClickAway := func(regionID string, regionData interface{}) (*Plugin, tea.Cmd) {
        if !p.isInlineEditSessionAlive() {
            p.exitInlineEditMode()
            p.pendingClickRegion = regionID
            p.pendingClickData = regionData
            return p.processPendingClickAction()
        }
        p.pendingClickRegion = regionID
        p.pendingClickData = regionData
        p.showExitConfirmation = true
        p.exitConfirmSelection = 0
        return p, nil
    }

    if action.Type == mouse.ActionClick {
        if action.Region != nil {
            switch action.Region.ID {
            case regionTreePane, regionTreeItem, regionPreviewTab:
                return handleClickAway(action.Region.ID, action.Region.Data)
            }
        }
        // Fallback: position-based detection
        if p.treeVisible && action.X < p.treeWidth {
            return handleClickAway(regionTreePane, nil)
        }
    }
    // Forward to tty model
    return p, p.inlineEditor.Update(msg)
}
6. Gradient Border Feedback

Visual indicator that edit mode is active:

go
if p.inlineEditMode && p.inlineEditor != nil && p.inlineEditor.IsActive() {
    rightPane = styles.RenderPanelWithGradient(previewContent, p.previewWidth,
        paneHeight, styles.GetInteractiveGradient())
}
7. Mouse Support (SGR Protocol)

Full mouse interaction including text selection via SGR (1006) protocol. Mouse events are forwarded to the tty model which translates them into SGR escape sequences: \x1b[<button;x;y;M/m where M = press/drag, m = release.

8. Multi-Editor Support

sendEditorSaveAndQuit() detects which editor is running and sends the appropriate sequence:

EditorSave & Quit Command
vim, nvim, viEscape :wq Enter
nanoCtrl+O Enter Ctrl+X
emacsCtrl+X Ctrl+S Ctrl+X Ctrl+C
helixEscape :wq Enter
microCtrl+S Ctrl+Q
kakouneEscape :write-quit Enter
joeCtrl+K X
neEscape :SaveQuit Enter
ampCtrl+S Ctrl+Q
Show full SKILL.md (259 more words)Show less

Exit Paths

MethodConfirmationDescription
Ctrl+\NoImmediate exit (tty.Config.ExitKey)
Double-ESCNoExit with 150ms delay (vim ESC compatibility)
:q, :wq in vimNoNormal editor exit, session death detected
Click tree/tabYes (if alive)Shows confirmation when session alive; exits immediately if dead

State Management

Plugin State (plugin.go)
go
inlineEditor         *tty.Model // Embeddable tty model
inlineEditMode       bool       // Currently editing
inlineEditSession    string     // Tmux session name
inlineEditFile       string     // File being edited
showExitConfirmation bool
pendingClickRegion   string
pendingClickData     interface{}
exitConfirmSelection int
Update Priority (plugin.go)
go
func (p *Plugin) Update(msg tea.Msg) (plugin.Plugin, tea.Cmd) {
    // 1. Handle exit confirmation dialog FIRST
    if p.showExitConfirmation { /* j/k navigation, Enter confirm, Esc cancel */ }
    // 2. Handle inline edit mode
    if p.inlineEditMode && p.inlineEditor.IsActive() { /* Delegate to tty.Model */ }
    // 3. Normal plugin handling
}
App-Level Key Routing

The app intercepts global shortcuts (q, 1-5, `, ~, ?, !, @) before plugins. For inline edit to receive ALL keys, internal/app/update.go must recognize the context:

go
if m.activeContext == "workspace-interactive" || m.activeContext == "file-browser-inline-edit" {
    // Forward ALL keys to plugin
}

The plugin returns "file-browser-inline-edit" from FocusContext().

Common Pitfalls

  1. Do NOT render full-screen - render within preview pane only, keeping file tree visible
  2. Always include position-based click fallback - mouse regions may not cover every pixel
  3. Always confirm on click-away when session is alive - prevents accidental data loss
  4. Check IsActive() on every message - tty model can become inactive asynchronously; without this check, users get a blank screen after vim exits
  5. Never query tmux synchronously in View() - use cached content from tty.Model.View()
  6. Handle tab row clicks by Y position BEFORE region-based detection - prevents incorrect handling as preview pane clicks
  7. Ensure app-level key routing recognizes "file-browser-inline-edit" context - otherwise typing q in vim triggers quit instead of inserting character

Feature Flag

Gated behind tmux_inline_edit. Enable in ~/.config/sidecar/config.json:

json
{ "features": { "tmux_inline_edit": true } }

Fallback: features.IsEnabled(features.TmuxInlineEdit.Name) returns false -> opens external editor.

Keyboard Shortcuts

KeyCommandDescription
eeditEdit file inline (within preview pane)
Eedit-externalEdit in full terminal (suspends TUI)

Registered in:

  • internal/plugins/filebrowser/plugin.go - Commands() method
  • internal/plugins/filebrowser/handlers.go - Key handling
  • internal/keymap/bindings.go - Key bindings for file-browser-tree and file-browser-preview contexts

References

  • Interactive shell guide: docs/guides/deprecated/interactive-shell-implementation.md
  • TTY model: internal/tty/tty.go
  • Feature flags: internal/features/features.go

© marcus, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/inline-editor of marcus/sidecar.

Open the folder on GitHubat commit 3792a4e

Compare with similar skills

Inline Editor next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Inline Editor compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Inline Editor this skillmarcus/sidecar1.1k—~2.6kAutomated safety check: PassMIT
Dify Component Writing Guidelanggenius/dify158k—~626Automated safety check: PassCustom licence
Expressive Mvcgabeklein/expressive-mvc103—~5.9kAutomated safety check: PassMIT
Bulletproof Reactyamcodes/arkenv145—~1.8kAutomated safety check: PassMIT
Zustand Store Patternsstellar/laboratory112—~1.4kAutomated safety check: PassApache-2.0
Tanstack Querybskimball/tanstack-hono1191 repos~5.4kAutomated safety check: PassMIT

Similar skills

  • Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data…

    158k GitHub stars~626 tokensUpdated today
    Frontend & DesignAuto-check passed
  • Expressive Mvc

    gabeklein/expressive-mvc

    Class-based reactive state management for React (Expressive MVC).

    103 GitHub stars~5.9k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Bulletproof React

    yamcodes/arkenv

    Bulletproof React architecture patterns for scalable, maintainable applications.

    145 GitHub stars~1.8k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed
  • Zustand Store Patterns

    stellar/laboratory

    Reference for the two Zustand store patterns in Stellar Lab — main store (querystring) and transaction flow store (sessionStorage).

    112 GitHub stars~1.4k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed
  • Tanstack Query

    bskimball/tanstack-hono

    Powerful asynchronous state management, server-state utilities, and data fetching for TS/JS, React, Vue, Solid, Svelte & Angular.

    119 GitHub starsUsed in 1 repo~5.4k tokens
    Frontend & DesignAuto-check passed
  • Frontend Typescript Rules

    shinpr/ai-coding-project-boilerplate

    Applies React/TypeScript type safety, component design, and state management rules.

    232 GitHub stars~1.7k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

More from marcus/sidecar

All 19 skills in this repo
  • Create Adapter

    marcus/sidecar

    Create conversation adapters for importing AI chat history from different tools (Claude Code, Cursor, Warp, Codex, etc.).

    1.1k GitHub stars~4.8k tokensUpdated 2 days ago
    Auto-check passed
  • Create Modal

    marcus/sidecar

    Create declarative modals using the modal library API. An agent skill from marcus/sidecar.

    1.1k GitHub stars~2.6k tokensUpdated 2 days ago
    Auto-check passed
  • Create Plugin

    marcus/sidecar

    Create new sidecar plugins implementing the plugin.Plugin interface, rendering views with Bubble Tea, handling keyboard input via keymap contexts, and integrating with the app shell (footer hints…

    1.1k GitHub stars~2.3k tokensUpdated 2 days ago
    Auto-check passed
  • Project Switching

    marcus/sidecar

    Project switching implementation in sidecar: project discovery, state management, UI flow, modal rendering, filtering, theme preview, and plugin reinitialization.

    1.1k GitHub stars~1.8k tokensUpdated 2 days ago
    Auto-check passed
  • Shell Integration

    marcus/sidecar

    Interactive shell/TTY integration with tmux session management, shell command execution, control-mode output capture with polling fallback, native cursor rendering, lazy scrollback, selection, paste…

    1.1k GitHub stars~3.6k tokensUpdated 2 days ago
    Auto-check passed
  • Sidecar Website

    marcus/sidecar

    Writing and maintaining the Sidecar Docusaurus documentation site, including page structure, doc authoring, blog posts, styling, images, and deployment workflow.

    1.1k GitHub stars~1.7k tokensUpdated 2 days ago
    Auto-check passed

Works with

Questions about Inline Editor

What does Inline Editor do?

Inline text editing implementation within the file browser preview pane using tmux PTY backend, cursor movement, text manipulation, and editor state management. Inline Editor is an agent skill from marcus/sidecar. Inline text editing implementation within the file browser preview pane using tmux PTY backend, cursor movement, text manipulation, and editor state management.

When should I use Inline Editor?

Inline Editor fits situations like: working on inline editing features; text input components; debugging editor rendering/input issues in the file browser plugin.

How do I install Inline Editor in Claude Code?

Run `npx skills add marcus/sidecar --skill inline-editor -a claude-code`. Or copy the skill folder (.claude/skills/inline-editor in marcus/sidecar) into .claude/skills/inline-editor in your project. Claude Code loads it when a task matches its description.

How do I install Inline Editor in Codex?

Run `npx skills add marcus/sidecar --skill inline-editor -a codex`. Or copy the skill folder (.claude/skills/inline-editor in marcus/sidecar) into .agents/skills/inline-editor in your project. Codex loads it when a task matches its description.

Can I use Inline Editor in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add marcus/sidecar --skill inline-editor -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/inline-editor, .gemini/skills/inline-editor, .github/skills/inline-editor and .opencode/skills/inline-editor in your project.

What does Inline Editor need to run?

SKILL.md names no scripts, command-line tools or credentials: Inline Editor is instructions for the agent only.

Does Inline Editor access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Inline Editor safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Inline Editor use?

Inline Editor is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Inline Editor use?

About 2.6k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Inline Editor?

Skills that share tags, products or a category with Inline Editor: Dify Component Writing Guide (langgenius/dify, 158k stars), Expressive Mvc (gabeklein/expressive-mvc, 103 stars), Bulletproof React (yamcodes/arkenv, 145 stars) and Zustand Store Patterns (stellar/laboratory, 112 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Inline Editor?

marcus (a GitHub user) maintains it in marcus/sidecar, which has 1,085 GitHub stars. The repository holds 19 skills in this directory. The repository was last updated on October 5, 2026.

Source: marcus/sidecar on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.