codinput

Readme

# Codinput

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

[![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)
[![下载量](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)

一个 [DSH](https://github.com/deepseek-ai/deepseek-harness)（DeepSeek Harness）Web 插件：把聊天输入框替换为**代码编辑器风格的组件**——行号、当前行高亮、编辑/预览分屏、六种可拖拽停靠布局——而底层发送的仍然是**纯文本 Markdown 源码**，消息格式与普通文本消息完全一致。

<!-- TODO(gif): 编辑器总览演示，例如 ![editor](docs/gif/editor.gif) -->

## 特性

- **编辑器界面**：行号、VSCode 式当前行高亮（色带横贯行号栏与编辑区，软换行下按视觉行实测定位）、等宽字体（JetBrains Mono / 自定义）、Tab 缩进、Ln/Col 状态
- **Markdown 编辑 / 预览**：两个独立开关，可单开或并排同开；预览复用 DSH 官方 `MarkdownText` 渲染器；草稿图片以缩略图显示在附件栏，可逐个移除
- **状态栏控件**（样式与 DSH 原生工具行一致）：访问权限（Full access 走官方风险确认弹窗）、模型与推理等级、上下文占用环（含 token 分解）
- **六种布局两两互转**：底部 / 左侧 / 右侧停靠、浮动窗、better-sidebar 侧栏标签页；按住标题栏拖动出现投放区提示，落点自动判定；布局切换带 FLIP 形变过渡；尺寸可拖拽调整，偏好全部持久化
- **触发菜单**：行首 `/` 命令与 `@` 文件/会话引用，由官方 `InputTriggerController` 驱动，鼠标点击与键盘操作均走官方管线（命令芯片、引用序列化照常生效）
- **主题跟随**：样式全部使用 `--dsw-*` 主题令牌，自动适配 DSH 明暗主题

## 环境要求

- DSH ≥ 0.1.1-rc.1（0.1.2-rc.1 已适配；DSH 0.1.2 需搭配插件 **≥ 0.1.1**）
- [pnpm](https://pnpm.io)（`dsh plugin` 的安装动作转发给 pnpm 执行）
- 推荐使用 Chromium 内核浏览器；侧栏标签页模式需安装 [dsh-better-sidebar](https://github.com/omdsh-dev/DSH-better-sidebar)（可选，未安装时右/底停靠退回固定面板）

## 安装

以下命令均在任意目录执行（`--profile web` 按你的 profile 名称调整）。

### 方式一：通过 npm 安装

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

> **已发布**，命令直接可用。DSH 0.1.2 用户请确保插件 **≥ 0.1.1**——0.1.0 不适配 0.1.2 的输入框重构（会导致接管失效）。

### 方式二：通过仓库安装（当前可用）

```powershell
# 短格式
dsh plugin --profile web add github:Witherwithwinter/Codinput
# 或完整 git 地址
dsh plugin --profile web add git+https://github.com/Witherwithwinter/Codinput.git
```

若 pnpm 在安装时提示需要放行构建脚本（`allowBuilds`），按它打印的键名加入 profile 目录下 `pnpm-workspace.yaml` 的 `allowBuilds` 后重跑同一条命令即可（本包无构建脚本，通常不会遇到）。

### 方式三：本地检出（开发）

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

> Windows 下若检出路径含空格，pnpm 的 link 支持不佳——建议检出到无空格路径，或用 `mklink /J` 建立无空格路径的目录联接后再 `add link:<联接路径>`。

### 启用与卸载

```powershell
dsh plugin --profile web update codinput   # 更新
dsh plugin --profile web remove codinput   # 卸载
```

安装/更新后**重启 `dsh web` 并强刷浏览器页面**（Ctrl+F5）即可生效。

## 使用

1. 页面加载后，输入框工具行出现 **`</> Codinput`** 开关，点击启用；
2. `Enter` 换行；`Ctrl+Enter`（macOS 为 `Cmd+Enter`）或发送按钮发送纯文本 Markdown 源码，发送后自动清空、行号重置；
3. 按住标题栏拖动切换布局（左/右/底部停靠、浮动窗、面板标签行），拖拽边缘调整尺寸；
4. 行首输入 `/` 或 `@` 唤起命令 / 引用候选菜单；
5. 点击工具行开关或卡片右上角 × 退出，恢复默认输入框（草稿原样保留）。

> 注意：选中**无参数命令**（如 `/compact`、`/export`）会立即执行，这是官方命令决策表的语义；带参数命令（如 `/goal`）则领取输入框等待你补充参数后手动发送。

<!-- TODO(gif): 布局拖拽 / 六种布局互转演示，例如 ![layouts](docs/gif/layouts.gif) -->

## 设置

DSH 左下角 **设置 → Codinput**：隐藏行号（自动切换软换行）、发送快捷键（预设或现场捕获自定义组合）、编辑器字体、底部停靠悬浮覆盖聊天、左右停靠悬浮覆盖聊天（关闭时聊天内容自动避让卡片，顶部「对话/轨迹」不受影响）。

<!-- TODO(gif): 设置分区演示，例如 ![settings](docs/gif/settings.gif) -->

## 已知边界

- 接管期间，默认输入框的工具行（图片上传、模型选择等）随官方接管语义一并隐藏，一键退出即恢复；
- `@` 文件候选依赖 DSH 工作区文件索引，冷启动或大工作区下首次查询可能等待数秒，且每次按键都会以新关键词重发查询（官方菜单 reducer 语义，与官方输入框同速）；
- 左侧边栏收展若无过渡动画：better-sidebar 0.18.0 覆盖了 DSH 0.1.2 frame 的过渡（`grid-template-columns` → `padding-right`）所致，与本插件无关（停用 Codinput 同样复现）。

## 项目结构

```text
Codinput/
├── package.json          # 双面插件清单：bundle patch（宿主挂载）+ client（浏览器半边声明）
├── cordis.patch.yml      # 挂载声明
├── DEVELOPING.md         # 开发与维护须知（中文）
└── lib/
    ├── index.js          # 宿主半边：纯挂载载体
    └── client.js         # 浏览器半边：全部 UI 逻辑
```

## 开发

```powershell
node --check lib/client.js && node --check lib/index.js   # 语法检查
```

安装后重启 `dsh web`：`GET /plugins/codinput/client.js` 应返回 200，首页 boot 清单应包含 `codinput`。

接管机制、停靠几何硬约束与完整浏览器侧验证清单见 [DEVELOPING.md](./DEVELOPING.md)（中文）。

## 许可证

[MIT](./LICENSE)