chocomint 1.0.2 → 1.1.0

data/lib/chocomint/edit_handlers.rb

@@ -23,76 +23,81 @@ module Chocomint
       @path_guard.allowed_roots.first
     end
 
-    # ---- ファイル一覧 -------------------------------------------------------
+    # ---- ファイル一覧 (遅延展開: 1階層ずつ返す) -----------------------------
 
-    def handle_edit_files(req, res)
+    # 中身を展開しない VCS メタデータ・依存パッケージ等 (一覧を埋め尽くすため除外する)。
+    # ディレクトリ名 (basename) で判定するため、"vendor/bundle" のようなパス階層は含めない。
+    EXCLUDED_TREE_DIRS = %w[.git .hg .svn .venv venv node_modules .bundle].freeze
+
+    # 1ディレクトリあたりの列挙上限。通常は到達しないが、数万エントリを持つ異常な
+    # ディレクトリでブラウザを固めないための安全弁。到達時は capped=true を返す。
+    MAX_DIR_ENTRIES = 5000
+
+    # WORKING DIRECTORY を遅延展開するためのエンドポイント。指定ディレクトリの
+    # 「直下 1 階層だけ」を列挙して返す。ツリー全体を一括列挙すると巨大ホーム
+    # (例: C:\Users\<name>) で応答が返らず表示が壊れるため、階層ごとに取得する。
+    #
+    #   GET /edit/dir           → ルート (workspace 直下) を列挙
+    #   GET /edit/dir?path=src  → src/ の直下を列挙
+    #
+    # path・返す entries[].path はいずれも base_dir 基準の相対パス (relative_root を含む)。
+    # /edit/file や /edit/fs/* と同じ表現なので、フロントは data-path をそのまま渡せる。
+    def handle_edit_dir(req, res)
       return edit_method_guard(res) unless req.request_method == "GET"
 
-      files, empty_dirs = walk_workspace_tree
-      edit_json(res, 200, "files" => files, "dirs" => empty_dirs,
-                           "root" => relative_root, "abs_root" => edit_root.tr("\\", "/"))
+      rel = req.query["path"].to_s.tr("\\", "/")
+      rel = "" if rel == "." || rel == relative_root
+      abs = rel.empty? ? edit_root : @path_guard.resolve(rel)
+      return edit_json(res, 404, "error" => "no such directory") unless File.directory?(abs)
+
+      entries, capped = list_dir_entries(abs, rel)
+      edit_json(res, 200, "path" => rel, "entries" => entries, "capped" => capped,
+                          "root" => relative_root, "abs_root" => edit_root.tr("\\", "/"))
+    rescue Chocomint::PathAccessError => e
+      edit_json(res, 403, "error" => e.message)
+    rescue SystemCallError => e
+      # 権限不足などで開けないディレクトリ。空扱いにしてツリーを壊さない。
+      edit_json(res, 403, "error" => e.message)
     rescue Chocomint::Error => e
       edit_json(res, 500, "error" => e.message)
     end
 
-    # workspace 配下を再帰列挙し、相対パスの配列で返す (ディレクトリは除く)。
-    MAX_LISTED_FILES = 2000
-
-    # 中身を展開しない VCS メタデータ・依存パッケージ等 (数千件で一覧を埋め尽くすため除外する)。
-    # ディレクトリ名 (basename) で判定するため、"vendor/bundle" のようなパス階層は含めない。
-    EXCLUDED_TREE_DIRS = %w[.git .hg .svn .venv venv node_modules .bundle].freeze
+    # abs_dir の直下 1 階層を列挙し、[entries, capped] を返す。
+    # entries は { "name", "path", "dir" } の配列 (ディレクトリ→ファイルの順、各名前順)。
+    # rel_dir は abs_dir の base_dir 基準の相対パス ("" ならルート = edit_root)。
+    def list_dir_entries(abs_dir, rel_dir)
+      dirs = []
+      files = []
+      capped = false
 
