@youtyan/code-viewer 0.11.2 → 0.13.0

package/web/index.html

@@ -31,6 +31,7 @@
       <a class="app-menu-item active" data-route="repo" href="/">Repository</a>
       <a class="app-menu-item" data-route="diff" href="/todif?from=HEAD&to=worktree">Diff Viewer</a>
       <a class="app-menu-item" data-route="history" href="/history">History</a>
+      <a class="app-menu-item" data-route="worktree" href="/worktree">Worktrees</a>
       <a class="app-menu-item" data-route="journal" href="/journal">Work Log</a>
       <a class="app-menu-item" data-route="database" href="/database">Datastores</a>
       <span class="global-actions-sep app-menu-sep" aria-hidden="true"></span>
@@ -109,6 +110,10 @@
 
   <aside id="history-panel" hidden></aside>
   <div id="history-resizer" aria-hidden="true"></div>
+  <!-- 作業ツリー画面の一覧。中身は worktree-view が入れる。見た目は
+       #history-panel と同じ規則を共有している。変更ファイルは Repository と
+       同じ #sidebar、差分は #diff を使うので、増える箱はこれだけ。 -->
+  <aside id="worktree-panel" hidden></aside>
   <aside id="sidebar">
     <div class="sb-head">
       <span class="sb-title">Files</span>

package/web/style.css

@@ -1381,12 +1381,35 @@ body.gdp-diff-page #repo-target-wrap {
   background: var(--fg-subtle);
   transition: background 0.2s ease, box-shadow 0.2s ease;
 }
-#status.live::before { background: #2ea043; box-shadow: 0 0 0 3px rgba(46,160,67,0.20); }
+#status.live::before {
+  background: #2ea043;
+  box-shadow: 0 0 0 3px rgba(46,160,67,0.20);
+  animation: status-live-pulse 1.6s ease-out infinite;
+}
 #status.refreshing::before { background: #d29922; box-shadow: 0 0 0 3px rgba(210,153,34,0.25); }
 #status.error::before { background: var(--danger); box-shadow: 0 0 0 3px rgba(207,34,46,0.20); }
 #status.live { color: var(--success); }
 #status.refreshing { color: var(--attn); }
 #status.error { color: var(--danger); }
+@keyframes status-live-pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(46, 160, 67, 0.42);
+    transform: scale(0.92);
+  }
+  55% {
+    box-shadow: 0 0 0 6px rgba(46, 160, 67, 0);
+    transform: scale(1.08);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(46, 160, 67, 0);
+    transform: scale(0.92);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  #status.live::before {
+    animation: none;
+  }
+}
 
 /* ===== Top-edge loading bar (indeterminate) ===== */
 #load-bar {
@@ -1500,7 +1523,10 @@ body.gdp-diff-page #repo-target-wrap {
 .gdp-banner-dismiss:hover { color: var(--fg); }
 
 /* ===== Commit history panel ===== */
-#history-panel {
+/* 作業ツリー画面の 2 枚のパネルも同じ箱を使う。位置だけ Worktrees セクションで
+   上書きし、見た目はここ 1 箇所で決まる。 */
+#history-panel,
+#worktree-panel {
   display: none;
   position: fixed;
   left: 0;
@@ -1540,7 +1566,9 @@ body.gdp-history-page #repo-target-wrap {
   background: transparent;
   transition: background 0.12s;
 }
-body.gdp-history-page #history-resizer {
+/* 一覧パネルを持つページ (data-history-list-panel。履歴・作業ツリー) でだけ
+   つまみを出す。 */
+body[data-history-list-panel] #history-resizer {
   display: block;
 }
 #history-resizer:hover,
@@ -1553,7 +1581,8 @@ body.gdp-history-resizing #history-resizer {
 body.gdp-history-page #topbar .ref-pickers {
   display: none;
 }
