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:
parent
28b787b0df
commit
57fd704497
|
|
@ -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,7 +360,7 @@
|
|||
|
||||
// ── Slash commands & chips ──
|
||||
const COMMANDS = [
|
||||
{ cmd: '/morning', label: '朝の確認', prompt: 'おはよう。git logと変更ファイルを確認して、今日やるべき作業を整理して提案して' },
|
||||
{ cmd: '/todo', label: '今日のタスク', prompt: 'おはよう。git logと変更ファイルを確認して、今日やるべき作業を整理して提案して' },
|
||||
{ cmd: '/status', label: '状況確認', prompt: 'git statusと直近のコミットを確認して、今の作業状態をわかりやすく教えて' },
|
||||
{ cmd: '/commit', label: 'コミット', prompt: '変更内容を確認してコミットメッセージの案を出して、問題なければコミットして' },
|
||||
{ cmd: '/deploy', label: 'デプロイ', prompt: 'npm run deployを実行してデプロイして' },
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue