refactor: BaseCard hard style shadow, SocialCard blocking lists, AgentAvatar ZFC states

tests/components/shared/agent-avatar.test.tsx

@@ -0,0 +1,56 @@
+import { describe, it, before } from 'node:test';
+import assert from 'node:assert';
+import React from 'react';
+
+// Shim React for the test environment
+before(() => {
+  // @ts-ignore
+  global.React = React;
+});
+
+describe('AgentAvatar Component Contract', () => {
+  it('exports AgentAvatar component', async () => {
+    const mod = await import('../../../src/components/shared/agent-avatar');
+    assert.ok(mod.AgentAvatar, 'AgentAvatar should be exported');
+  });
+});
+
+describe('AgentAvatar Role Styling', () => {
+  it('applies correct role color class for "ui" role', async () => {
+    const { AgentAvatar } = await import('../../../src/components/shared/agent-avatar');
+    // @ts-ignore - role prop not yet implemented
+    const element = AgentAvatar({ name: 'Test', status: 'active', role: 'ui' }) as any;
+    
+    const className = element.props.className || '';
+    assert.ok(
+      className.includes('border-l-[3px]') && className.includes('border-l-[var(--agent-role-ui)]'),
+      `Expected role-colored left border for ui, but got: ${className}`
+    );
+  });
+
+  it('applies correct role color class for "orchestrator" role', async () => {
+    const { AgentAvatar } = await import('../../../src/components/shared/agent-avatar');
+    // @ts-ignore - role prop not yet implemented
+    const element = AgentAvatar({ name: 'Test', status: 'active', role: 'orchestrator' }) as any;
+    
+    const className = element.props.className || '';
+    assert.ok(
+      className.includes('border-l-[var(--agent-role-orchestrator)]'),
+      `Expected role-colored left border for orchestrator, but got: ${className}`
+    );
+  });
+});
+
+describe('AgentAvatar ZFC States', () => {
+  it('applies working pulse glow', async () => {
+    const { AgentAvatar } = await import('../../../src/components/shared/agent-avatar');
+    // @ts-ignore - working status not yet implemented
+    const element = AgentAvatar({ name: 'Test', status: 'working' }) as any;
+    
+    const className = element.props.className || '';
+    assert.ok(
+      className.includes('animate-pulse') || className.includes('shadow-[0_0_12px_rgba(124,185,122,0.4)]'),
+      `Expected working pulse glow, but got: ${className}`
+    );
+  });
+});

tests/components/shared/base-card.test.tsx

@@ -0,0 +1,59 @@
+import { describe, it, before } from 'node:test';
+import assert from 'node:assert';
+import React from 'react';
+
+// Shim React for the test environment to support JSX execution
+before(() => {
+  // @ts-ignore
+  global.React = React;
+});
+
+describe('BaseCard Component Contract', () => {
+  it('exports BaseCard component', async () => {
+    const mod = await import('../../../src/components/shared/base-card');
+    assert.ok(mod.BaseCard, 'BaseCard should be exported');
+    assert.equal(typeof mod.BaseCard, 'function', 'BaseCard should be a function/component');
+  });
+});
+
+describe('BaseCard Styling Logic', () => {
+  it('should be possible to import the component', async () => {
+    const mod = await import('../../../src/components/shared/base-card');
+    assert.ok(mod.BaseCard);
+  });
+
+  it('applies correct status border class for "ready" status', async () => {
+    const { BaseCard } = await import('../../../src/components/shared/base-card');
+    // @ts-ignore - status prop not yet implemented in production code
+    const element = BaseCard({ children: 'test', status: 'ready' }) as any;
+    
+    const className = element.props.className || '';
+    assert.ok(
+      className.includes('border-[var(--status-ready)]') || className.includes('border-teal-500'), // Temporary check
+      `Expected className to contain status-ready border, but got: ${className}`
+    );
+  });
+
+  it('applies correct status border class for "blocked" status', async () => {
+    const { BaseCard } = await import('../../../src/components/shared/base-card');
+    // @ts-ignore - status prop not yet implemented
+    const element = BaseCard({ children: 'test', status: 'blocked' }) as any;
+    
+    const className = element.props.className || '';
+    assert.ok(
+      className.includes('border-[var(--status-blocked)]') || className.includes('border-amber-500'),
+      `Expected className to contain status-blocked border, but got: ${className}`
+    );
+  });
+
+  it('applies selection ring when selected prop is true', async () => {
+    const { BaseCard } = await import('../../../src/components/shared/base-card');
+    const element = BaseCard({ children: 'test', selected: true }) as any;
+    
+    const className = element.props.className || '';
+    assert.ok(
+      className.includes('ring-1') && className.includes('ring-amber-500/30'),
+      `Expected className to contain selection ring, but got: ${className}`
+    );
+  });
+});

tests/lib/social-cards.test.ts

@@ -75,7 +75,7 @@ test('buildSocialCards maps priority correctly', () => {
   assert.equal(cards[6].priority, 'P4');
 });
 
-test('buildSocialCards computes unlocks (outgoing blocks)', () => {
+test('buildSocialCards computes unblocks (outgoing blocks)', () => {
   const beads = [
     issue({ id: 'bb-1', dependencies: [dep('blocks', 'bb-2'), dep('blocks', 'bb-3')] }),
     issue({ id: 'bb-2' }),
@@ -85,7 +85,7 @@ test('buildSocialCards computes unlocks (outgoing blocks)', () => {
   const cards = buildSocialCards(beads);
   const card1 = cards.find((c) => c.id === 'bb-1')!;
 
-  assert.deepEqual(card1.unlocks.sort(), ['bb-2', 'bb-3']);
+  assert.deepEqual(card1.unblocks.sort(), ['bb-2', 'bb-3']);
   assert.deepEqual(card1.blocks, []);
 });
 
@@ -100,7 +100,7 @@ test('buildSocialCards computes blocks (incoming blocks)', () => {
   const card1 = cards.find((c) => c.id === 'bb-1')!;
 
   assert.deepEqual(card1.blocks.sort(), ['bb-2', 'bb-3']);
-  assert.deepEqual(card1.unlocks, []);
+  assert.deepEqual(card1.unblocks, []);
 });
 
 test('buildSocialCards ignores missing targets for blocks', () => {
@@ -111,7 +111,7 @@ test('buildSocialCards ignores missing targets for blocks', () => {
   const cards = buildSocialCards(beads);
 
   assert.equal(cards.length, 1);
-  assert.deepEqual(cards[0].unlocks, []);
+  assert.deepEqual(cards[0].unblocks, []);
   assert.deepEqual(cards[0].blocks, []);
 });
 
@@ -178,6 +178,6 @@ test('buildSocialCards ignores non-blocks dependencies', () => {
 
   const cards = buildSocialCards(beads);
 
-  assert.deepEqual(cards[0].unlocks, []);
+  assert.deepEqual(cards[0].unblocks, []);
   assert.deepEqual(cards[0].blocks, []);
 });