-#history-panel[hidden] {
+#history-panel[hidden],
+#worktree-panel[hidden] {
   display: none !important;
 }
 .history-head {
@@ -2283,7 +2312,7 @@ body.gdp-history-resizing * {
 
 /* Help ページの設定セクションに置くフォーム。読みやすい行長で止める。 */
 .scope-settings {
-  max-width: 460px;
+  max-width: 760px;
 }
 .scope-settings label {
   display: block;
@@ -2356,6 +2385,118 @@ body.gdp-history-resizing * {
   padding: 8px;
   font: 13px/19px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 }
+.agent-screen-rules-section {
+  padding-top: 12px;
+  border-top: 1px solid var(--border);
+}
+.agent-screen-rules-guide {
+  margin: 8px 0 10px;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--bg-soft) 76%, transparent);
+}
+.agent-screen-rules-guide summary {
+  color: var(--fg);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.agent-screen-rules-guide .scope-settings-help {
+  margin-top: 6px;
+}
+.agent-screen-rules-guide-example {
+  margin: 8px 0 0;
+  padding: 8px;
+  overflow: auto;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  background: var(--bg);
+  color: var(--fg);
+  font: 12px/18px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  tab-size: 2;
+}
+.agent-screen-rules-editor {
+  position: relative;
+  min-height: 420px;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-soft);
+}
+.agent-screen-rules-editor:focus-within {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-muted);
+}
+.agent-screen-rules-highlight {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  padding: 8px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  scrollbar-gutter: stable;
+  pointer-events: none;
+  background: var(--bg-soft);
+  color: var(--fg);
+  font: 13px/19px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  tab-size: 2;
+}
+.agent-screen-rules-highlight code {
+  font: inherit;
+}
+.agent-screen-rules-highlight code::after {
+  content: "\200b";
+  display: inline-block;
+  height: 19px;
+}
+.agent-screen-rules-highlight span[style] {
+  color: var(--shiki-light);
+}
+@media (prefers-color-scheme: dark) {
+  .agent-screen-rules-highlight span[style] {
+    color: var(--shiki-dark);
+  }
+}
+html[data-theme="light"] .agent-screen-rules-highlight span[style] {
+  color: var(--shiki-light);
+}
+html[data-theme="dark"] .agent-screen-rules-highlight span[style] {
+  color: var(--shiki-dark);
+}
+#agent-screen-rules {
+  position: relative;
+  z-index: 1;
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 420px;
+  margin: 0;
+  padding: 8px;
+  overflow-y: scroll;
+  scrollbar-gutter: stable;
+  resize: vertical;
+  border: 0;
+  border-radius: 0;
+  outline: 0;
+  background: transparent;
+  color: transparent;
+  caret-color: var(--fg);
+  font: 13px/19px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  tab-size: 2;
+}
+#agent-screen-rules::selection {
+  background: var(--accent);
+  color: var(--fg-onemphasis);
+}
+#agent-screen-rules:disabled {
+  cursor: wait;
+  opacity: 0.65;
+}
 #scope-omit-source {
   margin: 8px 0 0;
   color: var(--fg-subtle);
@@ -2400,17 +2541,16 @@ body.gdp-history-resizing * {
   margin: 0;
 }
 .scope-settings-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
   margin-top: 12px;
   padding-top: 10px;
   border-top: 1px solid var(--border);
 }
 .scope-settings-footer .scope-settings-help {
-  margin: 0;
-  flex: 1;
+  margin: 4px 0 0;
+}
+#scope-settings-save-status {
+  min-height: 15px;
+  color: var(--fg-muted);
 }
 .scope-settings-actions button {
   border: 1px solid var(--border);
@@ -2424,6 +2564,22 @@ body.gdp-history-resizing * {
   border-color: var(--border-strong);
   background: var(--bg-mute);
 }
+.scope-settings-actions button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+.scope-settings-actions .scope-settings-primary-action {
+  inline-size: 12em;
+  border-color: var(--accent);
+  background: var(--accent);
+  color: var(--accent-fg, #fff);
+  font-weight: 600;
+  white-space: nowrap;
+}
+.scope-settings-actions .scope-settings-primary-action:hover:not(:disabled) {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 88%, var(--fg));
+}
 
 #quick-help-popover {
   position: fixed;
@@ -7705,6 +7861,313 @@ body.gdp-database-page #load-bar {
   top: var(--global-header-h);
 }
 
