@archznn/crewloop-skills 0.4.3 → 0.5.0

package/servers/dashboard/public/styles.css

@@ -16,6 +16,14 @@
   --warning: #facc15;
   --running: #38bdf8;
 
+  /* lifecycle tokens */
+  --lifecycle-starting: var(--warning);
+  --lifecycle-running: var(--running);
+  --lifecycle-ended: var(--text-muted);
+  --lifecycle-starting-bg: rgba(250, 204, 21, 0.12);
+  --lifecycle-running-bg: rgba(56, 189, 248, 0.12);
+  --lifecycle-ended-bg: rgba(148, 163, 184, 0.10);
+
   --font-display: 'Bebas Neue', 'Oswald', sans-serif;
   --font-body: 'DM Sans', system-ui, sans-serif;
   --font-mono: 'JetBrains Mono', ui-monospace, monospace;
@@ -237,6 +245,121 @@ html, body {
   text-transform: uppercase;
 }
 
+.session-item-main {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.session-item-meta {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+}
+
+/* Lifecycle badge */
+.lifecycle-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  border: 1px solid var(--border-default);
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
+  animation: lifecycle-enter 0.2s ease-out;
+}
+
+.lifecycle-badge.starting {
+  color: var(--lifecycle-starting);
+  background: var(--lifecycle-starting-bg);
+  border-color: rgba(250, 204, 21, 0.35);
+}
+
+.lifecycle-badge.running {
+  color: var(--lifecycle-running);
+  background: var(--lifecycle-running-bg);
+  border-color: rgba(56, 189, 248, 0.35);
+}
+
+.lifecycle-badge.ended {
+  color: var(--lifecycle-ended);
+  background: var(--lifecycle-ended-bg);
+  border-color: var(--border-default);
+}
+
+@keyframes lifecycle-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Empty state */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 48px 24px;
+  text-align: center;
+  color: var(--text-secondary);
+  animation: empty-state-enter 0.25s ease-out;
+}
+
+.empty-state-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 16px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-default);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+}
+
+.empty-state-icon i {
+  font-size: 2rem;
+}
+
+.empty-state-title {
+  font-family: var(--font-display);
+  font-size: 2rem;
+  font-weight: 400;
+  line-height: 1.1;
+  letter-spacing: 0.04em;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.empty-state-body {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+@keyframes empty-state-enter {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 /* Main layout */
 .main {
   display: flex;
@@ -294,12 +417,24 @@ html, body {
   right: 0;
   height: 4px;
   background: var(--text-muted);
-  transition: background 0.2s ease;
+  transition: background 0.2s ease, box-shadow 0.2s ease;
+}
+
+.panel-accent-strip.starting {
+  background: var(--lifecycle-starting);
+  box-shadow: 0 0 12px var(--lifecycle-starting);
+  animation: lifecycle-glow 2s ease-in-out infinite;
 }
 
 .panel-accent-strip.running {
-  background: var(--accent);
-  box-shadow: 0 0 16px var(--accent-dim);
+  background: var(--lifecycle-running);
+  box-shadow: 0 0 12px var(--lifecycle-running);
+  animation: lifecycle-glow 2s ease-in-out infinite;
+}
+
+.panel-accent-strip.ended {
+  background: var(--border-strong);
+  box-shadow: none;
 }
 
 .active-skill-content {
@@ -363,8 +498,16 @@ html, body {
   background: var(--text-muted);
 }
 
+.status-dot.starting {
+  background: var(--lifecycle-starting);
+}
+
 .status-dot.running {
-  background: var(--running);
+  background: var(--lifecycle-running);
+}
+
+.status-dot.ended {
+  background: var(--lifecycle-ended);
 }
 
 .status-dot.error {
@@ -561,31 +704,43 @@ html, body {
   }
 }
 
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.4;
-    transform: scale(1.2);
-  }
+.status-dot.running,
+.status-dot.starting {
+  animation: lifecycle-pulse 1.5s ease-in-out infinite;
 }
 
-.status-dot.running {
-  animation: pulse 1.2s ease-in-out infinite;
+.lifecycle-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
 }
 
+.lifecycle-badge.starting .lifecycle-dot,
+.lifecycle-badge.running .lifecycle-dot {
+  animation: lifecycle-pulse 1.5s ease-in-out infinite;
+}
+
+.panel-accent-strip.starting,
 .panel-accent-strip.running {
-  animation: glow 2s ease-in-out infinite;
+  animation: lifecycle-glow 2s ease-in-out infinite;
+}
+
+@keyframes lifecycle-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
 }
 
-@keyframes glow {
+@keyframes lifecycle-glow {
   0%, 100% {
-    box-shadow: 0 0 0 transparent;
+    box-shadow: 0 0 8px currentColor;
   }
   50% {
-    box-shadow: 0 0 16px var(--accent-dim);
+    box-shadow: 0 0 16px currentColor;
   }
 }
 

package/servers/dashboard/src/adapters/codex.ts

@@ -19,6 +19,7 @@ export interface CodexHookPayload {
   executed?: boolean;
   success?: boolean;
   durationMs?: number;
+  skill?: string;
 }
 
 const EVENT_MAP: Record<string, EventType> = {
@@ -42,6 +43,7 @@ export function normalizeCodex(payload: CodexHookPayload): DashboardEvent | unde
     session_id: payload.sessionId || payload.session_id || 'unknown',
     event_type,
     tool: payload.toolName,
+    skill: payload.skill,
   };
 }
 

package/servers/dashboard/src/adapters/kimi.ts

@@ -9,6 +9,7 @@ export interface KimiHookPayload {
   tool_response?: Record<string, unknown>;
   stop_reason?: string;
   usage?: unknown;
+  skill?: string;
 }
 
 const EVENT_MAP: Record<string, EventType> = {
@@ -32,6 +33,7 @@ export function normalizeKimi(payload: KimiHookPayload): DashboardEvent | undefi
     session_id: payload.session_id || 'unknown',
     event_type,
     tool: payload.tool_name,
+    skill: payload.skill,
   };
 }
 

package/servers/dashboard/src/adapters/shim.test.ts

@@ -1,6 +1,6 @@
 import { describe, it } from 'node:test';
 import assert from 'node:assert/strict';
-import { detectSource, buildEvent } from './shim';
+import { detectSource, buildEvent, getDefaultSkill } from './shim';
 import type { AgentSource, DashboardEvent } from '../types';
 
 describe('detectSource', () => {
@@ -20,6 +20,22 @@ describe('detectSource', () => {
   });
 });
 
+describe('getDefaultSkill', () => {
+  it('reads default skill from argv', () => {
+    assert.equal(getDefaultSkill(['node', 'shim', 'kimi', '--default-skill', 'orchestrator']), 'orchestrator');
+  });
+
+  it('falls back to env var', () => {
+    process.env.CREWLOOP_DEFAULT_SKILL = 'architect';
+    assert.equal(getDefaultSkill(['node', 'shim', 'kimi']), 'architect');
+    delete process.env.CREWLOOP_DEFAULT_SKILL;
+  });
+
+  it('returns undefined when not configured', () => {
+    assert.equal(getDefaultSkill(['node', 'shim', 'kimi']), undefined);
+  });
+});
+
 describe('buildEvent', () => {
   it('builds Kimi PreToolUse event', () => {
     const event = buildEvent('kimi' as AgentSource, {
@@ -71,4 +87,51 @@ describe('buildEvent', () => {
     });
     assert.equal(event, undefined);
   });
+
+  it('attaches default skill to session_start events', () => {
+    const event = buildEvent(
+      'kimi' as AgentSource,
+      { hook_event_name: 'SessionStart', session_id: 'sess-1', cwd: '/project' },
+      'orchestrator'
+    );
+    assert.equal(event?.event_type, 'session_start');
+    assert.equal(event?.skill, 'orchestrator');
+  });
+
+  it('does not attach default skill to tool events', () => {
+    const startEvent = buildEvent(
+      'kimi' as AgentSource,
+      { hook_event_name: 'PreToolUse', session_id: 'sess-1', cwd: '/project', tool_name: 'Read' },
+      'orchestrator'
+    );
+    assert.equal(startEvent?.event_type, 'tool_start');
+    assert.equal(startEvent?.skill, undefined);
+
+    const endEvent = buildEvent(
+      'kimi' as AgentSource,
+      { hook_event_name: 'PostToolUse', session_id: 'sess-1', cwd: '/project', tool_name: 'Read' },
+      'orchestrator'
+    );
+    assert.equal(endEvent?.event_type, 'tool_end');
+    assert.equal(endEvent?.skill, undefined);
+  });
+
+  it('forwards explicit payload skill for kimi', () => {
+    const event = buildEvent('kimi' as AgentSource, {
+      hook_event_name: 'SessionStart',
+      session_id: 'sess-1',
+      cwd: '/project',
+      skill: 'architect',
+    });
+    assert.equal(event?.skill, 'architect');
+  });
+
+  it('forwards explicit payload skill for codex', () => {
+    const event = buildEvent('codex' as AgentSource, {
+      sessionId: 'sess-2',
+      hook_event_name: 'SessionStart',
+      skill: 'engineer',
+    });
+    assert.equal(event?.skill, 'engineer');
+  });
 });

package/servers/dashboard/src/adapters/shim.ts

@@ -6,6 +6,15 @@ import { sanitize } from '../filters/sanitize';
 
 const DEFAULT_SERVER_URL = 'http://127.0.0.1:7890';
 
+export function getDefaultSkill(argv: string[]): string | undefined {
+  const idx = argv.indexOf('--default-skill');
+  if (idx !== -1 && argv[idx + 1]) {
+    return argv[idx + 1];
+  }
+  const env = process.env.CREWLOOP_DEFAULT_SKILL;
+  return env || undefined;
+}
+
 export function detectSource(argv: string[]): AgentSource | undefined {
   const arg = argv[2];
   if (arg === 'kimi' || arg === 'codex' || arg === 'opencode' || arg === 'log-watcher') {
@@ -42,13 +51,18 @@ export function normalizePayload(source: AgentSource, raw: unknown): DashboardEv
 
 export function buildEvent(
   source: AgentSource,
-  raw: Record<string, unknown>
+  raw: Record<string, unknown>,
+  defaultSkill?: string
 ): DashboardEvent | undefined {
   const base = normalizePayload(source, raw);
   if (!base) {
     return undefined;
   }
 
+  if (base.event_type === 'session_start' && defaultSkill) {
+    base.skill = defaultSkill;
+  }
+
   const isPost = base.event_type === 'tool_end';
   const sanitized = sanitize(
     {
@@ -100,6 +114,8 @@ export function runShim(): void {
     process.exit(1);
   }
 
+  const defaultSkill = getDefaultSkill(process.argv);
+
   let raw = '';
   process.stdin.setEncoding('utf8');
   process.stdin.on('data', (chunk) => {
@@ -108,7 +124,7 @@ export function runShim(): void {
   process.stdin.on('end', () => {
     try {
       const payload = JSON.parse(raw);
-      const event = buildEvent(source, payload);
+      const event = buildEvent(source, payload, defaultSkill);
       if (event) {
         postEvent(event);
       }

package/servers/dashboard/src/presenter.test.ts

@@ -14,6 +14,7 @@ function makeSession(overrides: Partial<Session> = {}): Session {
     active_skill: 'architect',
     active_confidence: 'explicit',
     status: 'running',
+    lifecycle: 'running',
     ...overrides,
   };
 }
@@ -28,11 +29,18 @@ describe('presenter', () => {
     assert.equal(client.skill, 'architect');
     assert.deepEqual(client.activeSkill, { name: 'architect', confidence: 'explicit' });
     assert.equal(client.status, 'running');
+    assert.equal(client.lifecycle, 'running');
     assert.equal(client.startTime, 1000);
     assert.equal(client.lastActivity, 2000);
     assert.deepEqual(client.toolCounts, { Read: 2 });
   });
 
+  it('includes lifecycle and endedAt', () => {
+    const client = presentSession(makeSession({ lifecycle: 'ended', ended_at: 5000 }));
+    assert.equal(client.lifecycle, 'ended');
+    assert.equal(client.endedAt, 5000);
+  });
+
   it('omits active skill when not set', () => {
     const client = presentSession(makeSession({ active_skill: undefined }));
     assert.equal(client.activeSkill, undefined);

package/servers/dashboard/src/presenter.ts

@@ -26,9 +26,11 @@ export function presentSession(session: Session): ClientSession {
           }
         : undefined,
     status: session.status,
+    lifecycle: session.lifecycle,
     events: session.events.map(presentEvent),
     startTime: session.started_at,
     lastActivity: session.last_event_at,
+    endedAt: session.ended_at,
     toolCounts: session.tool_counts,
   };
 }

package/servers/dashboard/src/skills/infer.test.ts

@@ -9,6 +9,7 @@ function makeSession(overrides: Partial<Session> = {}): Session {
     source: 'kimi',
     events: [],
     tool_counts: {},
+    lifecycle: 'running',
     started_at: Date.now(),
     last_event_at: Date.now(),
     ...overrides,
@@ -76,6 +77,15 @@ describe('SkillInferenceEngine', () => {
     assert.equal(result.confidence, 'heuristic');
   });
 
+  it('preserves explicit active skill when no new explicit signal arrives', () => {
+    const engine = new SkillInferenceEngine(skills);
+    const session = makeSession({ active_skill: 'orchestrator', active_confidence: 'explicit' });
+    const event = makeEvent({ tool: 'Read', detail: 'README.md' });
+    const result = engine.infer(event, session);
+    assert.equal(result.skill, 'orchestrator');
+    assert.equal(result.confidence, 'explicit');
+  });
+
   it('returns unknown when nothing matches', () => {
     const engine = new SkillInferenceEngine(skills);
     const event = makeEvent({ tool: 'UnknownTool' });

package/servers/dashboard/src/skills/infer.ts

@@ -9,6 +9,14 @@ export class SkillInferenceEngine {
   }
 
   infer(event: DashboardEvent, session: Session): SkillInferenceResult {
+    const explicitSignal =
+      (event.event_type === 'skill_change' && event.skill) ||
+      (event.tool === 'Skill' && event.detail && this.normalizeSkillName(event.detail));
+
+    if (session.active_confidence === 'explicit' && !explicitSignal) {
+      return { skill: session.active_skill, confidence: 'explicit' };
+    }
+
     if (event.event_type === 'skill_change' && event.skill) {
       return { skill: event.skill, confidence: 'explicit' };
     }

package/servers/dashboard/src/state.test.ts

@@ -15,6 +15,7 @@ function makeEvent(overrides: Partial<DashboardEvent> = {}): DashboardEvent {
   };
 }
 
+
 describe('StateStore', () => {
   it('creates session on first event', () => {
     const store = new StateStore({ maxEventsPerSession: 10, sessionMaxAgeMs: 60000 });
@@ -51,6 +52,14 @@ describe('StateStore', () => {
     assert.equal(session.active_confidence, 'explicit');
   });
 
+  it('sets explicit active skill from session_start event', () => {
+    const store = new StateStore({ maxEventsPerSession: 10, sessionMaxAgeMs: 60000 });
+    store.applyEvent(makeEvent({ skill: 'orchestrator', event_type: 'session_start' }));
+    const session = store.getSession('sess-1')!;
+    assert.equal(session.active_skill, 'orchestrator');
+    assert.equal(session.active_confidence, 'explicit');
+  });
+
   it('derives running status from tool_start', () => {
     const store = new StateStore({ maxEventsPerSession: 10, sessionMaxAgeMs: 60000 });
     store.applyEvent(makeEvent({ event_type: 'tool_start' }));
@@ -85,4 +94,38 @@ describe('StateStore', () => {
     assert.equal(sessions[0].id, 'b');
     assert.equal(sessions[1].id, 'a');
   });
+
+  it('starts with lifecycle starting on session_start', () => {
+    const store = new StateStore({ maxEventsPerSession: 10, sessionMaxAgeMs: 60000 });
+    store.applyEvent(makeEvent({ event_type: 'session_start' }));
+    const session = store.getSession('sess-1')!;
+    assert.equal(session.lifecycle, 'starting');
+  });
+
+  it('transitions to running on first tool event', () => {
+    const store = new StateStore({ maxEventsPerSession: 10, sessionMaxAgeMs: 60000 });
+    store.applyEvent(makeEvent({ event_type: 'session_start' }));
+    store.applyEvent(makeEvent({ event_type: 'tool_start', tool: 'Read' }));
+    const session = store.getSession('sess-1')!;
+    assert.equal(session.lifecycle, 'running');
+  });
+
+  it('sets lifecycle ended and ended_at on session_end', () => {
+    const store = new StateStore({ maxEventsPerSession: 10, sessionMaxAgeMs: 60000 });
+    store.applyEvent(makeEvent({ event_type: 'session_start' }));
+    const endTs = Date.now() + 1000;
+    store.applyEvent(makeEvent({ event_type: 'session_end', timestamp: endTs }));
+    const session = store.getSession('sess-1')!;
+    assert.equal(session.lifecycle, 'ended');
+    assert.equal(session.ended_at, endTs);
+  });
+
+  it('keeps session ended after subsequent tool events', () => {
+    const store = new StateStore({ maxEventsPerSession: 10, sessionMaxAgeMs: 60000 });
+    store.applyEvent(makeEvent({ event_type: 'session_start' }));
+    store.applyEvent(makeEvent({ event_type: 'session_end' }));
+    store.applyEvent(makeEvent({ event_type: 'tool_start', tool: 'Read' }));
+    const session = store.getSession('sess-1')!;
+    assert.equal(session.lifecycle, 'ended');
+  });
 });

package/servers/dashboard/src/state.ts

@@ -32,11 +32,19 @@ export class StateStore {
       session.tool_counts[event.tool] = (session.tool_counts[event.tool] || 0) + 1;
     }
 
-    if (event.skill) {
+    if (event.event_type === 'session_start' && event.skill) {
+      session.active_skill = event.skill;
+      session.active_confidence = 'explicit';
+    } else if (event.skill) {
       session.active_skill = event.skill;
       session.active_confidence = event.event_type === 'skill_change' ? 'explicit' : 'heuristic';
     }
 
+    if (event.event_type === 'session_end') {
+      session.ended_at = event.timestamp;
+    }
+    session.lifecycle = deriveLifecycle(event, session);
+
     session.status = deriveSessionStatus(event);
 
     this.sessions.set(event.session_id, session);
@@ -91,6 +99,7 @@ export class StateStore {
       source,
       events: [],
       tool_counts: {},
+      lifecycle: 'starting',
       started_at: now,
       last_event_at: now,
     };
@@ -99,6 +108,16 @@ export class StateStore {
   }
 }
 
+function deriveLifecycle(event: DashboardEvent, session: Session): 'starting' | 'running' | 'ended' {
+  if (event.event_type === 'session_end' || session.ended_at) {
+    return 'ended';
+  }
+  if (event.event_type === 'session_start' && session.events.length <= 1) {
+    return 'starting';
+  }
+  return 'running';
+}
+
 function deriveSessionStatus(event: DashboardEvent): EventStatus | undefined {
   switch (event.event_type) {
     case 'session_start':

package/servers/dashboard/src/types.ts

@@ -28,10 +28,12 @@ export interface Session {
   active_skill?: string;
   active_confidence?: 'explicit' | 'heuristic' | 'unknown';
   status?: EventStatus;
+  lifecycle: 'starting' | 'running' | 'ended';
   events: DashboardEvent[];
   tool_counts: Record<string, number>;
   started_at: number;
   last_event_at: number;
+  ended_at?: number;
 }
 
 export interface DashboardState {
@@ -60,9 +62,11 @@ export interface ClientSession {
   skill?: string;
   activeSkill?: ClientActiveSkill;
   status?: EventStatus;
+  lifecycle: 'starting' | 'running' | 'ended';
   events: ClientEvent[];
   startTime: number;
   lastActivity: number;
+  endedAt?: number;
   toolCounts: Record<string, number>;
 }
 

package/skills/orchestrator/SKILL.md

@@ -11,6 +11,12 @@ You are a technical product manager and discovery specialist. Your job is to ext
 
 ---
 
+## DASHBOARD LIFECYCLE
+
+When this skill is loaded at the start of a session, the CrewLoop dashboard should display an active session named `orchestrator`. If the agent supports lifecycle hooks, ensure the first event sent to the dashboard marks `orchestrator` as the active skill.
+
+---
+
 ### 🚨 MANDATORY: Read Reference & Template Files
 Before taking any action, you MUST read the global conventions in [conventions.md](../../references/conventions.md), the workflow in [workflow.md](../../references/workflow.md), and any local reference files or directories (such as `references/` or `assets/`) if present. Never skip this step or make assumptions about the guidelines.