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);
|
backdrop-filter: blur(12px);
|
||||||
}
|
}
|
||||||
.header-left { display: flex; align-items: center; gap: 10px; }
|
.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-title { font-size: 14px; font-weight: 600; color: #F3F4F6; letter-spacing: -0.01em; }
|
||||||
.header-right { display: flex; align-items: center; gap: 4px; }
|
.header-right { display: flex; align-items: center; gap: 4px; }
|
||||||
|
|
||||||
.status-badge {
|
/* status-badge は dot に統合したため非表示 */
|
||||||
font-size: 11px; font-weight: 500; padding: 2px 8px;
|
.status-badge { display: none; }
|
||||||
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; }
|
|
||||||
|
|
||||||
/* Claude 開始ボタン */
|
/* Claude 開始ボタン */
|
||||||
.claude-btn {
|
.claude-btn {
|
||||||
|
|
@ -335,7 +345,8 @@
|
||||||
<script>
|
<script>
|
||||||
(function () {
|
(function () {
|
||||||
// ── Elements ──
|
// ── 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 settingsSessionRow = document.getElementById('settingsSessionBadge');
|
||||||
const settingsSessionId = document.getElementById('settingsSessionId');
|
const settingsSessionId = document.getElementById('settingsSessionId');
|
||||||
const container = document.getElementById('terminal-container');
|
const container = document.getElementById('terminal-container');
|
||||||
|
|
@ -349,13 +360,13 @@
|
||||||
|
|
||||||
// ── Slash commands & chips ──
|
// ── Slash commands & chips ──
|
||||||
const COMMANDS = [
|
const COMMANDS = [
|
||||||
{ cmd: '/morning', label: '朝の確認', prompt: 'おはよう。git logと変更ファイルを確認して、今日やるべき作業を整理して提案して' },
|
{ cmd: '/todo', label: '今日のタスク', prompt: 'おはよう。git logと変更ファイルを確認して、今日やるべき作業を整理して提案して' },
|
||||||
{ cmd: '/status', label: '状況確認', prompt: 'git statusと直近のコミットを確認して、今の作業状態をわかりやすく教えて' },
|
{ cmd: '/status', label: '状況確認', prompt: 'git statusと直近のコミットを確認して、今の作業状態をわかりやすく教えて' },
|
||||||
{ cmd: '/commit', label: 'コミット', prompt: '変更内容を確認してコミットメッセージの案を出して、問題なければコミットして' },
|
{ cmd: '/commit', label: 'コミット', prompt: '変更内容を確認してコミットメッセージの案を出して、問題なければコミットして' },
|
||||||
{ cmd: '/deploy', label: 'デプロイ', prompt: 'npm run deployを実行してデプロイして' },
|
{ cmd: '/deploy', label: 'デプロイ', prompt: 'npm run deployを実行してデプロイして' },
|
||||||
{ cmd: '/fix', label: 'エラー修正', prompt: '直前のエラーを確認して原因と修正方法を教えて、修正できるなら直して' },
|
{ cmd: '/fix', label: 'エラー修正', prompt: '直前のエラーを確認して原因と修正方法を教えて、修正できるなら直して' },
|
||||||
{ cmd: '/explain', label: 'コード説明', prompt: '今の変更内容またはエラーをわかりやすく説明して' },
|
{ cmd: '/explain', label: 'コード説明', prompt: '今の変更内容またはエラーをわかりやすく説明して' },
|
||||||
{ cmd: '/test', label: 'テスト', prompt: 'テストを実行して結果を教えて' },
|
{ cmd: '/test', label: 'テスト', prompt: 'テストを実行して結果を教えて' },
|
||||||
{ cmd: '/ls', label: 'ファイル確認', prompt: 'カレントディレクトリの構造を確認して教えて' },
|
{ cmd: '/ls', label: 'ファイル確認', prompt: 'カレントディレクトリの構造を確認して教えて' },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
@ -456,8 +467,9 @@
|
||||||
ws = new WebSocket(`${proto}//${location.host}/terminal`);
|
ws = new WebSocket(`${proto}//${location.host}/terminal`);
|
||||||
|
|
||||||
ws.onopen = () => {
|
ws.onopen = () => {
|
||||||
statusBadge.textContent = '接続済み';
|
headerDot.classList.add('connected');
|
||||||
statusBadge.classList.remove('disconnected');
|
headerDot.classList.remove('disconnected');
|
||||||
|
headerDot.title = '接続済み';
|
||||||
sendBtn.disabled = false;
|
sendBtn.disabled = false;
|
||||||
ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
|
ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
|
||||||
};
|
};
|
||||||
|
|
@ -474,8 +486,9 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
ws.onclose = () => {
|
ws.onclose = () => {
|
||||||
statusBadge.textContent = '切断';
|
headerDot.classList.remove('connected');
|
||||||
statusBadge.classList.add('disconnected');
|
headerDot.classList.add('disconnected');
|
||||||
|
headerDot.title = '切断';
|
||||||
sendBtn.disabled = true;
|
sendBtn.disabled = true;
|
||||||
term.write('\r\n\x1b[31m[切断されました。再接続中...]\x1b[0m\r\n');
|
term.write('\r\n\x1b[31m[切断されました。再接続中...]\x1b[0m\r\n');
|
||||||
setTimeout(connect, 3000);
|
setTimeout(connect, 3000);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue