dsh-codex-handoff 0.1.1 → 0.1.2

package/README.md

@@ -10,19 +10,35 @@
 需要 DSH（DeepSeek Harness）与**本机已登录、可正常调用的 Codex CLI**（`codex` 可执行文件会自动在
 `%LOCALAPPDATA%\OpenAI\Codex\bin\*\codex.exe`、`CODEX_BIN`、PATH 里找）。
 
+### 从 npm（推荐）
+
+```
+dsh-codex-handoff@0.1.1
+```
+
+- 界面：**插件** 页 → 添加 → 输入 `dsh-codex-handoff`
+- 工具：`plugin_manager` → `install_bundle`，`target` 填 `dsh-codex-handoff@0.1.1`
+
+### 从源码
+
 ```powershell
 git clone https://github.com/HATO-24/dsh-codex-handoff.git
 ```
 
-然后在 DSH 里装进当前 profile，两种方式任选：
-
-- 界面：**插件** 页 → 添加 → 指向克隆下来的目录；
-- 工具：`plugin_manager` → `install_bundle`，`target` 填该目录的绝对路径。
+然后在 DSH 里装进当前 profile：界面里 **插件** 页 → 添加 → 指向克隆下来的目录，
+或用 `plugin_manager` → `install_bundle`，`target` 填该目录的绝对路径。
 
 装好后：
 
-- 左侧栏面板列表多出 **GPT 对话**（点开在中间整页查看）
-- 会话标题栏最右侧多一个对话气泡按钮（点开是右侧抽屉）
+- **左下角**（Settings 旁、催更姬旁边）多一个 **GPT** 按钮：点它在 **DSH 右侧栏** 打开对话面板
+- 右侧栏顶部出现 **GPT 对话** 标签（和「开始」并列）
+- 会话标题栏最右侧还有一个对话气泡按钮，作为快捷入口
+
+> 为什么不用左侧栏图标？点它会切走 conversation，`sidebarRight.mounted` 变空，
+> `openResource` 直接抛 `sidebarRight: no session surface is mounted`。
+> 这是 DSH 的机制限制，所以入口必须放在**不切面板**的位置（左下角 / 会话头部）。
+
+> 注意：Client 插件改了 `inject` 后**要重启 DSH** 才会重新解析。
 
 > 本地改代码后，在插件页把该插件 **禁用 → 启用** 即可重载新代码，不用重启 DSH。
 > 首次调用会消耗 Codex 额度；想省上下文就把 `DSH_CODEX_BRIDGE_ISOLATE=1` 打开。
@@ -91,12 +107,27 @@ codex exec -c 'mcp_servers={}' ...
 
 ## 三、用
 
-### 1. 侧栏查看记录
+### 1. 在右侧栏查看记录
+
+对话面板**住在 DSH 右侧栏**里（和催更姬用的是同一个扩展点）：
+
+- 点**左下角的 GPT 按钮**（或会话标题栏的气泡按钮）→ 右侧栏自动展开「GPT 对话」标签
+- 右侧栏本身可以拖动分隔条调整宽度
+- 主面板不受影响，对话照常进行
 
-两个入口，同一份数据：
+实现用的是 `ctx.sidebarRightTabs.register()` + `sidebar.right.pane.tab` slot，来自 DSH 内置的
+`@deepseek-ai/dsh-client-ui-sidebar-right`。**关键点：Client 插件的 `inject` 必须显式声明
+`sidebarRight` / `sidebarRightTabs`**，否则 `ctx` 里根本看不到这两个服务（这是踩过的坑，
+表现为 tab 静默不注册、甚至把整个 apply 打断导致界面元素消失）。
 
-- **侧栏面板**：DSH 左侧栏面板图标里多一个 **GPT 对话**（order 30，在「写作助手」之后、「ZAI Usage」之前），点开在中间整页查看。
-- **右侧抽屉**：会话标题栏最右侧（`…` 左边）多一个对话气泡按钮，点开从右边滑出 430px 抽屉，**贴着对话看不打断主界面**；`Esc` 或右上角 × 关闭。抽屉从标题栏下方（`top: 48px`）开始——窗口控制按钮（− □ ×）在页面之上，任何 z-index 都盖不过去，只能避开。
+**入口位置也踩过坑**：`sidebarRight.openResource()` 内部调 `this.require()`，它要求
+`this.mounted.getSnapshot()` 有值（屏幕上必须挂着一个会话）。所以入口**不能放在会切走
+conversation 的地方**——左侧栏图标会切主面板，conversation 卸载后 `mounted` 为空，
+直接抛 `sidebarRight: no session surface is mounted`。只能用左下角按钮或会话头部按钮。
+
+样式全部走 DSH 的 theme token（`--dsw-alias-bg-base` / `--dsw-alias-label-primary` /
+`--dsw-alias-brand-primary` 等），明暗主题与换肤自动跟随。注意 `--dsw-alias-bg` / `--dsw-alias-text`
+这类名字**不存在**，写了会静默回退到硬编码色值——这也是踩过的坑。
 
 两个入口都显示每段会话的**模型与推理强度**：
 
@@ -114,7 +145,7 @@ codex exec -c 'mcp_servers={}' ...
 
 ### 1.5 在面板里直接发消息、切换模型
 
-侧栏面板和右侧抽屉底部都有发送区：
+右侧栏底部有发送区：
 
 - 输入框：`Enter` 发送、`Shift+Enter` 换行
 - **模型下拉**：来自 `/models`，列出 `codex debug models` 里的全部 10 个模型
