@archznn/crewloop-skills 0.4.2 → 0.5.0

package/servers/dashboard/public/app.js

@@ -219,27 +219,89 @@
     renderActivityGraph(session);
   }
 
+  let lifecycleBadgeEl = null;
+  let emptyStateEl = null;
+
+  function getActiveSkillContent() {
+    return activeSkillName.parentElement;
+  }
+
+  function setChildrenVisibility(visible) {
+    const content = getActiveSkillContent();
+    if (!content) return;
+    Array.from(content.children).forEach((child) => {
+      if (child === emptyStateEl) return;
+      child.style.display = visible ? '' : 'none';
+    });
+  }
+
+  function renderEmptyState() {
+    if (!emptyStateEl) {
+      emptyStateEl = document.createElement('div');
+      emptyStateEl.className = 'empty-state';
+      emptyStateEl.innerHTML = `
+        <div class="empty-state-icon"><i class="ph ph-monitor-play"></i></div>
+        <h2 class="empty-state-title">NO ACTIVE SESSION</h2>
+        <p class="empty-state-body">Start an agent session to see it here.</p>
+      `;
+      getActiveSkillContent()?.appendChild(emptyStateEl);
+    }
+    emptyStateEl.style.display = 'flex';
+    setChildrenVisibility(false);
+  }
+
+  function hideEmptyState() {
+    if (emptyStateEl) {
+      emptyStateEl.style.display = 'none';
+    }
+    setChildrenVisibility(true);
+  }
+
+  function renderLifecycleBadge(session) {
+    if (!lifecycleBadgeEl) {
+      lifecycleBadgeEl = document.createElement('span');
+      lifecycleBadgeEl.className = 'lifecycle-badge';
+      statusBadge.parentNode?.insertBefore(lifecycleBadgeEl, statusBadge.nextSibling);
+    }
+    const lifecycle = session.lifecycle || 'starting';
+    lifecycleBadgeEl.className = 'lifecycle-badge ' + lifecycle;
+    lifecycleBadgeEl.innerHTML = `<span class="lifecycle-dot"></span>${lifecycle.toUpperCase()}`;
+    lifecycleBadgeEl.style.display = 'inline-flex';
+  }
+
+  function hideLifecycleBadge() {
+    if (lifecycleBadgeEl) {
+      lifecycleBadgeEl.style.display = 'none';
+    }
+  }
+
   function renderActiveSkill(session) {
     if (!session) {
-      activeSkillName.textContent = 'IDLE';
-      activeSkillIcon.className = 'ph ph-circle';
+      renderEmptyState();
       activeStrip.className = 'panel-accent-strip';
-      statusDot.className = 'status-dot';
-      statusText.textContent = 'IDLE';
-      confidenceBadge.textContent = 'unknown';
-      activeSkillSource.innerHTML = '<i class="ph ph-monitor"></i><span>waiting for events</span>';
+      hideLifecycleBadge();
       return;
     }
 
+    hideEmptyState();
+
     const skill = session.activeSkill || { name: 'UNKNOWN', confidence: 'low' };
     const iconClass = skillIcon(skill.name);
     activeSkillName.textContent = skill.name.toUpperCase();
     activeSkillIcon.className = 'ph ' + iconClass;
 
-    const running = session.status === 'running';
-    activeStrip.className = 'panel-accent-strip' + (running ? ' running' : '');
-    statusDot.className = 'status-dot ' + (running ? 'running' : session.status || '');
-    statusText.textContent = running ? 'RUNNING' : (session.status ? session.status.toUpperCase() : 'IDLE');
+    const lifecycle = session.lifecycle || 'starting';
+    activeStrip.className = 'panel-accent-strip ' + lifecycle;
+
+    if (lifecycle === 'ended') {
+      statusDot.className = 'status-dot ' + (session.status || '');
+      statusText.textContent = session.status ? session.status.toUpperCase() : 'ENDED';
+    } else {
+      statusDot.className = 'status-dot ' + lifecycle;
+      statusText.textContent = lifecycle.toUpperCase();
+    }
+
+    renderLifecycleBadge(session);
     confidenceBadge.textContent = skill.confidence || 'low';
 
     activeSkillSource.innerHTML = `<i class="ph ph-${sourceIcon(session.source)}"></i><span>${session.source || 'unknown'}</span>`;
@@ -265,7 +327,8 @@
     const events = session.events || [];
     const toolEvents = events.filter((e) => e.event_type === 'tool_start' || e.event_type === 'tool_end');
     toolCount.textContent = String(Math.ceil(toolEvents.length / 2));
-    const dur = session.lastActivity && session.startTime ? session.lastActivity - session.startTime : 0;
+    const endTime = session.endedAt || session.lastActivity;
+    const dur = endTime && session.startTime ? endTime - session.startTime : 0;
     durationEl.textContent = formatDuration(dur);
     updateEventRate();
   }
@@ -383,8 +446,14 @@
       li.className = 'session-item' + (s.id === state.selectedSessionId ? ' active' : '');
       li.setAttribute('role', 'option');
       li.setAttribute('aria-selected', String(s.id === state.selectedSessionId));
+      const duration = s.endedAt
+        ? `ended after ${formatDuration(s.endedAt - s.startTime)}`
+        : formatDuration(Date.now() - s.startTime);
       li.innerHTML = `
-        <span class="session-item-id">${truncate(s.id, 16)}</span>
+        <div class="session-item-main">
+          <span class="session-item-id">${truncate(s.id, 16)}</span>
+          <span class="session-item-meta">${formatTime(s.startTime)} · ${duration}</span>
+        </div>
         <span class="session-item-source">${s.source || 'unknown'}</span>
       `;
       li.addEventListener('click', () => {

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/index.ts

@@ -1,6 +1,20 @@
 import { loadConfig } from './config';
 import { createDashboardServer } from './server';
 
+function handleFatalError(err: unknown): void {
+  if (err instanceof Error) {
+    console.error(err.message);
+  } else {
+    console.error('An unexpected error occurred while starting the dashboard.');
+  }
+  process.exit(1);
+}
+
+process.on('uncaughtException', handleFatalError);
+process.on('unhandledRejection', (reason) => {
+  handleFatalError(reason);
+});
+
 async function main(): Promise<void> {
   const config = loadConfig();
   const server = createDashboardServer(config);
@@ -18,7 +32,4 @@ async function main(): Promise<void> {
   await server.start();
 }
 
-main().catch((err) => {
-  console.error('Failed to start dashboard:', err);
-  process.exit(1);
-});
+main().catch(handleFatalError);

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/server.test.ts

@@ -120,4 +120,10 @@ describe('DashboardServer', () => {
     const status = await httpGetStatus(port, '/../../package.json');
     assert.equal(status, 403);
   });
+
+  it('reports a friendly error when the port is already in use', async () => {
+    const secondServer = createDashboardServer(makeConfig(port, process.cwd()));
+    await assert.rejects(secondServer.start(), /already in use/);
+    await secondServer.stop();
+  });
 });

package/servers/dashboard/src/server.ts

@@ -153,17 +153,37 @@ export function createDashboardServer(config: ServerConfig): DashboardServer {
     });
   }
 
+  function formatListenError(err: NodeJS.ErrnoException): Error {
+    if (err.code === 'EADDRINUSE') {
+      return new Error(`Port ${config.port} is already in use. Use --port <number> to choose another port.`);
+    }
+    if (err.code === 'EACCES') {
+      return new Error(`Permission denied to use port ${config.port}. Try a port above 1024 or use --port <number>.`);
+    }
+    return new Error(`Failed to start dashboard server: ${err.message}`);
+  }
+
   return {
     httpServer,
     wss,
     state,
     start: () =>
       new Promise<void>((resolve, reject) => {
+        const onError = (err: Error) => {
+          httpServer.off('error', onError);
+          wss.off('error', onError);
+          reject(formatListenError(err as NodeJS.ErrnoException));
+        };
+
+        httpServer.once('error', onError);
+        wss.once('error', onError);
+
         httpServer.listen(config.port, config.host, () => {
+          httpServer.off('error', onError);
+          wss.off('error', onError);
           console.log(`CrewLoop dashboard running at http://${config.host}:${config.port}`);
           resolve();
         });
-        httpServer.on('error', reject);
       }),
     stop: () =>
       new Promise<void>((resolve) => {

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' });