cli-jaw 1.2.6 → 1.2.9

package/public/index.html

@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="/css/variables.css">
     <link rel="stylesheet" href="/css/layout.css">
     <link rel="stylesheet" href="/css/chat.css">
+    <link rel="stylesheet" href="/css/orc-state.css">
     <link rel="stylesheet" href="/css/sidebar.css">
     <link rel="stylesheet" href="/css/modals.css">
     <link rel="stylesheet" href="/css/markdown.css">
@@ -33,6 +34,7 @@
     <nav class="sidebar-left" role="navigation" aria-label="Main navigation">
         <button class="sidebar-toggle" id="toggleLeft" title="Collapse" aria-label="Collapse sidebar">◀</button>
         <div class="logo">CLI-JAW</div>
+        <span id="orcStateBadge" class="orc-state-badge" style="display:none"></span>
 
         <div>
             <div class="section-title" data-i18n="sidebar.status">상태</div>
@@ -100,6 +102,21 @@
                 <span class="theme-switch-knob"></span>
             </button>
         </div>
+        <div class="pabc-roadmap" id="pabcRoadmap">
+            <div class="shark-runner" id="sharkRunner"></div>
+            <div class="pabc-dot future" data-phase="P" id="dot-P">P</div>
+            <div class="pabc-connector" id="pabc-conn-0"></div>
+            <div class="pabc-dot future" data-phase="A" id="dot-A">A</div>
+            <div class="pabc-connector" id="pabc-conn-1"></div>
+            <div class="pabc-center">
+                <div class="pabc-brand" id="pabcBrand">PABCD</div>
+                <div class="pabc-tagline">Ultimate Agent Workflow</div>
+            </div>
+            <div class="pabc-connector" id="pabc-conn-2"></div>
+            <div class="pabc-dot future" data-phase="B" id="dot-B">B</div>
+            <div class="pabc-connector" id="pabc-conn-3"></div>
+            <div class="pabc-dot future" data-phase="C" id="dot-C">C</div>
+        </div>
         <div class="chat-messages" id="chatMessages"></div>
         <div class="typing-indicator" id="typingIndicator">
             <span class="label" data-i18n="status.responding">응답 중</span>

package/public/js/state.ts

@@ -11,9 +11,12 @@ export interface CliStatusCache {
     [cli: string]: unknown;
 }
 