-    # workspace ツリーを1度だけ手動再帰し、[ファイル相対パス, 空ディレクトリ相対パス] を返す。
-    #
-    # Dir.glob("**/*") はツリー全体を舐めてから除外判定するため、node_modules を大量に
-    # 含むホームディレクトリ (例: C:\Users\<name>) を起点にすると応答が返らず WORKING
-    # DIRECTORY が空のままになる。除外ディレクトリはその配下へ降りる前に枝刈りし、
-    # MAX_LISTED_FILES 到達で打ち切ることで巨大ツリーでも実用的な時間で応答する。
-    def walk_workspace_tree
-      root = edit_root
-      return [[], []] unless File.directory?(root)
+      # ルート (rel_dir 空) の直下は base_dir 基準にするため relative_root を前置する
+      # (本番は "." のためプレフィックスなし、テスト等 edit_root != base_dir では "workspace" 等)。
+      prefix = rel_dir.empty? ? (relative_root == "." ? "" : relative_root) : rel_dir
 
-      files = []
-      # 中身を1件も持たないディレクトリ (files からツリー復元できない) を別途フロントに伝える。
-      empty_dirs = []
-      stack = [""] # root からの相対ディレクトリ (root 自身は "")
+      Dir.each_child(abs_dir) do |name|
+        next if name == "." || name == ".."
 
-      until stack.empty?
-        break if files.size >= MAX_LISTED_FILES
+        rel = prefix.empty? ? name : "#{prefix}/#{name}"
+        abs = File.join(abs_dir, name)
 
-        rel_dir = stack.pop
-        abs_dir = rel_dir.empty? ? root : File.join(root, rel_dir)
+        if File.directory?(abs)
+          # 除外ディレクトリは一覧に出さない (中身も見せない)。
+          next if EXCLUDED_TREE_DIRS.include?(name)
 
-        child_count = 0
-        begin
-          Dir.each_child(abs_dir) do |name|
-            next if name == "." || name == ".."
-
-            rel = rel_dir.empty? ? name : "#{rel_dir}/#{name}"
-            abs = File.join(abs_dir, name)
-
-            if File.directory?(abs)
-              child_count += 1
-              # 除外ディレクトリは配下へ降りない (中身も一覧に出さない)。
-              next if EXCLUDED_TREE_DIRS.include?(name)
-
-              stack.push(rel)
-            elsif File.file?(abs)
-              child_count += 1
-              files << rel
-              break if files.size >= MAX_LISTED_FILES
-            end
-          end
-        rescue SystemCallError
-          # 権限不足などで開けないディレクトリはスキップする (ホーム配下で発生しうる)。
-          next
+          dirs << { "name" => name, "path" => rel, "dir" => true }
+        elsif File.file?(abs)
+          files << { "name" => name, "path" => rel, "dir" => false }
         end
 
-        # 子を1件も持たないディレクトリはツリーに現れないため、明示的に伝える (root は除く)。
-        empty_dirs << rel_dir if child_count.zero? && !rel_dir.empty?
+        if dirs.size + files.size >= MAX_DIR_ENTRIES
+          capped = true
+          break
+        end
       end
 
-      [files.sort, empty_dirs.sort]
+      dirs.sort_by! { |e| e["name"] }
+      files.sort_by! { |e| e["name"] }
+      [dirs + files, capped]
     end
 
     # ---- ファイル取得 -------------------------------------------------------
@@ -105,6 +110,18 @@ module Chocomint
 
       abs = @path_guard.resolve(path)
       return edit_json(res, 404, "error" => "no such file") unless File.file?(abs)
+
+      # 画像 / PDF / 動画 / 音声は拡張子で先に判定し、中身を読まずにメディア種別だけ返す
+      # (フロントは /edit/raw で取得する)。SVG のようにテキストでもある形式もここで拾う。
+      # メディアは巨大化しやすい (動画等) ため @max_file_bytes の上限は掛けない。
+      media = media_kind(abs)
+      return edit_json(res, 200, "path" => path, "media" => media) if media
+
+      # zip / tar / tar.gz / bz2 等のアーカイブは第一階層一覧を表示する専用ビューに回す
+      # (フロントは /edit/archive で取得する)。中身の展開はここでは行わない。
+      return edit_json(res, 200, "path" => path, "archive" => true) if archive?(abs)
+
+      # テキストとして開くものだけサイズ上限を掛ける (Monaco に丸ごと載せるため)。
       if File.size(abs) > @max_file_bytes
         return edit_json(res, 413, "error" => "file too large")
       end