+/* ============================================================
+   Worktrees
+   ============================================================ */
+
+/* 骨格は History と同じ。左の一覧は #history-panel と同じ箱 (セレクタに
+   #worktree-panel を足してある)、中央は Repository と同じ #sidebar の
+   ファイル一覧、右は #diff の差分カード。行の見た目 (.history-item /
+   .subject / .meta2 / .tree-file / .badge / .name / .gdp-file-shell) も
+   全部そのまま使うので、この画面のために作る見た目は下の配置だけ。 */
+
+/* --chrome-h は上書きしない。この画面は History と同じく上部バーを出すので、
+   基底の「ヘッダ + 上部バー」がそのまま正しい。ヘッダだけに縮めると、
+   左右のパネルと本文が上部バーの下に潜り込む。 */
+
+body.gdp-worktree-page #query-history-panel {
+  display: none !important;
+}
+
+/* topbar は出す。統合 / 分割・空白・構文・テスト非表示は、この画面の差分にも
+   そのまま効く。from/to のピッカーだけは Diff ビューアのもので、ここでは
+   比較する対象を作業ツリー側が決めるので出さない (History と同じ扱い)。 */
+body.gdp-worktree-page #topbar .ref-pickers {
+  display: none;
+}
+
+body.gdp-worktree-page #worktree-panel {
+  display: flex;
+}
+
+/* 以下 4 つは History 画面と同じ並べ方 (左パネル → サイドバー → 本文)。 */
+body.gdp-worktree-page #sidebar {
+  left: var(--history-w);
+}
+
+body.gdp-worktree-page main#content {
+  margin-left: calc(var(--history-w) + var(--sidebar-w));
+}
+
+body.gdp-worktree-page.gdp-sidebar-hidden main#content {
+  margin-left: var(--history-w);
+}
+
+body.gdp-worktree-page #sidebar-resizer {
+  left: calc(var(--history-w) + var(--sidebar-w) - 4px);
+}
+
+/* サイドバーで意味を持たないのは「対象 ref」だけ。ツリー / 一覧の切替と
+   全展開・全折りたたみはこの画面でも効く。 */
+body.gdp-worktree-page #repo-target-wrap {
+  display: none !important;
+}
+
+/* 頭のボタンは残り幅の右端に寄せる。 */
+body.gdp-worktree-page .history-head .worktree-head-btn:first-of-type {
+  margin-left: auto;
+}
+
+/* 基準ブランチへそのまま入らない作業ツリーだけ、一覧の中で色を変える。
+   .history-item.active と同じ左罫線の仕組みに乗る。 */
+.history-item.worktree-conflict {
+  border-left-color: var(--danger);
+}
+
+/* 未コミット / コミット済み の区切り。ファイル行ではないので、ツリーの
+   省略ルールから外して 1 行の見出しとして出す。 */
+#filelist .worktree-file-group,
+#filelist.tree .worktree-file-group {
+  /* #filelist の li は flex 前提なので、文字だけの見出しは block に戻す。
+     flex のままだと匿名アイテムになって幅を持てず、日本語が縦に潰れる。 */
+  display: block;
+  padding: 8px 12px 2px;
+  color: var(--fg-muted);
+  font-size: 11px;
+  white-space: nowrap;
+  cursor: default;
+}
+
+/* 他の作業ツリーも触っているファイル。何本と重なっているかを行末の数で出す。
+   ファイル名の色は変えない (重なりが多いと一覧がまるごと染まるため)。
+   誰と重なっているかは title に入る。 */
+.worktree-overlap-count {
+  color: var(--attn);
+  font-weight: 600;
+}
+
+.worktree-overlap-count::before {
+  content: "⇄";
+  margin-right: 2px;
+  font-weight: 400;
+}
+
+/* .meta2 の子は長いと行を横に押し広げる。ブランチ名は自由長なので、
+   溢れるなら省略する (履歴画面の行も同じクラス)。 */
+.history-item .meta2 > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 作業ツリー行の 1 段目: 名前と状態バッジを両端に。 */
+.history-item .worktree-row-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.history-item .worktree-row-head .subject {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.worktree-row-badges {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--fg-muted);
+  font-size: var(--ui-font-sm);
+}
+
+/* 2 段目のフォルダの場所。パスは末尾が肝心なので、長いときは頭側を省略する。
+   direction: rtl は #filelist li .name と同じ手で、::before の LRM
+   (U+200E) まで込みで 1 組。これが無いと、末尾が記号で終わるパスで並びが
+   崩れる。 */
+.worktree-row-path {
+  display: block;
+  direction: rtl;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--fg-muted);
+  font-size: var(--ui-font-sm);
+  margin-top: 2px;
+}
+.worktree-row-path::before {
+  content: "\200E";
+}
+
+/* 4 段目に添える「取り込むコマンドをコピー」。文字側 (.author) だけが縮んで
+   省略されるように、ボタンは縮ませない。 */
+.history-item .meta2 > .gdp-copy-path {
+  flex: 0 0 auto;
+  align-self: center;
+}
+
+/* 行の右端の「…」。押すまで操作は 1 つも出さない。
+   ボタンを行に並べると、選んだ瞬間にクリックした場所へ現れて誤爆する。
+   一覧の上に固定すると、今度は削除が画面で一番目立つ場所に居座る。
+   開くまで何も出さないメニューなら、どちらも起きない。 */
+.worktree-row-menu {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: var(--fg-muted);
+  cursor: pointer;
+  /* 行を選んでも消えない。位置が動かないので押し間違えない。 */
+  opacity: 0.55;
+  transition: opacity 0.12s, background 0.12s;
+}
+
+.worktree-row-menu:hover,
+.worktree-row-menu:focus-visible {
+  opacity: 1;
+  background: var(--bg-soft);
+}
+
+.history-item.active .worktree-row-menu {
+  opacity: 1;
+}
+
+/* メニューの区切り。取り返しのつかない操作を、よく使う操作と続けて置かない。 */
+.gdp-context-menu-sep {
+  margin: 4px 2px;
+  border: 0;
+  border-top: 1px solid var(--border);
+}
+
+/* 変更がまだ無い作業ツリーの案内 (右ペイン)。次にやることをその場に置く。 */
+.worktree-empty-diff .worktree-empty-diff-actions {
+  display: inline-flex;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+/* まだ 1 本も作っていないときの説明カード (右ペイン)。 */
+.worktree-intro {
+  padding: 24px;
+  max-width: 46em;
+  line-height: 1.7;
+  color: var(--fg-muted);
+  font-size: var(--ui-font-base);
+}
+.worktree-intro-title {
+  color: var(--fg);
+  font-weight: 600;
+  font-size: var(--ui-font-md);
+  margin-bottom: 4px;
+}
+.worktree-intro p {
+  margin: 0 0 10px;
+}
+.worktree-intro button {
+  margin-top: 4px;
+}
+
+/* ⇄ の意味。重なりが 1 件も無いときは出さない。 */
+#filelist .worktree-overlap-legend {
+  display: block;
+  padding: 8px 12px 2px;
+  color: var(--fg-muted);
+  font-size: 11px;
+  cursor: default;
+}
+
+/* 追加 / 削除ダイアログの中身。データストアの接続ダイアログ
+   (.db-connection-form) と同じで、入力欄そのものは共通の
+   .gdp-dialog-input を使い、並べ方だけをここで決める。 */
+.worktree-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 340px;
+  margin-top: 6px;
+}
+
+.worktree-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  color: var(--fg-muted);
+  font-size: 12px;
+}
+
+.worktree-hint {
+  color: var(--fg-muted);
+  font-size: 11px;
+}
+
+/* 追加ダイアログの「作成先」。入力に連動して実パスを出す行。パスは長いので
+   1 行に固定し、頭側を省略する (行が折り返すと下のボタンが動く)。 */
+.worktree-target {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--fg-muted);
+}
+
+.worktree-target-label {
+  flex: 0 0 auto;
+}
+
+.worktree-target-path {
+  flex: 1 1 auto;
+  min-width: 0;
+  direction: rtl;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--fg);
+  font-family: var(--mono, monospace);
+}
+/* .worktree-row-path と同じ理由の LRM。rtl と 1 組で使う。 */
+.worktree-target-path::before {
+  content: "\200E";
+}
+
+/* 作るかどうかの判断に要らない注記 (.gitignore の話) を本文から下ろす先。
+   押しても何も起きない印なので、寸法も位置も変わらない。 */
+.worktree-hint-mark {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 15px;
+  height: 15px;
+  border: 1px solid var(--border);
+  border-radius: 50%;
+  font-size: 10px;
+  line-height: 1;
+  color: var(--fg-muted);
+  cursor: help;
+}
+
+/* 削除ダイアログの警告。未コミット変更を失うことを、チェックを入れる前に
+   読める位置に出す。 */
+.worktree-warn {
+  color: var(--danger);
+  font-size: 12px;
+}
+
+.worktree-check {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+}
+
 /* ============================================================
    Journal
    ============================================================ */
