initial commit for beadboard

src/components/social/social-card.tsx

@@ -14,12 +14,16 @@ interface SocialCardProps {
 }
 
 const RELATIONSHIP_COLORS = {
-  unlocks: 'text-emerald-400',
+  // NEW: unlocks = what blocks ME (rose)
+  unlocks: 'text-rose-400',
+  // NEW: blocks = what I block (amber)
   blocks: 'text-amber-400',
 };
 
 const DOT_COLORS = {
-  unlocks: 'bg-emerald-400',
+  // NEW: unlocks = what blocks ME (rose)
+  unlocks: 'bg-rose-400',
+  // NEW: blocks = what I block (amber)
   blocks: 'bg-amber-400',
 };
 
@@ -146,8 +150,9 @@ export function SocialCard({
   onJumpToGraph,
   onJumpToKanban,
 }: SocialCardProps) {
-  const hasUnlocks = data.unlocks.length > 0;
+  // NEW semantic: blocks = what I block (amber), unblocks = what blocks me (rose)
   const hasBlocks = data.blocks.length > 0;
+  const hasUnblocks = data.unblocks.length > 0;
 
   return (
     <BaseCard
@@ -173,13 +178,16 @@ export function SocialCard({
           {data.title}
         </h3>
 
-        {(hasUnlocks || hasBlocks) && (
+        {(hasBlocks || hasUnblocks) && (
           <div className="space-y-1">
-            <RelationshipSection label="UNLOCKS" items={data.unlocks} color="unlocks" />
+            {/* UNLOCKS: tasks blocking THIS task (rose) - what blocks me */}
+            <RelationshipSection label="UNLOCKS" items={data.unblocks} color="unlocks" />
+            {/* BLOCKS: tasks THIS task blocks (amber) - what I block */}
             <RelationshipSection label="BLOCKS" items={data.blocks} color="blocks" />
           </div>
         )}
 
+
         <div className="flex items-center justify-between pt-1">
           <div className="flex items-center gap-1">
             {data.agents.slice(0, 3).map((agent) => (

src/components/social/social-detail.tsx

@@ -46,10 +46,11 @@ export function SocialDetail({ data }: SocialDetailProps) {
         </p>
       </div>
 
+      {/* NEW semantic: blocks = what I block (amber), unblocks = what blocks me (rose) */}
       {data.blocks.length > 0 && (
         <div className="space-y-2">
           <h3 className="text-amber-400 text-xs font-semibold uppercase tracking-wider">
-            Blocks
+            Blocks (what I block)
           </h3>
           <ul className="space-y-1">
             {data.blocks.map((id) => (
@@ -61,13 +62,13 @@ export function SocialDetail({ data }: SocialDetailProps) {
         </div>
       )}
 
-      {data.unlocks.length > 0 && (
+      {data.unblocks.length > 0 && (
         <div className="space-y-2">
-          <h3 className="text-emerald-400 text-xs font-semibold uppercase tracking-wider">
-            Unlocks
+          <h3 className="text-rose-400 text-xs font-semibold uppercase tracking-wider">
+            Unlocks (what blocks me)
           </h3>
           <ul className="space-y-1">
-            {data.unlocks.map((id) => (
+            {data.unblocks.map((id) => (
               <li key={id} className="text-text-secondary text-sm font-mono">
                 {id}
               </li>
@@ -76,6 +77,7 @@ export function SocialDetail({ data }: SocialDetailProps) {
         </div>
       )}
 
+
       <div className="space-y-2">
         <h3 className="text-text-muted text-xs font-semibold uppercase tracking-wider">
           Assigned