@@ -122,6 +139,126 @@ module Chocomint
       edit_json(res, 500, "error" => e.message)
     end
 
+    # ---- 生ファイル配信 (画像 / PDF / 動画 / 音声のプレビュー用) ---------------
+    #
+    #   GET /edit/raw?path=foo.png
+    #
+    # workspace 内のファイルを、拡張子から推定した Content-Type でそのまま返す。
+    # <img> / <video> / <audio> / <iframe> から参照される。テキストと違い巨大化しやすい
+    # (動画等) ため @max_file_bytes の上限は掛けず、Range リクエストに応じて部分配信もする
+    # (動画のシークや音声再生に必要)。
+    def handle_edit_raw(req, res)
+      return edit_method_guard(res) unless req.request_method == "GET"
+
+      path = req.query["path"].to_s
+      return edit_json(res, 400, "error" => "path required") if path.empty?
+
+      abs = @path_guard.resolve(path)
+      return edit_json(res, 404, "error" => "no such file") unless File.file?(abs)
+
+      content_type = media_content_type(abs)
+      res["cache-control"] = "no-cache"
+      res["accept-ranges"] = "bytes"
+      serve_raw_file(req, res, abs, content_type)
+    rescue Chocomint::PathAccessError => e
+      edit_json(res, 403, "error" => e.message)
+    rescue Chocomint::Error => e
+      edit_json(res, 500, "error" => e.message)
+    end
+
+    # 拡張子から Content-Type を推定する。未知の拡張子は octet-stream。
+    RAW_CONTENT_TYPES = {
+      # 画像 (ラスター)
+      ".png" => "image/png", ".jpg" => "image/jpeg", ".jpeg" => "image/jpeg",
+      ".gif" => "image/gif", ".webp" => "image/webp", ".bmp" => "image/bmp",
+      ".ico" => "image/x-icon", ".avif" => "image/avif", ".apng" => "image/apng",
+      ".tif" => "image/tiff", ".tiff" => "image/tiff",
+      # 画像 (ベクター)
+      ".svg" => "image/svg+xml",
+      # 文書
+      ".pdf" => "application/pdf",
+      # 動画
+      ".mp4" => "video/mp4", ".m4v" => "video/mp4", ".webm" => "video/webm",
+      ".ogv" => "video/ogg", ".mkv" => "video/x-matroska", ".mov" => "video/quicktime",
+      ".avi" => "video/x-msvideo",
+      # 音声
+      ".mp3" => "audio/mpeg", ".wav" => "audio/wav", ".ogg" => "audio/ogg",
+      ".oga" => "audio/ogg", ".m4a" => "audio/mp4", ".aac" => "audio/aac",
+      ".flac" => "audio/flac", ".opus" => "audio/opus", ".weba" => "audio/webm"
+    }.freeze
+
+    def media_content_type(abs)
+      RAW_CONTENT_TYPES.fetch(File.extname(abs).downcase, "application/octet-stream")
+    end
+
+    # 拡張子 → メディア種別 ("image" / "pdf" / "video" / "audio")。フロントはこの値で
+    # 表示ウィジェット (<img> / <iframe> / <video> / <audio>) を選ぶ。非メディアは nil。
+    MEDIA_KINDS = {
+      "image" => %w[.png .jpg .jpeg .gif .webp .bmp .ico .avif .apng .tif .tiff .svg],
+      "pdf" => %w[.pdf],
+      "video" => %w[.mp4 .m4v .webm .ogv .mkv .mov .avi],
+      "audio" => %w[.mp3 .wav .ogg .oga .m4a .aac .flac .opus .weba]
+    }.freeze
+
+    # 拡張子 (小文字) → メディア種別の逆引き表。
+    MEDIA_KIND_BY_EXT = MEDIA_KINDS.each_with_object({}) do |(kind, exts), h|
+      exts.each { |ext| h[ext] = kind }
+    end.freeze
+
+    def media_kind(abs)
+      MEDIA_KIND_BY_EXT[File.extname(abs).downcase]
+    end
+
+    # ファイルを配信する。Range ヘッダがあれば 206 Partial Content で部分配信する
+    # (動画のシーク・一部ブラウザの音声/動画再生に必須)。範囲不正なら 416。
+    def serve_raw_file(req, res, abs, content_type)
+      size = File.size(abs)
+      range = parse_byte_range(req["range"], size)
+
+      if range.nil? && req["range"].to_s.strip != ""
+        # Range 指定はあるが解釈できない → 416 で全長を知らせる。
+        res.status = 416
+        res["content-range"] = "bytes */#{size}"
+        res.body = ""
+        return
+      end
+
+      res["content-type"] = content_type
+      if range
+        first, last = range
+        res.status = 206
+        res["content-range"] = "bytes #{first}-#{last}/#{size}"
+        res["content-length"] = (last - first + 1).to_s
+        res.body = File.open(abs, "rb") { |f| f.seek(first); f.read(last - first + 1) }
+      else
+        res.status = 200
+        res["content-length"] = size.to_s
+        res.body = File.binread(abs)
+      end
+    end
+
+    # "bytes=first-last" 形式の Range を [first, last] に解釈する (単一範囲のみ対応)。
+    # 範囲を持たない/不正/範囲外なら nil を返す。"bytes=500-" や "bytes=-500" にも対応。
+    def parse_byte_range(header, size)
+      return nil if header.nil? || size.zero?
+
+      m = /\Abytes=(\d*)-(\d*)\z/.match(header.strip)
+      return nil unless m
+
+      first_s, last_s = m[1], m[2]
+      if first_s.empty? && last_s.empty?
+        nil
+      elsif first_s.empty?
+        # 末尾 N バイト。
+        n = last_s.to_i
+        n.zero? ? nil : [[size - n, 0].max, size - 1]
+      else
+        first = first_s.to_i
+        last = last_s.empty? ? size - 1 : [last_s.to_i, size - 1].min
+        (first <= last && first < size) ? [first, last] : nil
+      end
+    end
+
     # テキストとして扱えないか判定する。NUL バイトを含む、または先頭ブロックが
     # 妥当な UTF-8 でないものはバイナリ (エディタで開けない) とみなす。
     BINARY_SNIFF_BYTES = 8192
@@ -150,7 +287,9 @@ module Chocomint
 
       abs = @path_guard.resolve(path)
       FileUtils.mkdir_p(File.dirname(abs))
-      File.write(abs, content)
+      # バイナリモードで書き込む。Windows の既定 (テキストモード) だと \n が \r\n に
+      # 変換され、クライアントが選んだ改行コード (CRLF/LF) を無視して常に CRLF になってしまう。
+      File.binwrite(abs, content)
       edit_json(res, 200, "path" => path, "bytes" => content.bytesize)
     rescue JSON::ParserError => e
       edit_json(res, 400, "error" => "invalid JSON: #{e.message}")

data/lib/chocomint/server.rb

@@ -8,6 +8,7 @@ require_relative "errors"
 require_relative "logger/sqlite_logger"
 require_relative "edit_handlers"
 require_relative "edit_git_handlers"
+require_relative "edit_archive_handlers"
 
 module Chocomint
   # 監督完結型の Anthropic Messages API 互換プロキシサーバー。
@@ -20,6 +21,7 @@ module Chocomint
   class Server
     include EditHandlers
     include EditGitHandlers
+    include EditArchiveHandlers
 
     # planner: Planner インスタンス (run(request, expectations:) -> Planner::Result)。
     # edit UI 用に PathGuard / base_dir / vendor / console 情報も受け取る (任意)。
