使用教程
想先看个整体？可以观看 3 分钟上手视频。
cc-web 是一个运行在服务器上的 Web 控制台：在浏览器里创建 AI 编程会话（Claude Code / Kimi / Codex，或纯终端），给 AI 发指令、看它实时干活、浏览它改过的文件和 Git 提交。所有执行都在服务端进行，关掉浏览器任务也不会中断，换台电脑或用手机打开同一个地址就能接着看。
本文以 GitHub 上的极简示例工程 octocat/Hello-World（只有一个 README）为例，走一遍主要流程：登录 → 新建工作区 → 启动会话 → 用输入条发指令 → 查看结果、文件与 Git → 了解界面各分区。
准备工作#
- 访问地址与账号：向管理员索取 cc-web 的访问地址和账号。
- 示例工程：在 cc-web 所在的服务器上把工程克隆到本地目录，例如：
git clone https://github.com/octocat/Hello-World.git ~/cc-demo/hello-world
工作区就是服务器上的一个项目目录。你自己的项目同理：先放到服务器上，再按下文登记为工作区。
1. 登录#
在浏览器中打开 cc-web 服务地址，输入账号和口令登录。
图 1：登录
账号 / 口令：由管理员分配；首次部署的默认管理员为 admin，登录后请尽快修改口令。
2. 新建会话页#
登录后没有打开任何会话时，右侧是新建会话页：选工作区、选智能体与模型，然后启动。
图 2：新建会话页
- 工作区：会话在哪个目录里工作。点选一个已有工作区，或点「+ New」新建。
- 智能体（CLI）：会话使用的引擎：Claude Code / Kimi / Codex，或不启动 AI 的纯终端。
- 模型与思考强度：本会话使用的模型档位与思考强度，只影响这一个会话。
- 启动参数 / Auto：Auto 打开后，AI 弹出的确认提示由服务端自动应答（危险操作仍会拦下）。
- Launch Session：按以上配置启动一个新会话。
3. 新建工作区#
点工作区列表末尾的「+ New」，填写名称和项目路径后创建。
图 3：新建工作区
- 名称：工作区在界面上显示的名字。
- 路径：项目在服务器上的目录。本例是从 GitHub 克隆下来的示例工程 octocat/Hello-World。
- 创建：确认后工作区出现在新建会话页的工作区列表里。
4. 启动会话#
选中工作区、智能体与模型后，点 Launch Session 启动。
图 4：启动会话
- 已选中工作区：新建的 hello-world 工作区已被选中（高亮）。
- 模型 / 思考强度：演示里选 Sonnet + Low，响应更快；复杂任务可选更强的模型与更高强度。
- 启动：点 Launch Session 启动会话。
5. 界面分区#
会话打开后，界面分为左栏、终端、工具条、输入条和状态栏五个区域。
左栏 LeftBar#
顶部四个页签：会话 / 任务 / 计划 / 守护者；下面是当前页签的列表。会话按工作区分组，点一下切换。
图 5：左栏 LeftBar
终端窗口 Terminal#
AI 的实时输出。服务端持续轮询终端并推送，关掉浏览器任务也继续跑。
图 6：终端窗口 Terminal
工具条 Toolbar#
方向键 / 确认 / 中断 / 模型切换 / Auto 等常用操作，不用手敲按键。
图 7：工具条 Toolbar
输入条 InputBar#
在这里给 AI 发指令：支持 / 技能、@ 文件、📎 附件、▲ 历史。
图 8：输入条 InputBar
状态栏#
当前模型、思考强度与账户用量窗口（5 小时 / 每周）。
图 9：状态栏
6. 输入条：技能面板#
点「/」按钮（或在输入框输入 /）打开技能与命令面板。
图 10：输入条：技能面板
- / 技能与命令：列出可用的 slash 命令（如 /compact 压缩上下文）与技能（如 /begin），点一项插入输入框。也可以直接在输入框敲 /。
- 技能列表：支持模糊搜索，↑↓ 选择，回车插入。
7. 输入条：@ 引用文件#
点「@」按钮（或输入 @）选择工作区文件，指令发出时自动带上文件引用。
图 11：输入条：@ 引用文件
- @ 文件：列出工作区里的文件，选中后作为 @引用 随指令发给 AI。也可以在输入框直接敲 @。
- 文件列表：可输入文件名过滤。
8. 输入条：附件#
点「📎」添加附件，已选文件与 @引用都显示在输入框上方。
图 12：输入条：附件
- 📎 附件：选择本地文件（截图、文档、zip 等）。也可以直接把图片粘贴 / 拖进输入框。
- 已添加：已添加的 @文件 与附件显示为标签，点 × 可移除。发送时附件先上传到工作区，再随指令交给 AI。
9. 输入并发送指令#
在输入框写指令，点 ➤ 或按 Ctrl+Enter 发送。
图 13：输入并发送指令
- 指令：用自然语言描述要做的事。Enter 换行，Ctrl+Enter 发送。
- ▲ 历史：之前发过的指令，点一下再次填入（输入框为空时 ↑↓ 也能翻）。
- ➤ 发送：带附件时先上传再发送；上传期间重复点击不会重复发送。
10. AI 执行中#
指令发出后终端实时滚动 AI 的输出。
图 14：AI 执行中
- 会话状态：左栏会话条目的图标与颜色显示状态：执行中、等待确认、空闲；切到别的会话也能看到进度。
- 连接状态：ONLINE 表示浏览器与服务端的实时连接正常；断线会自动重连。
11. 查看执行结果#
AI 完成后终端停在总结处，状态变回空闲。
图 15：查看执行结果
- 最近一条指令：始终显示你刚发的指令，长输出滚走了也知道 AI 在回应什么。
- 执行过程：工具调用的详情默认折叠成「（点击查看）」，AI 的文字回复完整展示；表格、链接等会渲染成可点的样式。
- 确认并执行：AI 给出下一步建议时，这里会出现按钮，点一下直接执行该建议。
12. 输入条：指令历史#
点「▲」查看并复用之前发过的指令。
图 16：输入条：指令历史
- ▲ 历史：点开列出发过的指令，点一项填回输入框再编辑发送。
- 历史列表：最近的在最上面。
13. 快速导航#
标题栏的 Nav 按钮打开快速导航面板。
图 17：快速导航
- Nav 快速导航：按你发过的每条指令列出锚点，点一下跳回那一轮输出。
- 导航列表：长会话里快速定位。
14. 文件树与文件预览#
标题栏的 Files 按钮打开右侧文件树，双击文件在中间的预览面板查看。
图 18：文件树与文件预览
- Files 文件树：工作区的目录树，AI 新建 / 修改的文件一眼可见；单击选中、双击预览，顶部可搜索文件名与内容。
- 文件预览：双击文件树里的文件在这里预览：代码高亮、Markdown 渲染、图片、PDF 等，可切 Text / Hex 模式。
15. Git 面板#
文件树下方的 Git 面板显示分支与提交历史。
图 19：Git 面板
Git 面板：当前分支、远端地址与提交树状图；AI 刚才的提交就在最上面。点「Git」标题可收起 / 展开，状态会被记住。
16. 工具条#
终端下方的工具条集中了常用操作。
刷新#
重新抓取终端画面。
图 20：刷新
方向键 / 确认 / Tab / Esc#
AI 弹出选项菜单时用它们选择与确认，手机上也方便。
图 21：方向键 / 确认 / Tab / Esc
恢复 / 继续 / 中断#
恢复历史对话、让 AI 继续、或立即中断当前执行（Ctrl+C）。
图 22：恢复 / 继续 / 中断
模型切换#
会话中途一键切换模型。
图 23：模型切换
Auto 自动确认#
打开后由服务端自动应答确认提示；删除等危险操作仍会拦下等你确认。
图 24：Auto 自动确认
17. 工具条：更多菜单#
工具条末尾的「⋯」里是清空、压缩、终止、重启等不常用操作。
图 25：工具条：更多菜单
⋯ 更多：清空 / 压缩上下文 / 终止会话 / 重启 AI 收在这里，避免误点。
18. 状态栏#
底部状态栏显示当前模型与账户用量。
图 26：状态栏
状态栏：当前模型、思考强度，以及账户 5 小时 / 每周用量与重置时间。
19. 左栏页签：任务 / 计划 / 守护者#
除了交互式会话，cc-web 还能把工作交给后台自动完成。
任务#
后台任务流水线：建任务后自动执行（规划 → 实现 → 评审），在独立 git 工作树里改代码，完成后人工审核合并。关掉浏览器也照常执行。
图 27：任务
计划#
定时计划：按周期（cron）自动创建并执行任务，可随时启停或立即运行。
图 28：计划
守护者#
给一个北极星目标，自动循环「建任务 → 执行 → 验收」直到达标。
图 29：守护者
小贴士#
- 关掉浏览器不影响执行：会话与任务都在服务端运行，回来打开页面即可看到最新进度。
- 手机也能用：用手机浏览器打开同一地址会自动进入移动版，可查看会话、发指令、处理确认。
- Auto 自动确认的边界：Auto 只自动应答普通确认；删除、强推等破坏性操作仍会停下来等你确认。
- 一个工作区可以开多个会话：适合并行做不同的事；左栏按工作区分组，状态色一目了然。
- 界面太大 / 太小：在「设置 → 外观 → 界面缩放」选档位，字号、左栏宽度、输入框行数等还可以单独调。