+export type OrcStateName = 'IDLE' | 'P' | 'A' | 'B' | 'C' | 'D';
+
 export interface AppState {
     ws: WebSocket | null;
     agentBusy: boolean;
+    orcState: OrcStateName;
     employees: unknown[];
     allSkills: unknown[];
     currentSkillFilter: string;
@@ -35,4 +38,5 @@ export const state: AppState = {
     heartbeatJobs: [],
     cliStatusCache: null,
     cliStatusTs: 0,
+    orcState: 'IDLE',
 };

package/public/js/ws.ts

@@ -2,6 +2,7 @@
 import { state } from './state.js';
 import { setStatus, updateQueueBadge, addSystemMsg, appendAgentText, finalizeAgent, addMessage } from './ui.js';
 import { t, getLang } from './features/i18n.js';
+import type { OrcStateName } from './state.js';
 
 interface WsMessage {
     type: string;
@@ -27,6 +28,8 @@ interface WsMessage {
     content?: string;
     cli?: string;
     delay?: number;
+    state?: string;
+    title?: string;
 }
 
 // Agent phase state (populated by agent_status events from orchestrator)
@@ -80,6 +83,102 @@ export function connect(): void {
             if (el) el.innerHTML = '';
         } else if (msg.type === 'agent_added' || msg.type === 'agent_updated' || msg.type === 'agent_deleted') {
             import('./features/employees.js').then(m => m.loadEmployees());
+        } else if (msg.type === 'orc_state') {
+            const allowed = new Set<OrcStateName>(['IDLE', 'P', 'A', 'B', 'C', 'D']);
+            const rawState = typeof msg.state === 'string' ? msg.state : 'IDLE';
+            const nextState = allowed.has(rawState as OrcStateName) ? (rawState as OrcStateName) : 'IDLE';
+            state.orcState = nextState;
+
+            if (nextState === 'IDLE' || nextState === 'D') {
+                document.body.removeAttribute('data-orc-state');
+                document.body.style.removeProperty('--orc-glow');
+            } else {
+                document.body.setAttribute('data-orc-state', nextState);
+                const glowVar = `--orc-glow-${nextState}`;
+                const glow = getComputedStyle(document.documentElement).getPropertyValue(glowVar).trim();
+                document.body.style.setProperty('--orc-glow', glow);
+            }
+
+            document.body.classList.add('orc-pulse');
+            setTimeout(() => document.body.classList.remove('orc-pulse'), 700);
+
+            const badge = document.getElementById('orcStateBadge');
+            if (badge) {
+                const labels: Record<OrcStateName, string> = {
+                    IDLE: '',
+                    P: 'PLAN',
+                    A: 'AUDIT',
+                    B: 'BUILD',
+                    C: 'CHECK',
+                    D: 'DONE',
+                };
+                badge.textContent = labels[nextState];
+                badge.style.display = nextState === 'IDLE' ? 'none' : 'inline-block';
+            }
+
+            // ─── Roadmap Bar ───
+            const PHASES = ['P', 'A', 'B', 'C'] as const;
+            const roadmap = document.getElementById('pabcRoadmap');
+            const shark = document.getElementById('sharkRunner');
+            const brand = document.getElementById('pabcBrand');
+
+            if (roadmap && shark) {
+                if (nextState === 'IDLE') {
+                    roadmap.classList.remove('visible', 'shimmer-out');
+                    shark.classList.remove('running');
+                } else if (nextState === 'D') {
+                    // All dots done + shimmer out
+                    PHASES.forEach(p => {
+                        const dot = document.getElementById(`dot-${p}`);
+                        if (dot) { dot.className = 'pabc-dot done'; dot.setAttribute('data-phase', p); }
+                    });
+                    for (let i = 0; i < 4; i++) {
+                        const c = document.getElementById(`pabc-conn-${i}`);
+                        if (c) c.className = 'pabc-connector done';
+                    }
+                    shark.classList.remove('running');
+                    roadmap.classList.add('shimmer-out');
+                    setTimeout(() => roadmap.classList.remove('visible', 'shimmer-out'), 1000);
+                } else {
+                    roadmap.classList.remove('shimmer-out');
+                    roadmap.classList.add('visible');
+                    shark.classList.add('running');
+
+                    // Update dots & connectors
+                    const idx = PHASES.indexOf(nextState as typeof PHASES[number]);
+                    PHASES.forEach((p, pi) => {
+                        const dot = document.getElementById(`dot-${p}`);
+                        if (dot) {
+                            dot.className = `pabc-dot ${pi < idx ? 'done' : pi === idx ? 'active' : 'future'}`;
+                            dot.setAttribute('data-phase', p);
+                        }
+                    });
+                    for (let i = 0; i < 4; i++) {
+                        const c = document.getElementById(`pabc-conn-${i}`);
+                        if (c) c.className = `pabc-connector ${i < idx ? 'done' : ''}`;
+                    }
+
+                    // Move shark along connector
+                    requestAnimationFrame(() => {
+                        const barRect = roadmap.getBoundingClientRect();
+                        const activeDot = document.getElementById(`dot-${nextState}`);
+                        if (!activeDot) return;
+                        const conn = document.getElementById(`pabc-conn-${idx}`);
+                        if (conn && nextState !== 'C') {
+                            const connRect = conn.getBoundingClientRect();
+                            shark.style.left = ((connRect.left - barRect.left) + (connRect.width * 0.4) - 18) + 'px';
+                        } else {
+                            const dotRect = activeDot.getBoundingClientRect();
+                            shark.style.left = ((dotRect.left - barRect.left) + (dotRect.width / 2) - 18) + 'px';
+                        }
+                    });
+                }
+
+                // Update brand text with worklog title
+                if (brand && msg.title) {
+                    brand.textContent = msg.title;
+                }
+            }
         } else if (msg.type === 'new_message' && msg.source === 'telegram') {
             addMessage(msg.role === 'assistant' ? 'agent' : (msg.role || 'user'), msg.content || '');
         }

package/scripts/release.sh

@@ -1,5 +1,5 @@
 #!/usr/bin/env bash
-# release.sh — 빌드 + 버전업 + npm publish를 한 번에 처리
+# release.sh — 빌드 + 버전업 + npm publish + GitHub Release 한 번에 처리
 set -e
 
 echo "🦈 cli-jaw release script"
@@ -21,10 +21,33 @@ npm version "$BUMP" --no-git-tag-version
 VERSION=$(node -p "require('./package.json').version")
 echo "📌 New version: $VERSION"
 
-# 4. npm publish
+# 4. git commit + tag
+echo "🏷️  Creating git tag v$VERSION..."
+git add package.json package-lock.json
+git commit -m "[agent] chore: release v$VERSION" --allow-empty
+git tag "v$VERSION"
+git push origin master
+git push origin "v$VERSION"
+
+# 5. npm publish
 echo "🚀 Publishing to npm..."
 npm publish --access public
 
+# 6. GitHub Release (auto-generate notes from commits since last tag)
+echo "📋 Creating GitHub Release..."
+PREV_TAG=$(git tag --sort=-v:refname | grep -E '^v' | sed -n '2p')
+if [ -n "$PREV_TAG" ] && command -v gh &>/dev/null; then
+    gh release create "v$VERSION" \
+        --title "v$VERSION" \
+        --generate-notes \
+        --notes-start-tag "$PREV_TAG" \
+        --latest
+    echo "✅ GitHub Release v$VERSION created!"
+else
+    echo "⚠️  Skipped GitHub Release (gh CLI not found or no previous tag)"
+fi
+
 echo ""
 echo "✅ cli-jaw@$VERSION published!"
 echo "   Install: npm install -g cli-jaw"
+echo "   Release: https://github.com/lidge-jun/cli-jaw/releases/tag/v$VERSION"