@@ -61,8 +63,10 @@ module Chocomint
         server.mount_proc("/edit") { |req, res| handle_edit(req, res) }
         server.mount_proc("/edit/assets") { |req, res| handle_edit_asset(req, res) }
         server.mount_proc("/edit/static") { |req, res| handle_edit_static(req, res) }
-        server.mount_proc("/edit/files") { |req, res| handle_edit_files(req, res) }
+        server.mount_proc("/edit/dir") { |req, res| handle_edit_dir(req, res) }
         server.mount_proc("/edit/file") { |req, res| handle_edit_file(req, res) }
+        server.mount_proc("/edit/raw") { |req, res| handle_edit_raw(req, res) }
+        server.mount_proc("/edit/archive") { |req, res| handle_edit_archive(req, res) }
         server.mount_proc("/edit/save") { |req, res| handle_edit_save(req, res) }
         server.mount_proc("/edit/chat") { |req, res| handle_edit_chat(req, res) }
         server.mount_proc("/edit/compact") { |req, res| handle_edit_compact(req, res) }

data/lib/chocomint.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Chocomint
-  VERSION = "1.0.2"
+  VERSION = "1.1.0"
 end
 
 require_relative "chocomint/errors"

data/public/edit/edit.css

@@ -102,11 +102,17 @@ html, body { margin: 0; height: 100%;
 #files-actions .menu-icon-btn:hover { background: #dcecee; }
 #file-list { overflow: auto; flex: 1 1 auto; min-height: 3rem; }
 #files ul { list-style: none; margin: 0; padding: 0; }
-#files ul ul { display: none; padding-left: 0.9rem; } /* 折りたたみ + 階層インデント */
-#files li.dir.open > ul { display: block; }
+/* 子ディレクトリの <ul> は class="children"。ルートは #file-list (div) 直下に
+   <li> を直接並べる (renderRoot が ul 自体を作らない) ため、入れ子 "ul ul" では
+   マッチしない。children クラスを直接ターゲットにして折りたたみ + 階層インデントを効かせる。 */
+#files ul.children { display: none; padding-left: 0.9rem; }
+#files li.dir.open > ul.children { display: block; }
 #files .row { display: flex; align-items: center; gap: 0.2rem;
             padding: 0.25rem 0.7rem; font-size: 0.83rem; cursor: pointer;
-            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+            min-width: 0; white-space: nowrap; overflow: hidden; }
+/* ファイル名だけを省略 (…) する。twist / icon は縮めない。 */
+#files .row > span:not(.name) { flex: none; }
+#files .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
 #files .row:hover { background: #e3f4f6; }
 #files li.file.active > .row { background: #a2d7dd; font-weight: 600; }
 #files li.dir.selected > .row { background: #d3ecee; font-weight: 600; }
@@ -170,6 +176,12 @@ html, body { margin: 0; height: 100%;
                      cursor: pointer; border-radius: 4px; }
 #statusbar-branch:hover { background: rgba(255,255,255,0.15); }
 .statusbar-branch-icon { font-size: 0.85rem; }
