@cocorograph/hub-agent 0.6.24 → 0.6.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocorograph/hub-agent",
-  "version": "0.6.24",
+  "version": "0.6.26",
   "description": "Hub Hosted Cockpit のローカル常駐 agent。Hub と outbound WSS で接続し、ローカルの tmux/pty を中継する。",
   "type": "module",
   "license": "UNLICENSED",

package/src/claude-stream-bridge.mjs

@@ -195,10 +195,15 @@ class ClaudeStreamSession {
 
     /** 改修3: per-message セッションで busy 中に届いた送信を退避する pending キュー。
      *  常駐 query 化 (改修2) とは別レイヤー。resume チェーンは維持したまま、現ターン
-     *  完了時 (finally) に先頭から drain して次ターンを自動発火する。 */
+     *  完了時 (finally) に先頭から drain して次ターンを自動発火する。
+     *  キャンセル機能 (0.6.26): 各項目に安定 id を振り、browser から id 指定で
+     *  個別削除できるようにする。要素は { id: string, text: string }。 */
     this._pendingMessages = []
-    /** 改修3: 直近 browser へ通知した pending 件数 (変化時のみ queue_state を emit する)。 */
-    this._lastEmittedQueueCount = 0
+    /** キャンセル機能: pending 項目へ安定 id を振るための連番カウンタ。 */
+    this._queueSeq = 0
+    /** 改修3: 直近 browser へ通知した queue 署名 (件数 + id 列)。変化時のみ emit する。
+     *  空キューの署名 ("0:") で初期化し、空→空の冗長 emit を抑止する。 */
+    this._lastEmittedQueueSig = "0:"
 
     /** @type {Map<string, {resolve: (decision: object) => void}>} permission 応答待ち */
     this._permissionResolvers = new Map()
@@ -420,7 +425,7 @@ class ClaudeStreamSession {
       // 次を push すると SDK streaming-input で割り込み扱いになり得るため (公式 interrupt 警告)。
       // pending は queue_state で UI (送信待ちチップ) に出す (per-message と同じ体験)。
       if (this._busy) {
-        this._pendingMessages.push(prompt)
+        this._enqueuePending(prompt)
         this.logger?.info(
           { stream_id: this.stream_id, queued: this._pendingMessages.length },
           "resident busy, message queued",
@@ -444,7 +449,7 @@ class ClaudeStreamSession {
     // 改修3: busy 中の送信は破棄せず pending キューへ退避し、現ターン完了時に drain する
     // (ターミナル流の「積む→待機→順次実行」)。常駐 query 化はしないので暴走リスクは増えない。
     if (this._busy) {
-      this._pendingMessages.push(prompt)
+      this._enqueuePending(prompt)
       this.logger?.info(
         { stream_id: this.stream_id, queued: this._pendingMessages.length },
         "claude busy, message queued",
@@ -573,8 +578,8 @@ class ClaudeStreamSession {
       return
     }
     const next = this._pendingMessages.shift()
-    this._emitQueueState()
-    this._runPerMessage(next).catch((err) => {
+    this._emitQueueState([next.text])
+    this._runPerMessage(next.text).catch((err) => {
       this.logger?.error(
         { stream_id: this.stream_id, err: err?.message },
         "drain runPerMessage threw",
@@ -582,20 +587,53 @@ class ClaudeStreamSession {
     })
   }
 
+  /** キャンセル機能 (0.6.26): pending キューへ安定 id 付きで 1 件積む。 */
+  _enqueuePending(prompt) {
+    const id = `q${++this._queueSeq}`
+    this._pendingMessages.push({ id, text: prompt })
+    return id
+  }
+
+  /** キャンセル機能 (0.6.26): browser から id 指定で送信待ちメッセージを 1 件取り消す。
+   *  実行開始済み (既に drain された) メッセージは pending に残っていないので no-op になる。
+   *  削除に成功したら queue_state を再 emit して送信待ちチップを更新する。 */
+  cancelQueued(id) {
+    const before = this._pendingMessages.length
+    this._pendingMessages = this._pendingMessages.filter((m) => m.id !== id)
+    const removed = before !== this._pendingMessages.length
+    if (removed) {
+      this.logger?.info(
+        { stream_id: this.stream_id, id, queued: this._pendingMessages.length },
+        "queued message canceled",
+      )
+      this._emitQueueState()
+    }
+    return removed
+  }
+
   /** 改修3: pending キューの現状を browser へ通知する (送信待ちチップ表示用)。
-   *  onEvent 経由で claude.event(event.type="queue_state") として届く。 */
-  _emitQueueState() {
+   *  onEvent 経由で claude.event(event.type="queue_state") として届く。
+   *  @param {string[]} [started] このタイミングで pending から取り出して実行開始した
+   *   メッセージ本文。drain 由来の emit でのみ渡す。frontend はこれを user バブルへ
+   *   昇格させる。キャンセル / 追加由来の emit では空 (昇格させない)。これにより
+   *   「先頭の pending をキャンセルした」のを「実行開始した」と誤認しなくなる (0.6.26)。 */
+  _emitQueueState(started = []) {
     const count = this._pendingMessages.length
-    // 件数が変わらないなら通知しない (空→空の冗長 emit を抑止)。
-    if (count === this._lastEmittedQueueCount) return
-    this._lastEmittedQueueCount = count
+    // 署名 = 件数 + id 列。件数が同じでもキャンセルで中身が変われば通知する。
+    const sig = `${count}:${this._pendingMessages.map((m) => m.id).join(",")}`
+    // started があるときは drain なので、sig 変化が無くても (理論上起きないが) 通知する。
+    if (started.length === 0 && sig === this._lastEmittedQueueSig) return
+    this._lastEmittedQueueSig = sig
     try {
       // messages は全文を載せる。frontend は実行開始 (drain) 時にこれを user バブルへ
       // 昇格させるため、ここで切り詰めると本文が欠ける。チップの省略表示は CSS 側で行う。
+      // items は id 付きでキャンセルボタンの対象特定に使う (0.6.26)。
       this.onEvent?.({
         type: "queue_state",
         pending: count,
-        messages: [...this._pendingMessages],
+        messages: this._pendingMessages.map((m) => m.text),
+        items: this._pendingMessages.map((m) => ({ id: m.id, text: m.text })),
+        started,
       })
     } catch {
       /* ignore */
@@ -623,8 +661,8 @@ class ClaudeStreamSession {
     }
     const next = this._pendingMessages.shift()
     this._busy = true
-    this._inputQueue.push(toSDKUserMessage(next))
-    this._emitQueueState()
+    this._inputQueue.push(toSDKUserMessage(next.text))
+    this._emitQueueState([next.text])
   }
 
   /** 改修2+4: 常駐 query を 1 回だけ起動し、streaming input キューから複数ターンを処理する。
@@ -712,8 +750,8 @@ class ClaudeStreamSession {
         const next = this._pendingMessages.shift()
         this._busy = true
         this._residentStarted = true
-        this._inputQueue.push(toSDKUserMessage(next))
-        this._emitQueueState()
+        this._inputQueue.push(toSDKUserMessage(next.text))
+        this._emitQueueState([next.text])
         this._startResidentQuery()
       }
     }
@@ -990,6 +1028,17 @@ export class ClaudeStreamBridge extends EventEmitter {
     return true
   }
 
+  /** キャンセル機能 (0.6.26): browser → 送信待ち (pending) メッセージを id 指定で取り消す。
+   *  実行中ターンには影響しない (中断は interrupt を使う)。 */
+  cancelQueued({ stream_id, id }) {
+    const s = this.sessions.get(stream_id)
+    if (!s) {
+      this.logger?.warn({ stream_id, id }, "claude.queue.cancel but stream missing")
+      return false
+    }
+    return s.cancelQueued(id)
+  }
+
   /**
    * セッション停止 (graceful)。実行中ターンは中断せず完走させ、完走後に
    * onReap で Map から撤去する。アイドルなら即時撤去。

package/src/claude-upload.mjs

@@ -0,0 +1,226 @@
+/**
+ * Cockpit チャットモードの添付ファイル受信 (browser → agent) を司るモジュール。
+ *
+ * 設計の背景 (WHY):
+ * - Claude が実際に動くのは hub-agent が常駐するローカルマシンで、Hub バックエンド
+ *   とは別ホスト。添付ファイルのバイト列の最終着地点はこのローカル FS であり、
+ *   そこへの転送経路は WS トンネル (claude.* チャネル) しか無い。
+ * - そこで「ファイルを cwd 配下に保存 → 保存パスを browser に返却 → browser は
+ *   claude.input 本文にパス参照を載せる → Claude が Read ツールで読む」という
+ *   パス参照方式を採る。Read ツールは画像 / PDF / ipynb 等をネイティブ対応する
+ *   ため、対応形式を Claude の Read 対応形式に自然に揃えられる。
+ * - 大きいファイルで単一 WS フレームが肥大しないよう、browser 側でチャンク分割
+ *   して送る。本モジュールは upload_id 単位でチャンクをメモリに蓄積し、全チャンク
+ *   到着時に結合して 1 ファイルとして書き出す。
+ *
+ * セキュリティ / 安全策:
+ * - 保存先は cwd 配下の `.cockpit-uploads/<日付>/` 固定。ファイル名は basename 化 +
+ *   パス区切り / 制御文字を除去し、ディレクトリトラバーサルを防ぐ (日本語名は保持)。
+ * - 総サイズ上限 (既定 50MB) と最大チャンク数でメモリ枯渇 / DoS を防ぐ。
+ * - 未完了アップロードは TTL 経過で破棄する (sweep)。
+ */
+
+import { mkdir, writeFile } from "node:fs/promises"
+import os from "node:os"
+import path from "node:path"
+
+/** 保存先のサブディレクトリ名 (cwd 直下に作る)。 */
+export const UPLOAD_DIRNAME = ".cockpit-uploads"
+
+/** 1 ファイルあたりの総サイズ上限 (バイト)。既定 50MB。 */
+const DEFAULT_MAX_TOTAL_BYTES = 50 * 1024 * 1024
+
+/** 1 アップロードあたりの最大チャンク数 (異常値ガード)。 */
+const MAX_CHUNKS = 8192
+
+/** 未完了アップロードの保持上限 (ミリ秒)。これを超えたら破棄する。 */
+const DEFAULT_UPLOAD_TTL_MS = 30 * 60 * 1000
+
+/** 衝突回避用のプロセス内連番。Date.now() と併用してユニーク名を作る。 */
+let _seq = 0
+
+/** 除去対象の文字: 制御文字 (0x00-0x1f) + パス区切り + Windows 予約文字。 */
+// eslint-disable-next-line no-control-regex
+const UNSAFE_NAME_CHARS = new RegExp("[\\u0000-\\u001f<>:\"/\\\\|?*]", "g")
+
+/**
+ * ファイル名をローカル FS に安全な basename へ正規化する。
+ *
+ * - ディレクトリ成分は basename で除去 (`../` トラバーサル対策)
+ * - パス区切り / Windows 予約文字 / 制御文字を `_` へ置換
+ * - 先頭ドット (隠しファイル化) を除去
+ * - Unicode 文字は保持する (日本語ファイル名を壊さない)
+ *
+ * @param {unknown} name 元のファイル名
+ * @returns {string} 安全な basename (空になる場合は "file")
+ */
+export function sanitizeFilename(name) {
+  let base = path.basename(String(name == null ? "" : name))
+  base = base.replace(UNSAFE_NAME_CHARS, "_").replace(/^\.+/, "").trim()
+  base = base.slice(0, 150)
+  return base || "file"
+}
+
+/** `YYYY-MM-DD` 形式の日付文字列を返す (ローカルタイム)。 */
+function todayDir() {
+  const d = new Date()
+  const pad = (n) => String(n).padStart(2, "0")
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+}
+
+/**
+ * 1 stream に紐付かない、プロセス全体で 1 つのアップロード受信器。
+ * upload_id 単位で進行中アップロードを保持する。
+ */
+export class UploadManager {
+  /**
+   * @param {object} opts
+   * @param {object} [opts.logger] pino 互換ロガー
+   * @param {number} [opts.maxTotalBytes] 1 ファイルの総サイズ上限
+   * @param {number} [opts.ttlMs] 未完了アップロードの保持上限 (ミリ秒)
+   */
+  constructor({ logger, maxTotalBytes = DEFAULT_MAX_TOTAL_BYTES, ttlMs = DEFAULT_UPLOAD_TTL_MS } = {}) {
+    this.logger = logger
+    this.maxTotalBytes = maxTotalBytes
+    this.ttlMs = ttlMs
+    /** @type {Map<string, {filename:string, media_type:string, total_size:number, total_chunks:number, chunks:Buffer[], received:number, bytes:number, cwd:(string|undefined), createdAt:number}>} */
+    this._pending = new Map()
+  }
+
+  /** 保存先のベースディレクトリ (cwd 優先、無ければ HOME)。 */
+  _resolveBaseDir(cwd) {
+    return cwd && typeof cwd === "string" ? cwd : os.homedir()
+  }
+
+  /**
+   * チャンク 1 件を受理する。全チャンク到着で結合 + ファイル書き込みまで行い、
+   * `{ done: true, path, size, filename, media_type }` を返す。継続中は
+   * `{ done: false }` を返す。
+   *
+   * @param {object} chunk
+   * @param {string} chunk.upload_id アップロードの一意 ID (browser 採番)
+   * @param {string} [chunk.filename] 元ファイル名
+   * @param {string} [chunk.media_type] MIME タイプ
+   * @param {number} chunk.total_size 総バイト数 (検証用)
+   * @param {number} chunk.total_chunks 総チャンク数
+   * @param {number} chunk.chunk_index このチャンクの index (0 始まり)
+   * @param {string} chunk.data base64 エンコードされたチャンク本体
+   * @param {string} [chunk.cwd] 保存先解決に使う cwd
+   * @returns {Promise<{done:boolean, path?:string, size?:number, filename?:string, media_type?:string}>}
+   * @throws {Error} バリデーション失敗 / サイズ超過時
+   */
+  async addChunk({
+    upload_id,
+    filename,
+    media_type,
+    total_size,
+    total_chunks,
+    chunk_index,
+    data,
+    cwd,
+  }) {
+    if (!upload_id || typeof upload_id !== "string") {
+      throw new Error("upload_id required")
+    }
+    let rec = this._pending.get(upload_id)
+    if (!rec) {
+      const tc = Number(total_chunks)
+      const ts = Number(total_size)
+      if (!Number.isInteger(tc) || tc < 1 || tc > MAX_CHUNKS) {
+        throw new Error("invalid total_chunks")
+      }
+      if (!Number.isInteger(ts) || ts < 0 || ts > this.maxTotalBytes) {
+        throw new Error(`file too large (max ${this.maxTotalBytes} bytes)`)
+      }
+      rec = {
+        filename,
+        media_type,
+        total_size: ts,
+        total_chunks: tc,
+        chunks: new Array(tc),
+        received: 0,
+        bytes: 0,
+        cwd,
+        createdAt: Date.now(),
+      }
+      this._pending.set(upload_id, rec)
+    }
+
+    const idx = Number(chunk_index)
+    if (!Number.isInteger(idx) || idx < 0 || idx >= rec.total_chunks) {
+      throw new Error("invalid chunk_index")
+    }
+    if (rec.chunks[idx] !== undefined) {
+      // 重複チャンク (再送等) は冪等に無視する。
+      return { done: false }
+    }
+
+    const buf = Buffer.from(typeof data === "string" ? data : "", "base64")
+    rec.bytes += buf.length
+    if (rec.bytes > this.maxTotalBytes) {
+      this._pending.delete(upload_id)
+      throw new Error(`file too large (max ${this.maxTotalBytes} bytes)`)
+    }
+    rec.chunks[idx] = buf
+    rec.received += 1
+
+    if (rec.received < rec.total_chunks) {
+      return { done: false }
+    }
+
+    // 全チャンク到着 → 結合して書き込み。
+    this._pending.delete(upload_id)
+    const full = Buffer.concat(rec.chunks)
+    const savePath = await this._writeFile(rec, full)
+    this.logger?.info?.(
+      { upload_id, path: savePath, size: full.length, filename: rec.filename },
+      "cockpit upload saved",
+    )
+    return {
+      done: true,
+      path: savePath,
+      size: full.length,
+      filename: rec.filename,
+      media_type: rec.media_type,
+    }
+  }
+
+  /** 結合済みバッファを cwd 配下に書き出し、絶対パスを返す。 */
+  async _writeFile(rec, buf) {
+    const baseDir = this._resolveBaseDir(rec.cwd)
+    const dir = path.join(baseDir, UPLOAD_DIRNAME, todayDir())
+    await mkdir(dir, { recursive: true })
+    const safe = sanitizeFilename(rec.filename)
+    _seq = (_seq + 1) % 1_000_000
+    const unique = `${Date.now().toString(36)}-${_seq.toString(36)}`
+    const finalName = `${unique}_${safe}`
+    const full = path.join(dir, finalName)
+    await writeFile(full, buf)
+    return full
+  }
+
+  /**
+   * TTL を超過した未完了アップロードを破棄する (メモリ保護)。
+   * 定期タイマー or 受信契機で呼ぶ想定。
+   * @param {number} [now] 現在時刻 (テスト用に注入可能)
+   * @returns {number} 破棄した件数
+   */
+  sweep(now = Date.now()) {
+    let dropped = 0
+    for (const [id, rec] of this._pending) {
+      if (now - rec.createdAt > this.ttlMs) {
+        this._pending.delete(id)
+        dropped += 1
+      }
+    }
+    if (dropped > 0) {
+      this.logger?.info?.({ dropped }, "cockpit upload: swept stale uploads")
+    }
+    return dropped
+  }
+
+  /** 進行中アップロード件数 (テスト / 監視用)。 */
+  get pendingCount() {
+    return this._pending.size
+  }
+}

package/src/main.mjs

@@ -22,6 +22,7 @@ import { loadPlugins, runHookBroadcast, runHookChain } from "./plugin-loader.mjs
 import { WsClient } from "./ws-client.mjs"
 import { PtyBridge } from "./pty-bridge.mjs"
 import { ClaudeStreamBridge } from "./claude-stream-bridge.mjs"
+import { UploadManager } from "./claude-upload.mjs"
 import { fetchSessionHistory, listSessions } from "./claude-history.mjs"
 import { listAgents } from "./agents.mjs"
 import { listSkills } from "./skills.mjs"
@@ -154,6 +155,11 @@ export async function startDaemon({ version, ptyModule, claudeSdk } = {}) {
     ? new ClaudeStreamBridge({ sdk: resolvedSdk, logger })
     : null
 
+  // Cockpit チャットモードの添付ファイル受信器 (browser → agent のチャンク送信を
+  // ローカル FS に保存し、保存パスを返す)。SDK 有無に関わらず生成してよいが、添付は
+  // チャットモード専用機能なので claudeBridge と同じく stream モード前提で使う。
+  const uploadManager = new UploadManager({ logger })
+
   const bundleVersion = await readBundleVersion()
   if (bundleVersion) {
     logger.info({ bundleVersion }, "hub bundle version detected")
@@ -257,7 +263,7 @@ export async function startDaemon({ version, ptyModule, claudeSdk } = {}) {
   let dispatchChain = Promise.resolve()
   client.on("message", (msg) => {
     dispatchChain = dispatchChain
-      .then(() => dispatch(msg, { ...ctx, client, ptyBridge, claudeBridge }))
+      .then(() => dispatch(msg, { ...ctx, client, ptyBridge, claudeBridge, uploadManager }))
       .catch((err) => {
         logger.error(
           { err: err.message, type: msg?.type },
@@ -318,7 +324,7 @@ export async function startDaemon({ version, ptyModule, claudeSdk } = {}) {
     )
   })
 
-  return { client, plugins, ptyBridge, claudeBridge }
+  return { client, plugins, ptyBridge, claudeBridge, uploadManager }
 }
 
 const SESSION_EVENTS_DIR =
@@ -774,6 +780,56 @@ async function dispatch(msg, ctx) {
           message: msg.message,
         })
         return
+      case "claude.upload": {
+        // Cockpit チャットモードの添付ファイル受信 (チャンク 1 件)。全チャンク到着で
+        // cwd 配下の .cockpit-uploads/<日付>/ に保存し、保存パスを browser へ返す。
+        // browser はそのパスを claude.input 本文に載せ、Claude が Read ツールで読む。
+        if (!ctx.uploadManager) {
+          ctx.client.send({
+            type: "claude.upload.done",
+            stream_id: msg.stream_id,
+            upload_id: msg.upload_id,
+            ok: false,
+            error: "upload_unavailable",
+          })
+          return
+        }
+        try {
+          const res = await ctx.uploadManager.addChunk({
+            upload_id: msg.upload_id,
+            filename: msg.filename,
+            media_type: msg.media_type,
+            total_size: msg.total_size,
+            total_chunks: msg.total_chunks,
+            chunk_index: msg.chunk_index,
+            data: msg.data,
+            cwd: msg.cwd || ctx.config?.claude_cwd || undefined,
+          })
+          if (res.done) {
+            // 完了チャンクのみ done を返す。継続中チャンクは応答しない
+            // (browser は自分のチャンク送出完了で進捗を把握する)。
+            ctx.client.send({
+              type: "claude.upload.done",
+              stream_id: msg.stream_id,
+              upload_id: msg.upload_id,
+              ok: true,
+              path: res.path,
+              filename: res.filename,
+              media_type: res.media_type,
+              size: res.size,
+            })
+          }
+        } catch (err) {
+          ctx.client.send({
+            type: "claude.upload.done",
+            stream_id: msg.stream_id,
+            upload_id: msg.upload_id,
+            ok: false,
+            error: err?.message || String(err),
+          })
+        }
+        return
+      }
       case "claude.permission.reply":
         if (!ctx.claudeBridge) return
         ctx.claudeBridge.permissionReply({
@@ -788,6 +844,11 @@ async function dispatch(msg, ctx) {
         if (!ctx.claudeBridge) return
         ctx.claudeBridge.interrupt({ stream_id: msg.stream_id })
         return
+      case "claude.queue.cancel":
+        // 送信待ち (pending) メッセージを id 指定で取り消す (0.6.26)。
+        if (!ctx.claudeBridge) return
+        ctx.claudeBridge.cancelQueued({ stream_id: msg.stream_id, id: msg.id })
+        return
       case "claude.detach":
         if (!ctx.claudeBridge) return
         ctx.claudeBridge.detach({ stream_id: msg.stream_id })