@@ -14423,11 +14886,10 @@ body.app-panel-docked:has(.app-panel.app-panel-open) {
     var(--app-panel-max-h)
   );
 }
-body.app-panel-docked.gdp-diff-page #content,
-body.app-panel-docked.gdp-history-page #content,
-body.app-panel-docked.gdp-repo-page #content,
-body.app-panel-docked.gdp-file-detail-page #content,
-body.app-panel-docked.gdp-help-page #content {
+/* #content がスクロール容器になるかはページの属性で決まる。属性は app.ts の
+   setPageMode がページクラスと同じ場所で立てる。ページクラスの列挙はしない
+   (ui-layout.md「ページクラスの列挙をレイアウト規則に書かない」)。 */
+body.app-panel-docked[data-content-scrolls-when-docked] #content {
   position: relative;
   top: var(--chrome-h);
   height: var(--content-h);
@@ -14439,41 +14901,22 @@ body.app-panel-docked.gdp-help-page #content {
 /* Keep the normal page-specific top gap without putting padding on the
    scroll container. A sticky child otherwise adds that padding to its top
    offset and leaves scrolled content visible above the file header. */
-body.app-panel-docked.gdp-diff-page #diff,
-body.app-panel-docked.gdp-history-page #diff,
-body.app-panel-docked.gdp-repo-page #diff,
-body.app-panel-docked.gdp-file-detail-page #diff,
-body.app-panel-docked.gdp-help-page #diff {
+body.app-panel-docked[data-content-scrolls-when-docked] #diff {
   padding-top: var(--content-top-gap);
 }
