From 170dfaa7e01eaea3a78d0cd745c430ddcabd50b5 Mon Sep 17 00:00:00 2001
From: posimai <posimai.project@gmail.com>
Date: Tue, 31 Mar 2026 00:48:41 +0900
Subject: [PATCH] fix(posimai-dev): icon-only Claude btn, slim scrollbar, move
 session badge to chat bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Claude 開始 → bot icon only (32x32, same style as settings btn)
- xterm-viewport scrollbar: 4px, translucent violet, rounded
- session badge moved from header to chat bar left edge (mobile-friendly)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 posimai-dev/index.html | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/posimai-dev/index.html b/posimai-dev/index.html
index c227522d..90c86e5a 100644
--- a/posimai-dev/index.html
+++ b/posimai-dev/index.html
@@ -74,19 +74,20 @@
         }
         .status-badge.disconnected { background: rgba(239,68,68,0.12); color: #F87171; }
 
+        /* セッションバッジ（チャットバー内） */
         .session-badge {
-            font-size: 10px; font-weight: 400; color: rgba(255,255,255,0.3);
-            font-family: monospace; display: none;
+            font-size: 10px; font-weight: 400; color: rgba(255,255,255,0.25);
+            font-family: monospace; display: none; white-space: nowrap;
+            overflow: hidden; text-overflow: ellipsis; max-width: 180px;
         }
         .session-badge.visible { display: block; }
 
-        /* Claude開始ボタン */
+        /* Claude開始ボタン — アイコンのみ */
         .claude-btn {
-            display: flex; align-items: center; gap: 6px;
-            padding: 5px 12px; border-radius: 8px; border: none; cursor: pointer;
+            width: 32px; height: 32px; border-radius: 8px; border: none; cursor: pointer;
             background: var(--accent-dim); color: var(--accent);
-            font-size: 12px; font-weight: 500; font-family: Inter, sans-serif;
-            transition: background 0.15s;
+            display: flex; align-items: center; justify-content: center;
+            flex-shrink: 0; transition: background 0.15s;
         }
         .claude-btn:hover { background: rgba(167,139,250,0.25); }
 
@@ -104,6 +105,12 @@
         #terminal-container .xterm { height: 100%; }
         #terminal-container .xterm-viewport { border-radius: 8px 8px 0 0; }
 
+        /* スクロールバー — 細く・半透明 */
+        .xterm-viewport::-webkit-scrollbar { width: 4px; }
+        .xterm-viewport::-webkit-scrollbar-track { background: transparent; }
+        .xterm-viewport::-webkit-scrollbar-thumb { background: rgba(167,139,250,0.25); border-radius: 2px; }
+        .xterm-viewport::-webkit-scrollbar-thumb:hover { background: rgba(167,139,250,0.5); }
+
         /* ── Chat input bar ── */
         .chat-bar {
             display: flex;
@@ -180,12 +187,10 @@
         <div class="header-dot" aria-hidden="true"></div>
         <span class="header-title">posimai-dev</span>
         <span class="status-badge disconnected" id="statusBadge">接続中...</span>
-        <span class="session-badge" id="sessionBadge"></span>
     </div>
     <div class="header-right">
-        <button class="claude-btn" id="claudeBtn">
-            <i data-lucide="bot" style="width:13px;height:13px;stroke-width:1.75"></i>
-            Claude 開始
+        <button class="claude-btn" id="claudeBtn" aria-label="Claude 開始">
+            <i data-lucide="bot" style="width:15px;height:15px;stroke-width:1.75"></i>
         </button>
         <button class="icon-btn" id="settingsBtn" aria-label="設定" aria-expanded="false">
             <i data-lucide="settings" style="width:18px;height:18px;stroke-width:1.5"></i>
@@ -196,6 +201,7 @@
 <div id="terminal-container"></div>
 
 <div class="chat-bar">
+    <span class="session-badge" id="sessionBadge"></span>
     <input
         type="text"
         class="chat-input"