@@ -180,6 +211,7 @@ codex_gpt({ threadId: "01a1ac8e-01a4-79a2-a70d-855254e70751", message: "继续
 | GET | `/status` | 工作区、codex 路径、隔离开关 |
 | GET | `/models` | 可用模型目录（slug / 显示名 / 支持的推理档位） |
 | POST | `/send` | 发一轮真实对话，body：`{message, conversationId?, threadId?, model?, reasoning?}` |
+| POST | `/promote` | 把一段会话标记成 Codex App 可见，body：`{threadId}` 或 `{conversationId}` |
 
 ```powershell
 $body = @{ message = "只回复两个字：收到"; reasoning = "low" } | ConvertTo-Json -Compress
@@ -191,13 +223,21 @@ Invoke-WebRequest -Uri "http://127.0.0.1:12530/api/codex-bridge/send" -Method PO
 > `POST /send` 会**真实消耗 Codex 额度**，且同步等待（一次 `low` 推理实测约 58 秒）。
 > 路由用 Node 原生 handler 而非 `resource`：`resource` 路由只放行 GET/HEAD，POST 会被平台层直接 405。
 
-### 3. 在 Codex 软件里做第二轮
+### 3. 在 Codex 软件里做第二轮（按需转换）
+
+会话**默认持久化**（不再 `--ephemeral`），会写进 `~/.codex/sessions/` 并注册到 Codex 的
+state DB，命令行随时可以 `codex exec resume <thread_id> -` 继续。
+
+但 **Codex 桌面版的会话列表只显示 `source = "vscode"` 的线程**；`codex exec` 写的是 `exec`，
+所以默认在 App 列表里看不到（实测：数据三处齐全——threads、projection state、turns——仍然不显示）。
 
-会话**默认持久化**（不再 `--ephemeral`），所以：
+因此提供了**按需转换**：在会话详情里点 **「转移到 Codex」**，插件会把该 thread 的 `source`
+改成 `vscode`，之后**重启 Codex App** 就能在列表里找到并继续。
 
-- 桥发起的对话会出现在 `~/.codex/sessions/` 并注册进 Codex 的 state DB；
-- 在 Codex 桌面应用的会话列表里可以直接找到、继续；
-- 命令行也能续：`codex exec resume <thread_id> -`。
+- 只改 `source` 一个字段（用 Node 内置 `node:sqlite`）
+- 不想每轮都改，所以做成了手动按钮，不是自动行为
+- `DSH_CODEX_BRIDGE_APP_VISIBLE=0` 可以整个关掉这个能力
+- 试过官方的 `codex exec --thread-source vscode`：**无效**，写进去仍是 `exec`
 
 ### 4. Codex 侧回读（两边都能继续）
 

package/lib/client.js

@@ -16,6 +16,21 @@ window.__ModuleLoader__.load({
 
     const ROUTE = "/api/codex-bridge";
     const DRAWER_WIDTH = 430;
+    const DRAWER_WIDTH_KEY = "dsh-codex-handoff:drawer-width";
+    /** 右侧栏 tab 的 id（也是 sidebar.right.pane.tab 的 key）。 */
+    const TAB_ID = "dsh-codex-handoff";
+    const TAB_RESOURCE = "dsh-resource://codex-bridge/main";
+
+    /**
+     * 打开入口：激活右侧栏 tab。apply 里会按实际服务覆盖；
+     * 服务不可用时只记一条日志（抽屉已移除，不再有回退界面）。
+     */
+    const bridgeOpeners = {
+      open: () => console.error("[codex-bridge] 右侧栏服务不可用，无法打开对话面板"),
+    };
+
+    /** apply 时填入 ctx.layout，供主面板挂载后切回对话页。 */
+    let bridgeLayout = null;
 
     // ── 抽屉开关：模块级小 store，按钮与抽屉共享 ──────────────────────
     const drawerStore = { open: false, listeners: new Set() };
@@ -41,13 +56,23 @@ window.__ModuleLoader__.load({
     }
 
     // ── 样式 ─────────────────────────────────────────────────────────
+    // 全部使用 DSH 的 alias token（cordis_inspect Theme.listTokens 列出的名字），
+    // 这样明暗主题、用户换肤都会自动跟随，外观也和本体一致。
     const colors = {
-      bg: "var(--dsw-alias-bg, #16181d)",
-      panel: "var(--dsw-alias-surface, rgba(127,127,127,.06))",
-      border: "var(--dsw-alias-border, rgba(127,127,127,.24))",
-      accent: "var(--dsw-alias-accent, #4f8ef7)",
-      text: "var(--dsw-alias-text, #e6edf3)",
-      code: "var(--dsw-alias-code-bg, rgba(127,127,127,.10))",
+      bg: "var(--dsw-alias-bg-base, #16181d)",
+      panel: "var(--dsw-alias-bg-layer-1, rgba(127,127,127,.06))",
+      layer2: "var(--dsw-alias-bg-layer-2, rgba(127,127,127,.10))",
+      overlay: "var(--dsw-alias-bg-overlay, #1c1f26)",
+      sidebar: "var(--dsw-specific-sidebar-fill, #16181d)",
+      border: "var(--dsw-alias-border-l1, rgba(127,127,127,.24))",
+      borderStrong: "var(--dsw-alias-border-l2, rgba(127,127,127,.36))",
+      accent: "var(--dsw-alias-brand-primary, #4f8ef7)",
+      text: "var(--dsw-alias-label-primary, #e6edf3)",
+      textSecondary: "var(--dsw-alias-label-secondary, #9aa4b2)",
+      idle: "var(--dsw-alias-state-idle-primary, #8b949e)",
+      error: "var(--dsw-alias-state-error-primary, #d06a5a)",
+      success: "var(--dsw-alias-state-success-primary, #3fb950)",
+      warn: "var(--dsw-alias-state-warn-primary, #d29922)",
     };
 
     const styles = {
@@ -60,6 +85,15 @@ window.__ModuleLoader__.load({
         color: colors.text,
         fontFamily: "inherit",
       },
+      content: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        minHeight: 0,
+        background: colors.bg,
+        color: colors.text,
+        fontFamily: "inherit",
+      },
       head: {
         display: "flex",
         alignItems: "center",
@@ -104,9 +138,43 @@ window.__ModuleLoader__.load({
         border: `1px solid ${colors.border}`,
         borderRadius: 8,
         padding: "9px 11px",
-        cursor: "pointer",
         background: colors.panel,
       },
+      cardHead: {
+        position: "relative",
+        cursor: "pointer",
+        paddingRight: 16,
+      },
+      cardBody: { marginTop: 10 },
+      chevron: {
+        position: "absolute",
+        right: 0,
+        top: 0,
+        fontSize: 10,
+        opacity: 0.45,
+        lineHeight: "18px",
+      },
+      threadRow: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 8,
+        marginBottom: 2,
+      },
+      threadText: {
+        fontSize: 10.5,
+        color: colors.textSecondary,
+        wordBreak: "break-all",
+      },
+      resizeHandle: {
+        position: "absolute",
+        left: -3,
+        top: 0,
+        bottom: 0,
+        width: 7,
+        cursor: "col-resize",
+        zIndex: 2,
+      },
       cardActive: {
         borderColor: colors.accent,
         boxShadow: `0 0 0 1px ${colors.accent} inset`,
@@ -123,8 +191,8 @@ window.__ModuleLoader__.load({
       empty: { fontSize: 12, opacity: 0.6, lineHeight: 1.75, padding: "8px 4px" },
       turn: {
         borderTop: `1px dashed ${colors.border}`,
-        paddingTop: 10,
-        marginTop: 10,
+        paddingTop: 12,
+        marginTop: 12,
       },
       label: { fontSize: 10.5, fontWeight: 600, opacity: 0.7, marginBottom: 4 },
       rowBetween: {
@@ -133,20 +201,75 @@ window.__ModuleLoader__.load({
         justifyContent: "space-between",
         gap: 8,
       },
+      turnHead: {
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        flexWrap: "wrap",
+        marginBottom: 8,
+      },
+      turnIndex: { fontSize: 11, fontWeight: 700, opacity: 0.5 },
+      turnTime: { fontSize: 11, opacity: 0.5 },
+      pill: {
+        fontSize: 10,
+        padding: "0 6px",
+        lineHeight: "16px",
+        borderRadius: 999,
+        border: `1px solid ${colors.border}`,
+        opacity: 0.85,
+        whiteSpace: "nowrap",
+      },
+      pillMuted: { fontSize: 10, opacity: 0.45, whiteSpace: "nowrap" },
+      messageAsk: {
+        borderRadius: 8,
+        background: colors.layer2,
+        padding: "8px 10px",
+        marginBottom: 8,
+      },
+      messageReply: {
+        borderRadius: 8,
+        border: `1px solid ${colors.border}`,
+        padding: "8px 10px",
+      },
+      messageLabel: { fontSize: 10.5, fontWeight: 600, opacity: 0.6, marginBottom: 4 },
+      messageText: {
+        fontSize: 12,
+        lineHeight: 1.8,
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-word",
+        fontFamily: "inherit",
+      },
+      linkBtn: {
+        appearance: "none",
+        border: "none",
+        background: "transparent",
+        color: colors.accent,
+        fontSize: 11,
+        padding: "4px 0",
+        cursor: "pointer",
+        fontFamily: "inherit",
+      },
+      externalBlock: {
+        marginTop: 14,
+        paddingTop: 12,
+        borderTop: `1px dashed ${colors.border}`,
+      },
+      externalTitle: { fontSize: 11, fontWeight: 600, color: colors.accent },
+      externalItem: { marginTop: 8 },
       pre: {
+        /* 兜底：不再限制高度，内层滚动会截走滚轮，长文交给外层容器统一滚动 */
         margin: 0,
         padding: "8px 10px",
         borderRadius: 6,
-        background: colors.code,
+        background: colors.layer2,
         fontSize: 11.5,
-        lineHeight: 1.7,
+        lineHeight: 1.75,
         whiteSpace: "pre-wrap",
         wordBreak: "break-word",
-        maxHeight: 320,
-        overflowY: "auto",
         fontFamily: "inherit",
       },
-      error: { color: "#d06a5a", fontSize: 12, padding: "8px 4px", lineHeight: 1.7 },
+      error: { color: colors.error, fontSize: 12, padding: "8px 4px", lineHeight: 1.7 },
+      okNote: { color: colors.success, fontSize: 11, lineHeight: 1.6 },
       /* 底部发送区 */
       composer: {
         flex: "0 0 auto",
@@ -163,7 +286,7 @@ window.__ModuleLoader__.load({
         resize: "none",
         border: `1px solid ${colors.border}`,
         borderRadius: 6,
-        background: colors.code,
+        background: colors.layer2,
         color: "inherit",
         fontFamily: "inherit",
         fontSize: 12,
@@ -198,7 +321,7 @@ window.__ModuleLoader__.load({
         gap: 5,
         border: `1px solid ${colors.border}`,
         borderRadius: 6,
-        background: colors.code,
+        background: colors.layer2,
         color: colors.text,
         fontFamily: "inherit",
         fontSize: 11,
@@ -233,7 +356,7 @@ window.__ModuleLoader__.load({
         color: colors.text,
       },
       dropdownItemActive: {
-        background: colors.code,
+        background: colors.layer2,
         color: colors.accent,
         fontWeight: 600,
       },
@@ -356,73 +479,100 @@ window.__ModuleLoader__.load({
     }
 
     // ── 展示件 ───────────────────────────────────────────────────────
+    const COLLAPSE_CHARS = 900;
+
+    /** 一条消息正文：过长时默认收起。内层不滚动，滚轮交给外层容器统一处理。 */
+    function MessageBody({ text }) {
+      const [expanded, setExpanded] = useState(false);
+      const value = String(text || "");
+      const isLong = value.length > COLLAPSE_CHARS;
+      const shown = expanded || !isLong ? value : `${value.slice(0, COLLAPSE_CHARS)}…`;
+
+      return h(
+        "div",
+        null,
+        h("div", { style: styles.messageText }, shown),
+        isLong
+          ? h(
+              "button",
+              {
+                type: "button",
+                style: styles.linkBtn,
+                onClick: () => setExpanded(!expanded),
+              },
+              expanded ? "收起" : `展开全文（${value.length} 字）`,
+            )
+          : null,
+      );
+    }
+
     function TurnBlock({ turn, index }) {
       const meta = turn.meta || {};
       const usage = meta.usage;
+      const model = meta.actualModel || meta.model || "";
+      const effort = meta.actualEffort || meta.reasoning || "";
+
       return h(
         "div",
         { style: styles.turn },
         h(
           "div",
-          { style: styles.rowBetween },
-          h("div", { style: styles.label }, `第 ${index + 1} 轮 · ${formatTime(turn.at)}`),
-          h(
-            "div",
-            { style: styles.meta },
-            (meta.actualModel || meta.model) ? h("span", null, meta.actualModel || meta.model) : null,
-            (meta.actualEffort || meta.reasoning)
-              ? h("span", null, `推理 ${meta.actualEffort || meta.reasoning}`)
-              : null,
-            usage
-              ? h(
-                  "span",
-                  { title: `input ${usage.input_tokens} / cached ${usage.cached_input_tokens ?? 0}` },
-                  `${Math.round((usage.input_tokens || 0) / 1000)}k in`,
-                )
-              : null,
-          ),
+          { style: styles.turnHead },
+          h("span", { style: styles.turnIndex }, `#${index + 1}`),
+          h("span", { style: styles.turnTime }, formatTime(turn.at)),
+          model ? h("span", { style: styles.pill }, model) : null,
+          effort ? h("span", { style: styles.pill }, `推理 ${effort}`) : null,
+          usage
+            ? h(
+                "span",
+                {
+                  style: styles.pillMuted,
+                  title: `input ${usage.input_tokens} / cached ${usage.cached_input_tokens ?? 0}`,
+                },
+                `${Math.round((usage.input_tokens || 0) / 1000)}k in`,
+              )
+            : null,
+        ),
+        h(
+          "div",
+          { style: styles.messageAsk },
+          h("div", { style: styles.messageLabel }, "我 → GPT"),
+          h(MessageBody, { text: turn.prompt || "(空)" }),
+        ),
+        h(
+          "div",
+          { style: styles.messageReply },
+          h("div", { style: styles.messageLabel }, "GPT → 我"),
+          h(MessageBody, { text: turn.reply || "(空)" }),
         ),
-        h("div", { style: styles.label }, "提问"),
-        h("pre", { style: styles.pre }, turn.prompt || "(空)"),
-        h("div", { style: { ...styles.label, marginTop: 8 } }, "GPT 回复"),
-        h("pre", { style: styles.pre }, turn.reply || "(空)"),
       );
     }
 
     /**
-     * Codex 会话库回读：rollout 里可能包含用户在 Codex 软件里继续的轮次，
-     * 那些不在桥的记录里，标成「Codex 侧新增」。
+     * 只列「在 Codex 里继续、桥不知道」的那些轮次。
+     * 桥已经记过的问答不再重复展示——否则同一段内容会在这里出现第二遍。
      */
     function CodexTimeline({ timeline }) {
       const [expanded, setExpanded] = useState(false);
-      const messages = timeline?.messages ?? [];
-      if (messages.length === 0) return null;
-      const COLLAPSED = 3;
-      const shown = expanded ? messages : messages.slice(-COLLAPSED);
-      const externalCount = messages.filter((m) => m.external).length;
+      const external = (timeline && timeline.messages ? timeline.messages : []).filter(
+        (message) => message.external,
+      );
+      if (external.length === 0) return null;
+
+      const COLLAPSED = 2;
+      const shown = expanded ? external : external.slice(-COLLAPSED);
 
       return h(
         "div",
-        {
-          style: {
-            marginTop: 12,
-            borderTop: `1px dashed ${colors.border}`,
-            paddingTop: 10,
-          },
-        },
+        { style: styles.externalBlock },
         h(
           "div",
           { style: styles.rowBetween },
-          h(
-            "div",
-            { style: styles.label },
-            `Codex 会话原文 · ${messages.length} 条`,
-            externalCount > 0 ? `（${externalCount} 条 Codex 侧新增）` : "",
-          ),
-          messages.length > COLLAPSED
+          h("div", { style: styles.externalTitle }, `在 Codex 里继续的 ${external.length} 条`),
+          external.length > COLLAPSED
             ? h(
                 "button",
-                { type: "button", style: styles.btn, onClick: () => setExpanded(!expanded) },
+                { type: "button", style: styles.linkBtn, onClick: () => setExpanded(!expanded) },
                 expanded ? "收起" : "展开全部",
               )
             : null,
@@ -430,19 +580,13 @@ window.__ModuleLoader__.load({
         shown.map((message, index) =>
           h(
             "div",
-            { key: index, style: { marginTop: 8 } },
+            { key: index, style: styles.externalItem },
             h(
               "div",
-              {
-                style: {
-                  ...styles.label,
-                  color: message.external ? colors.accent : undefined,
-                },
-              },
-              message.role === "user" ? "用户" : "GPT",
-              message.external ? " · Codex 侧新增" : "",
+              { style: styles.messageLabel },
+              message.role === "user" ? "你（Codex 侧）" : "GPT（Codex 侧）",
             ),
-            h("pre", { style: styles.pre }, message.text || "(空)"),
+            h(MessageBody, { text: message.text || "(空)" }),
           ),
         ),
       );
@@ -673,40 +817,80 @@ window.__ModuleLoader__.load({
     }
 
     function ConversationList({ conversations, selected, onSelect, detail, detailError, detailLoading }) {
+      const [promoteNote, setPromoteNote] = useState({});
+
+      /** 按需把某段会话标记成 Codex App 可见（改完要重启 App 才会出现）。 */
+      const promoteToApp = async (item, threadId) => {
+        try {
+          const response = await fetch(`${ROUTE}/promote`, {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ threadId }),
+          });
+          let body = null;
+          try {
+            body = await response.json();
+          } catch {
+            body = null;
+          }
+          if (!response.ok) throw new Error(body?.error || `HTTP ${response.status}`);
+          setPromoteNote((prev) => ({
+            ...prev,
+            [item.id]: "已标记为 Codex 可见，重启 Codex App 后可在那边继续这条对话",
+          }));
+        } catch (err) {
+          setPromoteNote((prev) => ({
+            ...prev,
+            [item.id]: `标记失败：${String(err?.message ?? err)}`,
+          }));
+        }
+      };
+
       return h(
         "div",
         { style: styles.list },
-        conversations.map((item) =>
-          h(
+        conversations.map((item) => {
+          const isOpen = item.id === selected;
+          return h(
             "div",
             {
               key: item.id,
-              style: { ...styles.card, ...(item.id === selected ? styles.cardActive : null) },
-              onClick: () => onSelect(item.id === selected ? "" : item.id),
-              role: "button",
-              tabIndex: 0,
-              onKeyDown: (event) => {
-                if (event.key === "Enter" || event.key === " ") {
-                  event.preventDefault();
-                  onSelect(item.id === selected ? "" : item.id);
-                }
-              },
+              className: "cbh-card",
+              style: { ...styles.card, ...(isOpen ? styles.cardActive : null) },
             },
-            h("div", { style: styles.cardTitle }, item.title),
+            /* 只有头部负责展开/收起。详情里的按钮不冒泡到这里，否则点「展开全文」会把卡片收起来。 */
             h(
               "div",
-              { style: styles.meta },
-              h("span", null, formatTime(item.updatedAt)),
-              h("span", null, `${item.turnCount} 轮`),
-              item.model ? h("span", null, item.model) : null,
-              item.reasoning ? h("span", null, `推理 ${item.reasoning}`) : null,
-              item.threadId ? h("span", null, `#${item.threadId.slice(0, 6)}`) : null,
-              item.legacy ? h("span", null, "旧记录") : null,
+              {
+                style: styles.cardHead,
+                role: "button",
+                tabIndex: 0,
+                "aria-expanded": isOpen,
+                onClick: () => onSelect(isOpen ? "" : item.id),
+                onKeyDown: (event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    onSelect(isOpen ? "" : item.id);
+                  }
+                },
+              },
+              h("div", { style: styles.cardTitle }, item.title),
+              h(
+                "div",
+                { style: styles.meta },
+                h("span", null, formatTime(item.updatedAt)),
+                h("span", null, `${item.turnCount} 轮`),
+                item.model ? h("span", null, item.model) : null,
+                item.reasoning ? h("span", null, `推理 ${item.reasoning}`) : null,
+                item.threadId ? h("span", null, `#${item.threadId.slice(0, 6)}`) : null,
+                item.legacy ? h("span", null, "旧记录") : null,
+              ),
+              h("span", { style: styles.chevron }, isOpen ? "▾" : "▸"),
             ),
-            item.id === selected
+            isOpen
               ? h(
                   "div",
-                  null,
+                  { style: styles.cardBody },
                   detailLoading ? h("div", { style: styles.empty }, "载入中…") : null,
                   detailError ? h("div", { style: styles.error }, detailError) : null,
                   detail
@@ -716,10 +900,26 @@ window.__ModuleLoader__.load({
                         detail.threadId
                           ? h(
                               "div",
-                              { style: { ...styles.meta, marginTop: 8 } },
-                              h("span", null, `Codex 会话 ${detail.threadId}`),
+                              { style: styles.threadRow },
+                              h("span", { style: styles.threadText }, `Codex 会话 ${detail.threadId}`),
+                              h(
+                                "button",
+                                {
+                                  type: "button",
+                                  style: styles.linkBtn,
+                                  title: "把这条会话标记成 Codex App 可见（之后重启 App 就能在那边继续）",
+                                  onClick: (event) => {
+                                    event.stopPropagation();
+                                    void promoteToApp(item, detail.threadId);
+                                  },
+                                },
+                                "转移到 Codex",
+                              ),
                             )
                           : null,
+                        promoteNote[item.id]
+                          ? h("div", { style: styles.okNote }, promoteNote[item.id])
+                          : null,
                         (detail.turns || []).map((turn, index) =>
                           h(TurnBlock, { key: turn.id, turn, index }),
                         ),
@@ -728,8 +928,8 @@ window.__ModuleLoader__.load({
                     : null,
                 )
               : null,
-          ),
-        ),
+          );
+        }),
       );
     }
 
@@ -745,7 +945,36 @@ window.__ModuleLoader__.load({
     }
 
     // ── 侧栏主面板 ───────────────────────────────────────────────────
+    /**
+     * 左侧栏「GPT 对话」图标对应的主面板。
+     *
+     * DSH 点这个图标一定会切主面板，所以这里挂载后：
+     *   1. 先 openResource —— 它自己会 "reveal the column"（展开右侧栏）；
+     *   2. 再延迟一点把主面板切回对话。
+     * 不能反过来：selectPanel 会重置布局，把刚展开的右栏又关掉。
+     */
     function BridgePanel() {
+      useEffect(() => {
+        bridgeOpeners.open();
+
+        const timer = setTimeout(() => {
+          if (!bridgeLayout) return;
+          try {
+            bridgeLayout.selectPanel(null);
+          } catch (error) {
+            console.error("[codex-bridge] 切回对话面板失败", error);
+          }
+        }, 150);
+
+        return () => clearTimeout(timer);
+      }, []);
+
+      return h("div", { style: styles.root });
+    }
+
+    // ── 右侧抽屉 ─────────────────────────────────────────────────────
+    /** 侧栏 tab 与抽屉共用的内容体。onClose 为空表示宿主自己有关闭控件（右侧栏 tab）。 */
+    function BridgeContent({ onClose }) {
       const { data, error, reload } = useConversationList(15000);
       const [selected, setSelected] = useState("");
       const { detail, error: detailError, loading } = useConversationDetail(selected);
@@ -754,25 +983,51 @@ window.__ModuleLoader__.load({
 
       return h(
         "div",
-        { style: styles.root },
+        { style: styles.content },
         h(
           "div",
           { style: styles.head },
           h(
             "div",
             null,
-            h("h2", { style: styles.headTitle }, "GPT 对话"),
+            h("div", { style: styles.headTitle }, "GPT 对话"),
             h(
               "div",
               { style: styles.headSub },
               `Codex 桥 · ${conversations.length} 段会话${defaultsLabel(data?.defaults)}`,
             ),
           ),
-          h("button", { type: "button", style: styles.btn, onClick: () => void reload() }, "刷新"),
+          h(
+            "div",
+            { style: styles.headActions },
+            h("button", { type: "button", style: styles.btn, onClick: () => void reload() }, "刷新"),
+            onClose
+              ? h(
+                  "button",
+                  {
+                    type: "button",
+                    style: styles.iconBtn,
+                    title: "关闭 (Esc)",
+                    "aria-label": "关闭",
+                    onClick: onClose,
+                  },
+                  h(
+                    "svg",
+                    { viewBox: "0 0 16 16", width: 14, height: 14, fill: "none", "aria-hidden": true },
+                    h("path", {
+                      d: "M4 4l8 8M12 4l-8 8",
+                      stroke: "currentColor",
+                      strokeWidth: 1.6,
+                      strokeLinecap: "round",
+                    }),
+                  ),
+                )
+              : null,
+          ),
         ),
         h(
           "div",
-          { style: styles.body },
+          { style: styles.body, className: "cbh-scroll" },
           error ? h("div", { style: styles.error }, error) : null,
           data && conversations.length === 0 ? h(EmptyState, { hasList: true }) : null,
           !data && !error ? h(EmptyState, { hasList: false }) : null,
@@ -797,15 +1052,32 @@ window.__ModuleLoader__.load({
       );
     }
 
-    // ── 右侧抽屉 ─────────────────────────────────────────────────────
+    /** 右侧栏 tab 的 body。宿主提供标题与关闭，这里只画内容。 */
+    function BridgeTab() {
+      return h(BridgeContent, {});
+    }
+
     function BridgeDrawer() {
       const open = useDrawerOpen();
-      // 抽屉常驻挂载（关闭时只是隐藏），避免每次打开都重新拉数据、也方便保留展开状态。
-      const { data, error, reload } = useConversationList(open ? 15000 : 0);
-      const [selected, setSelected] = useState("");
-      const { detail, error: detailError, loading } = useConversationDetail(selected);
-      const conversations = data?.conversations ?? [];
-      const activeConversation = conversations.find((item) => item.id === selected) || null;
+
+      // 宽度可拖拽，记在 localStorage，下次打开沿用。
+      const [width, setWidth] = useState(() => {
+        try {
+          const saved = Number(window.localStorage.getItem(DRAWER_WIDTH_KEY));
+          if (Number.isFinite(saved) && saved >= 320 && saved <= 960) return saved;
+        } catch {
+          /* 隐私模式读不到 localStorage */
+        }
+        return DRAWER_WIDTH;
+      });
+
+      useEffect(() => {
+        try {
+          window.localStorage.setItem(DRAWER_WIDTH_KEY, String(width));
+        } catch {
+          /* 忽略写入失败 */
+        }
+      }, [width]);
 
       useEffect(() => {
         if (!open) return undefined;
@@ -820,70 +1092,29 @@ window.__ModuleLoader__.load({
 
       return h(
         "div",
-        { style: styles.drawer, role: "dialog", "aria-label": "GPT 对话" },
-        h(
-          "div",
-          { style: styles.head },
-          h(
-            "div",
-            null,
-            h("h2", { style: styles.headTitle }, "GPT 对话"),
-            h(
-              "div",
-              { style: styles.headSub },
-              `Codex 桥 · ${conversations.length} 段会话${defaultsLabel(data?.defaults)}`,
-            ),
-          ),
-          h(
-            "div",
-            { style: styles.headActions },
-            h("button", { type: "button", style: styles.btn, onClick: () => void reload() }, "刷新"),
-            h(
-              "button",
-              {
-                type: "button",
-                style: styles.iconBtn,
-                title: "关闭 (Esc)",
-                "aria-label": "关闭",
-                onClick: () => setDrawerOpen(false),
-              },
-              h(
-                "svg",
-                { viewBox: "0 0 16 16", width: 14, height: 14, fill: "none", "aria-hidden": true },
-                h("path", {
-                  d: "M4 4l8 8M12 4l-8 8",
-                  stroke: "currentColor",
-                  strokeWidth: 1.6,
-                  strokeLinecap: "round",
-                }),
-              ),
-            ),
-          ),
-        ),
-        h(
-          "div",
-          { style: styles.body },
-          error ? h("div", { style: styles.error }, error) : null,
-          data && conversations.length === 0 ? h(EmptyState, { hasList: true }) : null,
-          !data && !error ? h(EmptyState, { hasList: false }) : null,
-          conversations.length > 0
-            ? h(ConversationList, {
-                conversations,
-                selected,
-                onSelect: setSelected,
-                detail,
-                detailError,
-                detailLoading: loading,
-              })
-            : null,
-        ),
-        h(Composer, {
-          conversation: activeConversation,
-          onSent: (result) => {
-            if (result && result.conversationId) setSelected(result.conversationId);
-            void reload();
+        { style: { ...styles.drawer, width }, role: "dialog", "aria-label": "GPT 对话" },
+        h("div", {
+          style: styles.resizeHandle,
+          title: "拖动调整宽度",
+          onMouseDown: (event) => {
+            event.preventDefault();
+            const startX = event.clientX;
+            const startWidth = width;
+            const onMove = (moveEvent) => {
+              const next = Math.min(960, Math.max(320, startWidth + (startX - moveEvent.clientX)));
+              setWidth(next);
+            };
+            const onUp = () => {
+              document.removeEventListener("mousemove", onMove);
+              document.removeEventListener("mouseup", onUp);
+              document.body.style.cursor = "";
+            };
+            document.body.style.cursor = "col-resize";
+            document.addEventListener("mousemove", onMove);
+            document.addEventListener("mouseup", onUp);
           },
         }),
+        h(BridgeContent, { onClose: () => setDrawerOpen(false) }),
       );
     }
 
@@ -912,7 +1143,47 @@ window.__ModuleLoader__.load({
       return h(BridgeGlyph, { size: props?.size ?? 18 });
     }
 
-    /** 会话头部按钮：切换右侧抽屉。 */
+
+    /**
+     * 左下角按钮（Settings 旁，和催更姬同一位置）。
+     * 这里不切主面板，所以 sidebarRight.mounted 仍然指向当前会话，
+     * openResource 才拿得到 session surface（左侧栏图标做不到这点，见 README）。
+     * props.wide 由宿主给出：false 时侧栏是 56px 轨道，只画图标。
+     */
+    function BridgeFooterAction(props) {
+      const wide = props && props.wide !== false;
+      return h(
+        "button",
+        {
+          type: "button",
+          title: "打开 GPT 对话（右侧栏）",
+          "aria-label": "GPT 对话",
+          onClick: () => bridgeOpeners.open(),
+          style: {
+            appearance: "none",
+            border: "none",
+            background: "transparent",
+            color: "inherit",
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: wide ? "flex-start" : "center",
+            gap: 8,
+            padding: "6px 8px",
+            borderRadius: 6,
+            width: "100%",
+            fontFamily: "inherit",
+            fontSize: 12,
+            lineHeight: "18px",
+            opacity: 0.82,
+          },
+        },
+        h(BridgeGlyph, { size: 16 }),
+        wide ? h("span", null, "GPT") : null,
+      );
+    }
+
+    /** 会话头部按钮：打开 GPT 对话（优先激活右侧栏 tab）。 */
     function BridgeToggle() {
       const open = useDrawerOpen();
       return h(
@@ -933,39 +1204,125 @@ window.__ModuleLoader__.load({
             opacity: open ? 1 : 0.78,
             padding: 0,
           },
-          title: open ? "关闭 GPT 对话" : "打开 GPT 对话",
+          title: "打开 GPT 对话",
           "aria-label": "GPT 对话",
-          "aria-pressed": open,
-          onClick: () => setDrawerOpen(!open),
+          onClick: () => bridgeOpeners.open(),
         },
         h(BridgeGlyph, { size: 16 }),
       );
     }
 
     return {
-      inject: ["slots"],
+      // 注意：Cordis 的 Client 插件必须在这里声明要用的服务，否则 ctx.<service> 不可见。
+      // sidebarRightTabs / sidebarRight 由 @deepseek-ai/dsh-client-ui-sidebar-right 提供。
+      inject: ["slots", "sidebarRight", "sidebarRightTabs", "layout"],
       apply(ctx) {
-        // 1) 侧栏面板入口 + 主面板
-        ctx.slots.inject("sidebar.panellist", () =>
+        bridgeLayout = ctx.layout || null;
+
+        // 局部样式：hover 与滚动条是伪类，内联样式写不了。
+        ctx.effect(() => {
+          const style = document.createElement("style");
+          style.dataset.plugin = "dsh-codex-handoff";
+          style.textContent = [
+            ".cbh-card{transition:background .15s ease,border-color .15s ease}",
+            ".cbh-card:hover{background:rgba(127,127,127,.10)}",
+            ".cbh-scroll{scrollbar-width:thin;scrollbar-color:rgba(127,127,127,.35) transparent}",
+            ".cbh-scroll::-webkit-scrollbar{width:9px;height:9px}",
+            ".cbh-scroll::-webkit-scrollbar-thumb{background:rgba(127,127,127,.32);border-radius:5px}",
+            ".cbh-scroll::-webkit-scrollbar-thumb:hover{background:rgba(127,127,127,.5)}",
+            ".cbh-scroll::-webkit-scrollbar-track{background:transparent}",
+          ].join("\n");
+          document.head.append(style);
+          return () => style.remove();
+        }, "codex-bridge: local styles");
+
+        // 1) 左下角按钮（Settings 旁）：不切主面板，
+        //    sidebarRight.mounted 仍指向当前会话，openResource 才能拿到 session surface。
+        ctx.slots.inject("sidebar.footer.action", () =>
           ctx.slots.register(
-            { name: "sidebar.panellist", id: "codex-bridge", order: 30, label: "GPT 对话" },
-            BridgePanelIcon,
+            { name: "sidebar.footer.action", id: "codex-bridge", order: 42, label: "GPT 对话" },
+            BridgeFooterAction,
           ),
         );
-        ctx.slots.inject("main", () =>
-          ctx.slots.register({ name: "main", key: "codex-bridge" }, BridgePanel),
-        );
 
-        // 2) 会话头部按钮 + 右侧抽屉
+        // 2) 会话头部按钮（快捷入口，同样不切面板）
         ctx.slots.inject("conversation.session.header.utilities", () =>
           ctx.slots.register(
             { name: "conversation.session.header.utilities", id: "codex-bridge-toggle", order: 2 },
             BridgeToggle,
           ),
         );
-        ctx.slots.inject("shell.overlay", () =>
-          ctx.slots.register({ name: "shell.overlay", id: "codex-bridge.drawer", order: 40 }, BridgeDrawer),
-        );
+        // 左侧栏图标 + main 面板已移除：点图标必然切走 conversation，
+        // 导致 sidebarRight.mounted 为空，openResource 直接抛
+        // "no session surface is mounted"，那个入口在 DSH 里走不通。
+
+        // 3) 右侧栏 tab。宿主服务未就绪或抛错时，上面的入口仍然可用。
+        //    sidebarRightTabs / sidebarRight 由 @deepseek-ai/dsh-client-ui-sidebar-right 提供，
+        //    激活顺序不保证，所以短轮询等待；访问未知服务可能抛错，全部包在 try 里。
+        const registerSidebarTab = (remaining) => {
+          let rightTabs;
+          let rightPane;
+          try {
+            rightTabs =
+              ctx.sidebarRightTabs ||
+              (typeof ctx.get === "function" ? ctx.get("sidebarRightTabs") : undefined);
+            rightPane =
+              ctx.sidebarRight || (typeof ctx.get === "function" ? ctx.get("sidebarRight") : undefined);
+          } catch {
+            rightTabs = undefined;
+            rightPane = undefined;
+          }
+
+          if (rightTabs && rightPane) {
+            try {
+              ctx.effect(
+                () =>
+                  rightTabs.register({
+                    id: TAB_ID,
+                    kind: "codex-bridge",
+                    keepMounted: true,
+                    patterns: ["dsh-resource://codex-bridge/**"],
+                    title: () => "GPT 对话",
+                  }),
+                "codex-bridge: sidebar-right tab",
+              );
+              ctx.slots.inject("sidebar.right.pane.tab", () =>
+                ctx.slots.register({ name: "sidebar.right.pane.tab", key: TAB_ID }, BridgeTab),
+              );
+              bridgeOpeners.open = () => {
+                // 先 openResource：催更姬只调这一个就能把右栏带出来，是最可靠的一步。
+                try {
+                  rightPane.openResource(TAB_RESOURCE);
+                } catch (error) {
+                  console.error("[codex-bridge] openResource 失败", error);
+                }
+                // 再尝试显式展开右栏；它若抛错不能影响上面那一步。
+                try {
+                  if (typeof ctx.layout?.openRightbar === "function") {
+                    ctx.layout.openRightbar(true, false);
+                  }
+                } catch (error) {
+                  console.error("[codex-bridge] openRightbar 失败", error);
+                }
+              };
+              console.info("[codex-bridge] 已注册右侧栏 tab");
+            } catch (error) {
+              console.error("[codex-bridge] 注册右侧栏 tab 失败，保留浮层抽屉", error);
+            }
+            return;
+          }
+
+          if (remaining > 0) {
+            setTimeout(() => registerSidebarTab(remaining - 1), 250);
+          } else {
+            console.warn("[codex-bridge] 右侧栏服务不可用，使用浮层抽屉作为回退");
+          }
+        };
+        try {
+          registerSidebarTab(24);
+        } catch (error) {
+          console.error("[codex-bridge] 注册右侧栏 tab 失败，保留浮层抽屉", error);
+        }
       },
     };
   },

package/lib/index.js

@@ -221,6 +221,68 @@ function codexHomeDir() {
   return process.env.CODEX_HOME || path.join(os.homedir(), ".codex");
 }
 
+// ── 让 exec 会话在 Codex App 里可见 ──────────────────────────────────
+//
+// Codex 桌面版的会话列表只列出 `source = "vscode"` 的线程（实测：App 里能看到的
+// 全是 vscode，CLI 产生的是 exec，即使 rollout、projection、turns 都齐全也不显示）。
+// `codex exec --thread-source vscode` 实测无效（写入的仍是 exec），所以只能事后把
+// `state_N.sqlite` 里这一条的 source 改成 vscode。只动这一个字段，失败不影响主流程。
+// 用 Node 内置的 node:sqlite（Node >= 22.5），不可用时静默跳过。
+
+let sqliteModule;
+async function loadSqlite() {
+  if (sqliteModule !== undefined) return sqliteModule;
+  try {
+    sqliteModule = await import("node:sqlite");
+  } catch {
+    sqliteModule = null;
+  }
+  return sqliteModule;
+}
+
+/** 找版本号最大的 state_N.sqlite（Codex 升级会换文件名）。 */
+function findStateDb() {
+  const dir = codexHomeDir();
+  try {
+    const names = fs
+      .readdirSync(dir)
+      .filter((name) => /^state_\d+\.sqlite$/.test(name))
+      .sort((a, b) => {
+        const na = Number((a.match(/\d+/) || [0])[0]);
+        const nb = Number((b.match(/\d+/) || [0])[0]);
+        return nb - na;
+      });
+    return names.length > 0 ? path.join(dir, names[0]) : "";
+  } catch {
+    return "";
+  }
+}
+
+async function promoteThreadForApp(threadId) {
+  if (!threadId) return false;
+  if (process.env.DSH_CODEX_BRIDGE_APP_VISIBLE === "0") return false;
+
+  const sqlite = await loadSqlite();
+  if (!sqlite || typeof sqlite.DatabaseSync !== "function") return false;
+
+  const dbPath = findStateDb();
+  if (!dbPath) return false;
+
+  try {
+    const db = new sqlite.DatabaseSync(dbPath);
+    try {
+      db.exec("PRAGMA busy_timeout = 3000");
+      db.prepare("UPDATE threads SET source = 'vscode' WHERE id = ? AND source LIKE 'exec%'").run(threadId);
+    } finally {
+      db.close();
+    }
+    return true;
+  } catch (error) {
+    console.error(`[codex-bridge] 无法把会话标记为 Codex App 可见: ${String(error)}`);
+    return false;
+  }
+}
+
 function listRolloutFiles() {
   if (Date.now() - rolloutIndexCache.at < 30000 && rolloutIndexCache.files.length > 0) {
     return rolloutIndexCache.files;
@@ -867,13 +929,14 @@ function makeHandler(ctx, resolveWorkspace) {
     const rest = (url.pathname || "").slice(ROUTE_PREFIX.length).replace(/^\/+/, "");
 
     try {
-      // POST /api/codex-bridge/send —— 发一轮真实对话（会消耗 Codex 额度）。
-      // 注意：resource 路由只能 GET/HEAD，所以这里用 handler 收 POST。
+      // POST /api/codex-bridge/send   —— 发一轮真实对话（会消耗 Codex 额度）
+      // POST /api/codex-bridge/promote —— 把某段会话标记成 Codex App 可见（按需触发，改完需重启 App）
       if (req.method === "POST") {
-        if (rest !== "send") {
+        if (rest !== "send" && rest !== "promote") {
           send(404, { error: "not found" });
           return;
         }
+
         const chunks = [];
         for await (const chunk of req) chunks.push(chunk);
         let body = {};
@@ -882,6 +945,25 @@ function makeHandler(ctx, resolveWorkspace) {
         } catch {
           body = {};
         }
+
+        if (rest === "promote") {
+          const conversationId = String(body?.conversationId || "");
+          const threadId = String(body?.threadId || "");
+          let targetThread = threadId;
+          if (!targetThread && conversationId) {
+            const index = readIndex(root);
+            const found = findConversation(index, conversationId);
+            targetThread = found?.threadId || "";
+          }
+          if (!targetThread) {
+            send(400, { error: "找不到该对话的 Codex thread" });
+            return;
+          }
+          const ok = await promoteThreadForApp(targetThread);
+          send(200, { ok, threadId: targetThread });
+          return;
+        }
+
         const result = await sendTurn(undefined, {
           workspace,
           conversationId: String(body?.conversationId || ""),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-codex-handoff",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "GPT/Codex 对话桥：把本机 Codex CLI 的多轮会话接进 DSH，侧栏与右侧抽屉可查看往来，会话落进 Codex 会话库并可 resume 续接；提供 codex_gpt 工具与模型/推理强度切换。",
   "type": "module",
   "main": "lib/index.js",
@@ -24,7 +24,11 @@
     },
     "client": {
       "platform": "web",
-      "immediately": true
+      "immediately": true,
+      "inject": [
+        "@deepseek-ai/dsh-client-ui-sidebar-right",
+        "@deepseek-ai/dsh-client-ui-session"
+      ]
     }
   },
   "license": "MIT",