mai
/
posimai-root
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(posimai-dev): dot status indicator, /todo command, hide text badge 

- 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>
This commit is contained in:
posimai 2026-03-31 01:13:59 +09:00
parent 28b787b0df
commit 57fd704497
1 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
posimai-dev/index.html
View File

@ -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);