From 57fd704497532dd97a2c74546e6d4884c11959d1 Mon Sep 17 00:00:00 2001
From: posimai <posimai.project@gmail.com>
Date: Tue, 31 Mar 2026 01:13:59 +0900
Subject: [PATCH] fix(posimai-dev): dot status indicator, /todo command, hide
 text badge
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Header dot: grey→green(pulse) on connect, red on disconnect — replaces text badge
- /morning renamed to /todo (今日のタスク)
- Status text badge hidden (dot carries the signal now)

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

diff --git a/posimai-dev/index.html b/posimai-dev/index.html
index 748fd188..0dc04397 100644
--- a/posimai-dev/index.html
+++ b/posimai-dev/index.html
@@ -63,16 +63,26 @@
             backdrop-filter: blur(12px);
         }
         .header-left { display: flex; align-items: center; gap: 10px; }
-        .header-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
+        .header-dot {
+            width: 8px; height: 8px; border-radius: 50%;
+            background: #4B5563;
+            transition: background 0.4s;
+            flex-shrink: 0;
+        }
+        .header-dot.connected {
+            background: #6EE7B7;
+            animation: dot-pulse 2.5s ease-in-out infinite;
+        }
+        .header-dot.disconnected { background: #F87171; animation: none; }
+        @keyframes dot-pulse {
+            0%, 100% { box-shadow: 0 0 0 0 rgba(110,231,183,0.5); }
+            50%       { box-shadow: 0 0 0 5px rgba(110,231,183,0); }
+        }
         .header-title { font-size: 14px; font-weight: 600; color: #F3F4F6; letter-spacing: -0.01em; }
         .header-right { display: flex; align-items: center; gap: 4px; }
 
-        .status-badge {
-            font-size: 11px; font-weight: 500; padding: 2px 8px;
-            border-radius: 20px; background: var(--accent-dim); color: var(--accent);
-            transition: background 0.2s, color 0.2s;
-        }
-        .status-badge.disconnected { background: rgba(239,68,68,0.12); color: #F87171; }
+        /* status-badge は dot に統合したため非表示 */
+        .status-badge { display: none; }
 
         /* Claude 開始ボタン */
         .claude-btn {
@@ -335,7 +345,8 @@
 <script>
 (function () {
     // ── Elements ──
-    const statusBadge        = document.getElementById('statusBadge');
+    const statusBadge        = document.getElementById('statusBadge'); // hidden, kept for compat
+    const headerDot          = document.querySelector('.header-dot');
     const settingsSessionRow = document.getElementById('settingsSessionBadge');
     const settingsSessionId  = document.getElementById('settingsSessionId');
     const container          = document.getElementById('terminal-container');
@@ -349,13 +360,13 @@
 
     // ── Slash commands & chips ──
     const COMMANDS = [
-        { cmd: '/morning', label: '朝の確認',   prompt: 'おはよう。git logと変更ファイルを確認して、今日やるべき作業を整理して提案して' },
-        { cmd: '/status',  label: '状況確認',   prompt: 'git statusと直近のコミットを確認して、今の作業状態をわかりやすく教えて' },
-        { cmd: '/commit',  label: 'コミット',   prompt: '変更内容を確認してコミットメッセージの案を出して、問題なければコミットして' },
-        { cmd: '/deploy',  label: 'デプロイ',   prompt: 'npm run deployを実行してデプロイして' },
-        { cmd: '/fix',     label: 'エラー修正', prompt: '直前のエラーを確認して原因と修正方法を教えて、修正できるなら直して' },
-        { cmd: '/explain', label: 'コード説明', prompt: '今の変更内容またはエラーをわかりやすく説明して' },
-        { cmd: '/test',    label: 'テスト',     prompt: 'テストを実行して結果を教えて' },
+        { cmd: '/todo',    label: '今日のタスク', prompt: 'おはよう。git logと変更ファイルを確認して、今日やるべき作業を整理して提案して' },
+        { cmd: '/status',  label: '状況確認',     prompt: 'git statusと直近のコミットを確認して、今の作業状態をわかりやすく教えて' },
+        { cmd: '/commit',  label: 'コミット',     prompt: '変更内容を確認してコミットメッセージの案を出して、問題なければコミットして' },
+        { cmd: '/deploy',  label: 'デプロイ',     prompt: 'npm run deployを実行してデプロイして' },
+        { cmd: '/fix',     label: 'エラー修正',   prompt: '直前のエラーを確認して原因と修正方法を教えて、修正できるなら直して' },
+        { cmd: '/explain', label: 'コード説明',   prompt: '今の変更内容またはエラーをわかりやすく説明して' },
+        { cmd: '/test',    label: 'テスト',       prompt: 'テストを実行して結果を教えて' },
         { cmd: '/ls',      label: 'ファイル確認', prompt: 'カレントディレクトリの構造を確認して教えて' },
     ];
 
@@ -456,8 +467,9 @@
         ws = new WebSocket(`${proto}//${location.host}/terminal`);
 
         ws.onopen = () => {
-            statusBadge.textContent = '接続済み';
-            statusBadge.classList.remove('disconnected');
+            headerDot.classList.add('connected');
+            headerDot.classList.remove('disconnected');
+            headerDot.title = '接続済み';
             sendBtn.disabled = false;
             ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
         };
@@ -474,8 +486,9 @@
         };
 
         ws.onclose = () => {
-            statusBadge.textContent = '切断';
-            statusBadge.classList.add('disconnected');
+            headerDot.classList.remove('connected');
+            headerDot.classList.add('disconnected');
+            headerDot.title = '切断';
             sendBtn.disabled = true;
             term.write('\r\n\x1b[31m[切断されました。再接続中...]\x1b[0m\r\n');
             setTimeout(connect, 3000);