# Codinput

[中文](./README.md) | English

[![npm](https://img.shields.io/npm/v/codinput)](https://www.npmjs.com/package/codinput)
[![DSH](https://img.shields.io/badge/DSH-0.1.1--rc.1%2B-blue)](https://github.com/deepseek-ai/deepseek-harness)
[![downloads](https://img.shields.io/npm/dm/codinput)](https://www.npmjs.com/package/codinput)
[![GitHub Stars](https://img.shields.io/github/stars/Witherwithwinter/Codinput)](https://github.com/Witherwithwinter/Codinput/stargazers)
[![License](https://img.shields.io/github/license/Witherwithwinter/Codinput)](./LICENSE)

A [DSH](https://github.com/deepseek-ai/deepseek-harness) web plugin that replaces the chat composer with a **code-editor-style input** — line numbers, current-line highlight, edit/preview panes, six dockable layouts — while still sending **plain-text Markdown source**, byte-identical to a normal chat message.

<!-- TODO(gif): editor overview, e.g. ![editor](docs/gif/editor.gif) -->

## Features

- **Editor UI**: line numbers, VSCode-style current-line highlight (a band across the gutter and the editor, measured per *visual* line under soft wrap), monospace fonts (JetBrains Mono / custom), Tab indent, Ln/Col status
- **Markdown edit / preview**: two independent toggles, single or side-by-side; preview reuses the official DSH `MarkdownText` renderer; draft images show as removable thumbnails above the editor
- **Status-bar controls** (styled after DSH's native toolbar): access-permission menu (Full access goes through the official risk confirmation), model & reasoning-effort picker, context-usage ring with token breakdown
- **Six layouts, all pairwise draggable**: bottom / left / right docks, floating window, and better-sidebar panel tabs; drag the title bar for drop-zone hints with automatic drop detection; layout switches morph via a FLIP transition; sizes are drag-adjustable and fully persisted
- **Trigger menus**: leading `/` commands and `@` file/session references, driven by the official `InputTriggerController` — both mouse picks and keyboard navigation go through the official pipeline (command chips and reference serialization keep working)
- **Theme-aware**: all styles use `--dsw-*` theme tokens and follow DSH light/dark automatically

## Requirements

- DSH ≥ 0.1.1-rc.1 (0.1.2-rc.1 supported; DSH 0.1.2 requires plugin **≥ 0.1.1**)
- [pnpm](https://pnpm.io) on PATH (`dsh plugin` forwards installs to pnpm)
- A Chromium-based browser is recommended; the sidebar-tab mode needs [dsh-better-sidebar](https://github.com/omdsh-dev/DSH-better-sidebar) (optional — right/bottom docks fall back to fixed panels without it)

## Installation

Run these from any directory (`--profile web` — adjust to your profile name).

### Option 1: via npm

```powershell
dsh plugin --profile web add codinput
```

> **Published** — the command works out of the box. On DSH 0.1.2 make sure the plugin is **≥ 0.1.1**: 0.1.0 does not support 0.1.2's composer rework (takeover silently breaks).

### Option 2: from this repository (works today)

```powershell
# short form
dsh plugin --profile web add github:Witherwithwinter/Codinput
# or the full git URL
dsh plugin --profile web add git+https://github.com/Witherwithwinter/Codinput.git
```

If pnpm asks to approve build scripts during install (`allowBuilds`), add the key it prints to `allowBuilds` in the profile's `pnpm-workspace.yaml` and re-run the same command. (This package ships no build scripts, so you likely won't hit this.)

### Option 3: local checkout (development)

```powershell
git clone https://github.com/Witherwithwinter/Codinput.git
cd Codinput
dsh plugin --profile web add link:.
```

> On Windows, pnpm's `link` handles paths containing spaces poorly — prefer a space-free checkout path, or create a junction with `mklink /J` and `add link:<junction-path>`.

### Update & uninstall

```powershell
dsh plugin --profile web update codinput   # update
dsh plugin --profile web remove codinput   # uninstall
```

After installing or updating, **restart `dsh web` and hard-refresh the browser** (Ctrl+F5).

## Usage

1. After the page loads, a **`</> Codinput`** toggle appears in the composer toolbar — click to enable;
2. `Enter` inserts a newline; `Ctrl+Enter` (`Cmd+Enter` on macOS) or the send button submits the Markdown source; the editor clears and line numbers reset afterwards;
3. Drag the title bar to switch layouts (left/right/bottom docks, floating window, panel tab rows); drag the edges to resize;
4. Type `/` or `@` at the start of a line to open the command / reference menus;
5. Toggle the switch again or click the card's × to exit — the default composer returns with the draft intact.

> Note: picking an **argument-less command** (e.g. `/compact`, `/export`) executes it immediately — that's the official command decision table. Commands that take arguments (e.g. `/goal`) claim the composer and wait for you to finish and send manually.

<!-- TODO(gif): layout drag / pairwise layout morphing, e.g. ![layouts](docs/gif/layouts.gif) -->

## Settings

DSH → **Settings → Codinput**: hide line numbers (auto-switches to soft wrap), send shortcut (presets or live capture of any combo), editor font, bottom-dock overlay mode, and side-dock overlay mode (when off, chat content automatically makes room for the card).

<!-- TODO(gif): settings section, e.g. ![settings](docs/gif/settings.gif) -->

## Known limitations

- While Codinput takes over, the native composer toolbar (image upload, model picker, …) is hidden — the same semantics as official takeovers; one click restores it.
- `@` file candidates depend on the DSH workspace file index: first queries on cold start or large workspaces can take seconds, and every keystroke re-queries with the new keyword (official menu-reducer behavior, same speed as the built-in composer);
- If the left sidebar collapses/expands without animation: better-sidebar 0.18.0 overrides DSH 0.1.2's frame transition (`grid-template-columns` → `padding-right`) — unrelated to this plugin (reproduces with Codinput disabled).

## Project structure

```text
Codinput/
├── package.json          # dual-sided plugin manifest: bundle patch (host) + client declaration (browser)
├── cordis.patch.yml      # mount declaration
├── DEVELOPING.md         # development & maintenance notes (Chinese)
└── lib/
    ├── index.js          # host half: pure mount carrier
    └── client.js         # browser half: all UI logic
```

## Development

```powershell
node --check lib/client.js && node --check lib/index.js   # syntax check
```

After installing, restart `dsh web`: `GET /plugins/codinput/client.js` should return 200 and the boot manifest on `/` should contain `codinput`.

For the takeover mechanism, layout-geometry constraints and the full browser-side checklist, see [DEVELOPING.md](./DEVELOPING.md) (Chinese).

## License

[MIT](./LICENSE)