vipcare 0.6.4 → 0.7.0

package/lib/card.js

@@ -49,6 +49,25 @@ export function generateCards(profiles, outputPath) {
       if (noteLines.length) lastConnection = noteLines[noteLines.length - 1];
     }
 
+    // Extract Recent Activity section
+    const recentMatch = content.match(/## Recent Activity\n([\s\S]*?)(?=\n---|\n## [A-Z])/);
+    const recentActivity = recentMatch ? recentMatch[1].trim() : '';
+
+    // Extract Key Quotes section
+    const quotesMatch = content.match(/## Key Quotes\n([\s\S]*?)(?=\n---|\n## [A-Z])/);
+    const rawQuotes = quotesMatch ? quotesMatch[1].trim() : '';
+
+    // Extract Core Philosophy section
+    const philoMatch = content.match(/## Core Philosophy\n([\s\S]*?)(?=\n---|\n## [A-Z])/);
+    const rawPhilosophy = philoMatch ? philoMatch[1].trim() : '';
+
+    // Load raw Twitter data if available
+    const twitterRawFile = path.join(path.dirname(p.path), '.raw', p.slug, `twitter_${twitterHandle || p.slug}.md`);
+    let rawTweets = '';
+    if (fs.existsSync(twitterRawFile)) {
+      rawTweets = fs.readFileSync(twitterRawFile, 'utf-8');
+    }
+
     const data = extractVipData(content);
     if (!data) {
       const nameMatch = content.match(/^# (.+)$/m);
@@ -78,6 +97,10 @@ export function generateCards(profiles, outputPath) {
         updated: p.updated,
         annotations,
         last_connection: lastConnection,
+        recent_activity: recentActivity,
+        raw_quotes: rawQuotes,
+        raw_philosophy: rawPhilosophy,
+        raw_tweets: rawTweets,
       });
       continue;
     }
@@ -87,6 +110,10 @@ export function generateCards(profiles, outputPath) {
     data.twitter_handle = data.twitter_handle || twitterHandle;
     data.annotations = annotations;
     data.last_connection = lastConnection;
+    data.recent_activity = recentActivity;
+    data.raw_quotes = rawQuotes;
+    data.raw_philosophy = rawPhilosophy;
+    data.raw_tweets = rawTweets;
     cards.push(data);
   }
 
@@ -222,6 +249,16 @@ header .count { color: #94a3b8; font-size: 0.85em; }
 .panel p, .panel li { color: #475569; font-size: 0.85em; line-height: 1.6; }
 .panel ul { padding-left: 16px; }
 .panel blockquote { border-left: 3px solid #2563eb; padding: 4px 12px; margin: 6px 0; color: #475569; font-style: italic; font-size: 0.85em; }
+.tabs { display: flex; border-bottom: 2px solid #e2e8f0; margin: 0 -24px 16px; padding: 0 24px; }
+.tab { padding: 8px 16px; font-size: 0.85em; font-weight: 600; color: #94a3b8; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; }
+.tab:hover { color: #475569; }
+.tab.active { color: #2563eb; border-bottom-color: #2563eb; }
+.tab-content { display: none; }
+.tab-content.active { display: block; }
+.tweet { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; margin: 8px 0; font-size: 0.8em; color: #475569; line-height: 1.5; }
+.tweet-date { font-size: 0.7em; color: #94a3b8; margin-top: 4px; }
+.activity-item { padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 0.85em; }
+.activity-date { font-size: 0.75em; color: #94a3b8; }
 .radar { max-width: 100%; }
 
 /* Mobile */
@@ -346,13 +383,46 @@ function openPanel(index) {
   const panel = document.getElementById('panel-content');
   const avatarUrl = \`https://unavatar.io/twitter/\${card.twitter_handle || card.slug || 'unknown'}\`;
 
+  // Parse raw tweets into individual tweet objects
+  const tweets = [];
+  if (card.raw_tweets) {
+    const tweetBlocks = card.raw_tweets.split(/─{5,}/);
+    for (const block of tweetBlocks) {
+      const textMatch = block.match(/:\n([\s\S]*?)(?=📅|$)/);
+      const dateMatch = block.match(/📅\s*(.+)/);
+      const linkMatch = block.match(/🔗\s*(https?:\/\/\S+)/);
+      if (textMatch && textMatch[1].trim()) {
+        tweets.push({
+          text: textMatch[1].trim().substring(0, 280),
+          date: dateMatch ? dateMatch[1].trim() : '',
+          link: linkMatch ? linkMatch[1] : '',
+        });
+      }
+    }
+  }
+
+  // Parse recent activity into items
+  const activityItems = [];
+  if (card.recent_activity) {
+    const lines = card.recent_activity.split('\n').filter(l => l.trim());
+    for (const line of lines) {
+      const dateMatch = line.match(/###?\s*(\d{4}-\d{2}-\d{2}|\w+\s+\d+)/);
+      if (dateMatch) {
+        activityItems.push({ date: dateMatch[1], text: '' });
+      } else if (activityItems.length) {
+        activityItems[activityItems.length - 1].text += line.replace(/^[-•*]\s*/, '').trim() + ' ';
+      } else {
+        activityItems.push({ date: '', text: line.replace(/^[-•*]\s*/, '').trim() });
+      }
+    }
+  }
+
   panel.innerHTML = \`
-    <div style="display:flex;gap:14px;align-items:center;margin-bottom:16px">
+    <div style="display:flex;gap:14px;align-items:center;margin-bottom:12px">
       <img src="\${avatarUrl}" alt="" style="width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid #e2e8f0" onerror="this.style.display='none'">
       <div>
         <div style="font-size:1.3em;font-weight:700;color:#0f172a">\${card.name}</div>
         <div style="font-size:0.85em;color:#64748b">\${card.title || ''}\${card.company ? ' @ ' + card.company : ''}</div>
-        \${card.previous_role ? \`<div style="font-size:0.75em;color:#94a3b8">Previously: \${card.previous_role}</div>\` : ''}
         <div style="margin-top:4px">
           \${card.twitter_handle ? \`<a href="https://twitter.com/\${card.twitter_handle}" target="_blank" style="color:#2563eb;font-size:0.8em;text-decoration:none;margin-right:8px">@\${card.twitter_handle}</a>\` : ''}
           <span class="badge \${mbtiClass(card.mbti)}" title="\${card.mbti_reason || ''}">\${card.mbti || '?'}</span>
@@ -360,34 +430,45 @@ function openPanel(index) {
       </div>
     </div>
 
-    \${card.latest_news ? \`<div class="news-chip" style="margin-bottom:12px">📰 \${card.latest_news}</div>\` : ''}
+    <div class="tabs">
+      <div class="tab active" onclick="switchTab('recent',this)">Latest</div>
+      <div class="tab" onclick="switchTab('facts',this)">Facts & Approach</div>
+    </div>
+
+    <!-- RECENT TAB -->
+    <div class="tab-content active" id="tab-recent">
+      \${card.latest_news ? \`<div class="news-chip" style="margin-bottom:12px">📰 \${card.latest_news}</div>\` : ''}
+
+      \${tweets.length ? \`<h2>Latest Tweets</h2>\${tweets.slice(0,5).map(t => \`<div class="tweet">\${t.text}\${t.date ? \`<div class="tweet-date">\${t.date}\${t.link ? \` · <a href="\${t.link}" target="_blank" style="color:#2563eb">link</a>\` : ''}</div>\` : ''}</div>\`).join('')}\` : ''}
+
+      \${activityItems.length ? \`<h2>Recent Moves</h2>\${activityItems.slice(0,8).map(a => \`<div class="activity-item">\${a.date ? \`<span class="activity-date">\${a.date}</span> · \` : ''}\${a.text.trim()}</div>\`).join('')}\` : ''}
 
-    <h2>Focus & Goals</h2>
-    \${card.current_focus ? \`<p>🎯 \${card.current_focus}</p>\` : ''}
-    \${card.wants ? \`<p>💎 \${card.wants}</p>\` : ''}
+      \${card.key_quotes?.length ? \`<h2>In Their Words</h2>\${card.key_quotes.map(q => \`<blockquote>"\${q}"</blockquote>\`).join('')}\` : ''}
 
-    \${card.philosophy?.length ? \`<h2>Philosophy</h2>\${card.philosophy.map(p => \`<blockquote>"\${p}"</blockquote>\`).join('')}\` : ''}
+      \${card.annotations?.length ? \`<h2>Your Notes</h2>\${card.annotations.map(a => \`<p style="font-size:0.8em;color:#64748b">📝 \${a}</p>\`).join('')}\` : ''}
+    </div>
 
-    \${card.talking_points?.length ? \`<h2>Talking Points</h2><ul>\${card.talking_points.map(t => \`<li>\${t}</li>\`).join('')}</ul>\` : ''}
+    <!-- FACTS TAB -->
+    <div class="tab-content" id="tab-facts">
+      <h2>Focus & Goals</h2>
+      \${card.current_focus ? \`<p>🎯 \${card.current_focus}</p>\` : ''}
+      \${card.wants ? \`<p>💎 \${card.wants}</p>\` : ''}
 
-    <h2>Approach</h2>
-    \${card.last_connection ? \`<p>🤝 <strong>Last:</strong> \${card.last_connection}</p>\` : '<p style="color:#94a3b8">No interactions yet</p>'}
-    \${card.dos?.length || card.donts?.length ? \`<div class="do-dont">\${card.dos?.length ? \`<div class="do-box"><strong>✅ Do</strong><br>\${card.dos.join('<br>')}</div>\` : ''}\${card.donts?.length ? \`<div class="dont-box"><strong>❌ Don't</strong><br>\${card.donts.join('<br>')}</div>\` : ''}</div>\` : ''}
-    \${card.gifts?.length ? \`<p style="font-size:0.85em">🎁 \${card.gifts.join(', ')}</p>\` : ''}
+      \${card.philosophy?.length ? \`<h2>Philosophy</h2>\${card.philosophy.map(p => \`<blockquote>"\${p}"</blockquote>\`).join('')}\` : ''}
 
-    \${card.allies?.length || card.rivals?.length ? \`<h2>Relationships</h2>
-      \${card.allies?.length ? \`<div style="margin-bottom:8px">\${card.allies.map(a => \`<p style="font-size:0.85em;color:#166534">👍 <strong>\${a.name || a}</strong>\${a.reason ? \` — \${a.reason}\` : ''}</p>\`).join('')}</div>\` : ''}
-      \${card.rivals?.length ? \`<div>\${card.rivals.map(r => \`<p style="font-size:0.85em;color:#991b1b">👎 <strong>\${r.name || r}</strong>\${r.reason ? \` — \${r.reason}\` : ''}</p>\`).join('')}</div>\` : ''}
-    \` : ''}
+      \${card.talking_points?.length ? \`<h2>Talking Points</h2><ul>\${card.talking_points.map(t => \`<li>\${t}</li>\`).join('')}</ul>\` : ''}
 
-    \${card.key_quotes?.length ? \`<h2>Quotes</h2>\${card.key_quotes.slice(0,4).map(q => \`<p style="font-size:0.8em;color:#475569;margin:3px 0">"\${q}"</p>\`).join('')}\` : ''}
+      <h2>Approach</h2>
+      \${card.last_connection ? \`<p>🤝 <strong>Last:</strong> \${card.last_connection}</p>\` : '<p style="color:#94a3b8">No interactions yet</p>'}
+      \${card.dos?.length || card.donts?.length ? \`<div class="do-dont">\${card.dos?.length ? \`<div class="do-box"><strong>✅ Do</strong><br>\${card.dos.join('<br>')}</div>\` : ''}\${card.donts?.length ? \`<div class="dont-box"><strong>❌ Don't</strong><br>\${card.donts.join('<br>')}</div>\` : ''}</div>\` : ''}
+      \${card.gifts?.length ? \`<p style="font-size:0.85em">🎁 \${card.gifts.join(', ')}</p>\` : ''}
 
-    <h2>Personality</h2>
-    <p style="font-size:0.85em"><strong>MBTI:</strong> \${card.mbti || '?'}\${card.mbti_reason ? \` — \${card.mbti_reason}\` : ''}</p>
-    \${card.superpower ? \`<p style="font-size:0.85em">⚡ \${card.superpower}</p>\` : ''}
-    <div style="display:flex;justify-content:center;margin:12px 0">\${radarSvg(s, 220)}</div>
+      \${card.allies?.length || card.rivals?.length ? \`<h2>Relationships</h2>
+        \${card.allies?.length ? \`<div style="margin-bottom:8px">\${card.allies.map(a => \`<p style="font-size:0.85em;color:#166534">👍 <strong>\${a.name || a}</strong>\${a.reason ? \` — \${a.reason}\` : ''}</p>\`).join('')}</div>\` : ''}
+        \${card.rivals?.length ? \`<div>\${card.rivals.map(r => \`<p style="font-size:0.85em;color:#991b1b">👎 <strong>\${r.name || r}</strong>\${r.reason ? \` — \${r.reason}\` : ''}</p>\`).join('')}</div>\` : ''}
+      \` : ''}
 
-    \${card.annotations?.length ? \`<h2>Your Notes</h2>\${card.annotations.map(a => \`<p style="font-size:0.8em;color:#64748b">📝 \${a}</p>\`).join('')}\` : ''}
+    </div>
 
     <div style="display:flex;gap:8px;margin-top:20px">
       \${card.slug ? \`<a href="\${card.slug}.html" style="flex:1;text-align:center;color:#2563eb;text-decoration:none;padding:8px;border:1px solid #2563eb;border-radius:6px;font-size:0.85em">Full Profile</a>\` : ''}
@@ -399,6 +480,13 @@ function openPanel(index) {
   document.getElementById('main').classList.add('panel-open');
 }
 
+function switchTab(tabId, el) {
+  document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+  document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
+  el.classList.add('active');
+  document.getElementById('tab-' + tabId).classList.add('active');
+}
+
 function closePanel() {
   document.getElementById('panel').classList.remove('open');
   document.getElementById('main').classList.remove('panel-open');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vipcare",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "description": "Auto-build VIP person profiles from Twitter/LinkedIn public data",
   "type": "module",
   "bin": {