-body.app-panel-docked.gdp-diff-page .d2h-file-header,
-body.app-panel-docked.gdp-diff-page .gdp-shell-header,
-body.app-panel-docked.gdp-history-page .d2h-file-header,
-body.app-panel-docked.gdp-history-page .gdp-shell-header,
-body.app-panel-docked.gdp-repo-page .d2h-file-header,
-body.app-panel-docked.gdp-repo-page .gdp-shell-header,
-body.app-panel-docked.gdp-file-detail-page .d2h-file-header,
-body.app-panel-docked.gdp-file-detail-page .gdp-shell-header,
-body.app-panel-docked.gdp-file-detail-page .gdp-file-detail-sticky {
+body.app-panel-docked[data-content-scrolls-when-docked] .d2h-file-header,
+body.app-panel-docked[data-content-scrolls-when-docked] .gdp-shell-header,
+body.app-panel-docked[data-content-scrolls-when-docked] .gdp-file-detail-sticky {
   top: 0;
 }
-body.app-panel-docked.gdp-diff-page .gdp-markdown-toc,
-body.app-panel-docked.gdp-history-page .gdp-markdown-toc,
-body.app-panel-docked.gdp-repo-page .gdp-markdown-toc,
-body.app-panel-docked.gdp-file-detail-page .gdp-markdown-toc {
+body.app-panel-docked[data-content-scrolls-when-docked] .gdp-markdown-toc {
   top: 16px;
 }
-body.app-panel-docked.gdp-help-page .gdp-help-nav {
+body.app-panel-docked[data-content-scrolls-when-docked] .gdp-help-nav {
   top: 20px;
 }
-body.app-panel-docked.gdp-diff-page .d2h-file-wrapper,
-body.app-panel-docked.gdp-diff-page .gdp-file-shell,
-body.app-panel-docked.gdp-history-page .d2h-file-wrapper,
-body.app-panel-docked.gdp-history-page .gdp-file-shell,
-body.app-panel-docked.gdp-repo-page .d2h-file-wrapper,
-body.app-panel-docked.gdp-repo-page .gdp-file-shell,
-body.app-panel-docked.gdp-file-detail-page .d2h-file-wrapper,
-body.app-panel-docked.gdp-file-detail-page .gdp-file-shell {
+body.app-panel-docked[data-content-scrolls-when-docked] .d2h-file-wrapper,
+body.app-panel-docked[data-content-scrolls-when-docked] .gdp-file-shell {
   scroll-margin-top: 8px;
 }
 body.app-panel-docked #sidebar,
@@ -14486,10 +14929,13 @@ body.app-panel-docked #annotation-panel {
 body.app-panel-docked .app-panel.app-panel-open {
   box-shadow: none;
 }
-body.app-panel-docked .journal-page,
-body.app-panel-docked .db-root {
-  height: 100%;
-}
+/* docked のときに `.journal-page` / `.db-root` を `height: 100%` で上書きしない。
+   この 2 ページは data-content-scrolls-when-docked を持たず、
+   親の `#content` が高さを持たないので、100% は解決先を失って auto に落ち、ページ
+   全体が中身の高さまで縮む (中身が空のとき画面途中で切れる形で表面化した)。両者は
+   既に `height: var(--content-h)` を持ち、--content-h は docked ではパネル占有分が
+   引かれた値になるので、そもそも上書きが要らない。検査は
+   `web-src/test/docked-page-height.test.ts`。 */
 
 .tools-sheet,
 .terminal-sheet {
@@ -15683,6 +16129,20 @@ html[data-theme="dark"] .tools-code span[style] {
   color: var(--fg-muted, #57606a);
 }
 
+.terminal-observation-errors {
+  max-height: 12rem;
+  margin: 0;
+  padding: 8px 10px;
+  overflow: auto;
+  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border));
+  border-radius: 6px;
+  color: var(--danger);
+  background: color-mix(in srgb, var(--danger) 8%, var(--bg));
+  font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
 /* ==========================================================================
    Datastore page — premium glass theme
    データストアページ (.db-root) 全体にスコープした装飾レイヤ。