chocomint 1.0.3 → 1.1.1

data/lib/chocomint.rb

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

data/public/edit/edit.css

@@ -102,8 +102,11 @@ 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;
             min-width: 0; white-space: nowrap; overflow: hidden; }
@@ -173,6 +176,19 @@ 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); }
+/* モデル選択ボタン (改行コードの右)。現在の LLM モデル名を表示する。 */
+#statusbar-model { display: flex; align-items: center; gap: 0.3rem; background: transparent;
+                   border: none; color: inherit; font-size: inherit; padding: 0.2rem 0.6rem;
+                   cursor: pointer; border-radius: 4px; max-width: 16rem; }
+#statusbar-model:hover { background: rgba(255,255,255,0.15); }
+.statusbar-model-icon { font-size: 0.8rem; }
+#statusbar-model-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 /* ブランチ切り替えダイアログの一覧。 */
 .branch-list { list-style: none; margin: 0 0 0.7rem; padding: 0; max-height: 12rem;
                overflow: auto; border: 1px solid #eee; border-radius: 6px; }
@@ -188,6 +204,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; }
@@ -350,6 +423,12 @@ html, body { margin: 0; height: 100%;
                              width: 1em; text-align: center; }
 /* AI 実行中のツール進捗行 (SSE)。実行中は点字スピナー、完了で ✓ / ✕ に変わる。 */
 .pending-head { color: #555; }
+/* 実行中の経過時間 (例: 30s)。1 秒ごとに更新される。 */
+.pending-elapsed { margin-left: 0.4rem; font-size: 0.78rem; color: #888;
+                   font-variant-numeric: tabular-nums; }
+/* 会話応答 (ツール実行なし) の下に添える実行時間。 */
+.msg-elapsed { margin-top: 0.3rem; font-size: 0.72rem; color: #999;
+               font-variant-numeric: tabular-nums; }
 .pending-tools { display: flex; flex-direction: column; gap: 0.3rem;
                  margin-top: 0.4rem; }
 .ptool { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem;
@@ -358,6 +437,9 @@ html, body { margin: 0; height: 100%;
 .ptool-mark.ok { color: #137333; }
 .ptool-mark.ng { color: #c5221f; }
 .ptool-label { font-weight: 600; color: #333; }
+/* 完了マーク / ツール名を監査ログへのリンクにしたとき (クリック可能を示す)。 */
+.log-link { cursor: pointer; }
+.log-link:hover { text-decoration: underline; }
 .ptool-target { font-family: "Cascadia Code", "Noto Sans JP", monospace;
                 font-size: 0.72rem; background: #eef; color: #33407a;
                 padding: 0.05rem 0.35rem; border-radius: 4px;
@@ -415,3 +497,19 @@ html, body { margin: 0; height: 100%;
 .vwin-btn.primary:hover { background: #82c3cb; }
 .vwin-btn.danger { background: #fce8e6; border-color: #f3c9c6; color: #c5221f; font-weight: 600; }
 .vwin-btn.danger:hover { background: #f8d7d4; }
+
+/* モデル設定ダイアログ: provider タブ + 各 provider のペイン。 */
+#model-dialog .vwin-body select {
+  width: 100%; box-sizing: border-box; padding: 0.4rem 0.5rem;
+  border: 1px solid #ccc; border-radius: 6px; font-size: 0.85rem;
+  font-family: "Cascadia Code", "Noto Sans JP", monospace; }
+.model-tabs { display: flex; gap: 0.3rem; margin-bottom: 0.8rem; }
+.model-tab { flex: 1; padding: 0.4rem 0.6rem; border: 1px solid #ccc; border-radius: 6px;
+             background: #f5f5f5; color: #555; font-size: 0.85rem; cursor: pointer; }
+.model-tab:hover { background: #ececec; }
+.model-tab.active { background: #a2d7dd; border-color: #82c3cb; color: #16393d; font-weight: 600; }
+.model-pane[hidden] { display: none; }
+.model-hint { font-size: 0.78rem; color: #666; margin: 0.5rem 0 0; line-height: 1.5; }
+.model-hint a { color: #1155cc; }
+.model-hint code { background: #eef; padding: 0.05rem 0.3rem; border-radius: 3px; }
+.model-warn { color: #b06000; }