+/* ブランチ (左) と改行コード (右) を両端に寄せるための伸縮スペーサー。 */
+.statusbar-spacer { flex: 1; }
+#statusbar-eol { background: transparent; border: none; color: inherit; font-size: inherit;
+                 padding: 0.2rem 0.6rem; cursor: pointer; border-radius: 4px; }
+#statusbar-eol[hidden] { display: none; }
+#statusbar-eol:hover { background: rgba(255,255,255,0.15); }
 /* ブランチ切り替えダイアログの一覧。 */
 .branch-list { list-style: none; margin: 0 0 0.7rem; padding: 0; max-height: 12rem;
                overflow: auto; border: 1px solid #eee; border-radius: 6px; }
@@ -185,6 +197,63 @@ html, body { margin: 0; height: 100%;
 #editor { flex: 1; min-height: 0; min-width: 0; }
 /* 開いているタブが無いときは Monaco を隠し、代わりにプレースホルダーを見せる。 */
 #app.no-tabs #editor { display: none; }
+/* メディアプレビュー領域: 画像 / PDF / 動画 / 音声を表示する。
+   .show-media のときだけ表示し、その間は Monaco (#editor) を隠す。 */
+#media-view { display: none; flex: 1; min-height: 0; min-width: 0;
+              overflow: auto; background: #f6f6f6;
+              align-items: center; justify-content: center; padding: 1rem; }
+#app.show-media #editor { display: none; }
+#app.show-media #media-view { display: flex; }
+/* 画像: 領域に収まるよう縮小しつつ、原寸以上には拡大しない。市松模様で透過を分かりやすく。 */
+#media-view img.media-image { max-width: 100%; max-height: 100%; object-fit: contain;
+  background-image:
+    linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
+    linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
+    linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
+  box-shadow: 0 1px 6px rgba(0,0,0,0.2); }
+/* PDF: iframe を領域いっぱいに広げる (padding 無しで縁まで使う)。 */
+#app.show-media.media-pdf #media-view { padding: 0; align-items: stretch; }
+#media-view iframe.media-pdf { flex: 1; width: 100%; height: 100%; border: none; }
+/* 動画: 領域に収める。 */
+#media-view video.media-video { max-width: 100%; max-height: 100%;
+                                background: #000; box-shadow: 0 1px 6px rgba(0,0,0,0.2); }
+/* 音声: プレイヤーはファイル名の下に配置する縦積みカード。 */
+#media-view .media-audio-card { display: flex; flex-direction: column; gap: 0.75rem;
+                                align-items: center; color: #555; }
+#media-view .media-audio-card .media-audio-name { font-size: 0.9rem; word-break: break-all; }
+#media-view audio.media-audio { width: min(28rem, 80vw); }
+/* 読み込み失敗時のメッセージ。 */
+#media-view .media-error { color: #a33; font-size: 0.9rem; text-align: center; }
+/* アーカイブ (zip/tar 等) の第一階層 + メタデータ表示。 */
+#archive-view { display: none; flex: 1; min-height: 0; min-width: 0;
+                overflow: auto; background: #fafafa; padding: 1rem 1.25rem; }
+#app.show-archive #editor { display: none; }
+#app.show-archive #archive-view { display: block; }
+.archive-head { display: flex; align-items: baseline; gap: 0.6rem;
+                padding-bottom: 0.6rem; margin-bottom: 0.5rem;
+                border-bottom: 1px solid #e0e0e0; }
+.archive-head .archive-name { font-size: 1.05rem; font-weight: 600; color: #16393d;
+                              word-break: break-all; }
+.archive-head .archive-kind { font-size: 0.72rem; font-weight: 600; color: #16393d;
+                              background: #cdeff3; border-radius: 3px; padding: 0.1rem 0.4rem; }
+.archive-meta { color: #666; font-size: 0.8rem; margin-bottom: 0.75rem;
+                display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
+.archive-meta .archive-capped { color: #a35; }
+/* エントリ一覧: アイコン + 名前 + 補足 (件数/サイズ) の行。 */
+.archive-list { list-style: none; margin: 0; padding: 0; }
+.archive-list li { display: flex; align-items: center; gap: 0.5rem;
+                   padding: 0.28rem 0.4rem; border-radius: 4px; font-size: 0.85rem; }
+.archive-list li:hover { background: #eef6f7; }
+.archive-list .a-icon { width: 1.3em; text-align: center; flex-shrink: 0; }
+.archive-list .a-name { flex: 1; min-width: 0; overflow: hidden;
+                        text-overflow: ellipsis; white-space: nowrap; color: #222; }
+.archive-list .a-sub { flex-shrink: 0; color: #999; font-size: 0.78rem;
+                       font-variant-numeric: tabular-nums; }
+.archive-empty { color: #999; font-size: 0.85rem; padding: 0.5rem 0; }
+.archive-error { color: #a33; font-size: 0.9rem; padding: 0.5rem 0; }
 #editor-empty { display: none; flex: 1; align-items: center; justify-content: center;
                 color: #999; font-size: 0.9rem; user-select: none; }
 #app.no-tabs #editor-empty { display: flex; }