six-degrees 0.4.0-beta.1 → 0.4.1

package/.next/standalone/app/components/GridView.js

@@ -1,5 +1,7 @@
 'use client';
 
+import { localPhoto } from '../../lib/photos';
+
 const TIER_COLORS = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
 const TIERS = ['S', 'A', 'B', 'C', 'D'];
 
@@ -38,8 +40,8 @@ export default function GridView({ connections, degree2 = [], onSelect, mode })
               onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.03)'}
             >
               <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
-                {cl.bridge.profile_image_url ? (
-                  <img src={cl.bridge.profile_image_url} alt="" style={{
+                {localPhoto(cl.bridge.profile_image_url) ? (
+                  <img src={localPhoto(cl.bridge.profile_image_url)} alt="" style={{
                     width: 40, height: 40, borderRadius: '50%', objectFit: 'cover',
                     border: `2px solid ${TIER_COLORS[cl.bridge.tier]}`,
                   }} onError={e => { e.target.style.display = 'none'; }} />
@@ -67,13 +69,13 @@ export default function GridView({ connections, degree2 = [], onSelect, mode })
                 {cl.members.slice(0, 8).map((m, i) => (
                   <div key={m.id} style={{
                     width: 22, height: 22, borderRadius: '50%', fontSize: 8, fontWeight: 700,
-                    background: m.profile_image_url ? 'transparent' : (TIER_COLORS[m.tier] || '#333'),
+                    background: localPhoto(m.profile_image_url) ? 'transparent' : (TIER_COLORS[m.tier] || '#333'),
                     color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                     border: '2px solid #0a0a1a', marginLeft: i > 0 ? -6 : 0, position: 'relative', zIndex: 8 - i,
                     overflow: 'hidden',
                   }}>
-                    {m.profile_image_url ? (
-                      <img src={m.profile_image_url} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                    {localPhoto(m.profile_image_url) ? (
+                      <img src={localPhoto(m.profile_image_url)} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                     ) : m.name?.charAt(0)}
                   </div>
                 ))}
@@ -131,8 +133,8 @@ export default function GridView({ connections, degree2 = [], onSelect, mode })
                     onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.03)'}
                   >
                     <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                      {c.profile_image_url ? (
-                        <img src={c.profile_image_url} alt="" style={{
+                      {localPhoto(c.profile_image_url) ? (
+                        <img src={localPhoto(c.profile_image_url)} alt="" style={{
                           width: 32, height: 32, borderRadius: '50%', objectFit: 'cover',
                           border: `2px solid ${TIER_COLORS[tier]}`,
                         }} onError={e => { e.target.style.display = 'none'; }} />

package/.next/standalone/app/components/LinkedInLimits.js

@@ -1,16 +1,19 @@
 'use client';
 
-// The Scan page's view of what LinkedIn allows: the search budget, the cooldown
-// lock, and everyone whose list was only partly read, with a way back into each.
-// TRAPS §35. The numbers come from /api/scraper (lib/linkedin-limits.js,
-// lib/paused.js), which reads the same files the scanner writes.
+// The Scan page's view of what LinkedIn allows: the search budget and the cap
+// on profile views, the cooldown lock, and everyone whose list was only partly
+// read, with a way back into each. TRAPS §16, §35. The numbers come from
+// /api/scraper (lib/linkedin-limits.js, lib/paused.js), which reads the same
+// files the scanner writes.
 
 import { useState } from 'react';
+import { limitQuestion, limitNote, SAFE_LIMITS } from '../../lib/search-risk';
 
 const LINE = '1px solid rgba(255,255,255,0.1)';
 const TIER = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
 const DAILY = [25, 50, 100, 200, 500];
 const MONTHLY = [100, 250, 500, 1000, 0];
+const PROFILES = [10, 25, 50, 100];
 
 const when = (ms) => new Date(ms).toLocaleString(undefined, { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
 const day = (ms) => new Date(ms).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
@@ -55,6 +58,15 @@ export function BudgetBox({ li, onSetLimits, disabled }) {
   if (!li) return null;
   const { limits } = li;
   const today = li.unreadable ? '?' : li.searchesToday;
+  const views = li.unreadable ? '?' : li.profilesToday;
+  const set = (change) => onSetLimits({ ...limits, ...change });
+  // A budget past what LinkedIn has put up with is asked about first (lib/search-risk.js).
+  const ask = (change) => {
+    const q = limitQuestion(limits, { ...limits, ...change });
+    if (q && !window.confirm(q)) return;
+    set(change);
+  };
+  const note = limitNote(limits);
   return (
     <div style={{ padding: '12px 14px', borderRadius: 8, border: LINE, background: 'rgba(255,255,255,0.03)', fontSize: 12.5, color: '#b8c4c4' }}>
       <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))', gap: 14 }}>
@@ -66,22 +78,42 @@ export function BudgetBox({ li, onSetLimits, disabled }) {
           <div><b style={{ color: '#fff' }}>{li.searchesMonth}</b> of {limits.monthly || 'no limit'} this month · resets {day(li.monthResets)}</div>
           <Bar used={li.searchesMonth} cap={limits.monthly} />
         </div>
+        <div>
+          <div><b style={{ color: '#fff' }}>{views}</b> of {limits.profiles} profile views today</div>
+          <Bar used={li.unreadable ? limits.profiles : li.profilesToday} cap={limits.profiles} />
+        </div>
       </div>
       <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap', marginTop: 10 }}>
         <span>Budget:</span>
-        <select value={limits.daily} disabled={disabled} onChange={(e) => onSetLimits({ daily: Number(e.target.value), monthly: limits.monthly })} style={sel}>
+        <select value={limits.daily} disabled={disabled} onChange={(e) => ask({ daily: Number(e.target.value) })} style={sel}>
           {DAILY.map((n) => <option key={n} value={n}>{n} a day</option>)}
         </select>
-        <select value={limits.monthly} disabled={disabled} onChange={(e) => onSetLimits({ daily: limits.daily, monthly: Number(e.target.value) })} style={sel}>
+        <select value={limits.monthly} disabled={disabled} onChange={(e) => ask({ monthly: Number(e.target.value) })} style={sel}>
           {MONTHLY.map((n) => <option key={n} value={n}>{n ? `${n} a month` : 'no monthly cap (Premium)'}</option>)}
         </select>
-        <span style={{ color: '#778' }}>{li.profilesToday} profile views today</span>
+        <select value={limits.profiles} disabled={disabled} onChange={(e) => set({ profiles: Number(e.target.value) })} style={sel}>
+          {PROFILES.map((n) => <option key={n} value={n}>{n} profile views a day</option>)}
+        </select>
       </div>
       <div style={{ marginTop: 8, color: '#778', lineHeight: 1.6 }}>
         Every page of someone&rsquo;s connections is one search. LinkedIn limits a free account&rsquo;s people
         searches by the month (it doesn&rsquo;t say how many; reports put it around 250–350), resetting on the 1st.
         When a budget is used, a scan saves what it read and stops; the next one carries on from the same page.
-        {limits.daily > 100 && <b style={{ color: '#FFD700' }}> {limits.daily} a day can use up a free account&rsquo;s month in a day or two.</b>}
+      </div>
+      {note && (
+        <div style={{ marginTop: 8, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', color: '#FFD700', lineHeight: 1.6 }}>
+          <b style={{ flex: 1, minWidth: 200 }}>{note}</b>
+          <button
+            onClick={() => set(SAFE_LIMITS)}
+            disabled={disabled}
+            style={{ ...sel, cursor: disabled ? 'not-allowed' : 'pointer', color: '#FFD700', borderColor: 'rgba(255,215,0,0.4)' }}
+          >Back to {SAFE_LIMITS.daily} a day, {SAFE_LIMITS.monthly} a month</button>
+        </div>
+      )}
+      <div style={{ marginTop: 6, color: '#778', lineHeight: 1.6 }}>
+        Each circle scan opens the person&rsquo;s profile once, which is one profile view. Profile views are what
+        LinkedIn restricted an account for, after about 20 in an hour. The scanner opens at most one a minute, and
+        once today&rsquo;s are used, a scan stops before the next profile and tries that person next time.
       </div>
     </div>
   );

package/.next/standalone/app/components/ListView.js

@@ -1,5 +1,7 @@
 'use client';
 
+import { localPhoto } from '../../lib/photos';
+
 const TIER_COLORS = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
 
 export default function ListView({ connections, degree2 = [], onSelect, mode }) {
@@ -47,8 +49,8 @@ export default function ListView({ connections, degree2 = [], onSelect, mode })
             >
               <span style={{ fontSize: 12, fontWeight: 700, color: '#444' }}>{i + 1}</span>
               <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
-                {cl.bridge.profile_image_url ? (
-                  <img src={cl.bridge.profile_image_url} alt="" style={{
+                {localPhoto(cl.bridge.profile_image_url) ? (
+                  <img src={localPhoto(cl.bridge.profile_image_url)} alt="" style={{
                     width: 28, height: 28, borderRadius: '50%', objectFit: 'cover', flexShrink: 0,
                     border: `2px solid ${TIER_COLORS[cl.bridge.tier]}`,
                   }} onError={e => { e.target.style.display = 'none'; }} />
@@ -113,8 +115,8 @@ export default function ListView({ connections, degree2 = [], onSelect, mode })
             onMouseLeave={e => e.currentTarget.style.background = i < 3 ? `${TIER_COLORS[c.tier]}08` : 'transparent'}
           >
             <span style={{ fontSize: 12, fontWeight: 700, color: i < 3 ? TIER_COLORS[c.tier] : '#444' }}>{i + 1}</span>
-            {c.profile_image_url ? (
-              <img src={c.profile_image_url} alt="" style={{
+            {localPhoto(c.profile_image_url) ? (
+              <img src={localPhoto(c.profile_image_url)} alt="" style={{
                 width: 28, height: 28, borderRadius: '50%', objectFit: 'cover',
                 border: `2px solid ${TIER_COLORS[c.tier]}`,
               }} onError={e => { e.target.style.display = 'none'; }} />

package/.next/standalone/app/components/MappingProgress.js

@@ -1,6 +1,7 @@
 'use client';
 
 import { TIER_COLORS_CLASSIC as TIER_COLORS } from '../../lib/tiers';
+import { reachIndex, circleState } from '../../lib/reach';
 
 // How much of your 1st degree has had its circle opened.
 //
@@ -19,13 +20,11 @@ const CARD = {
 };
 
 export function computeMapping(degree1 = [], degree2 = [], skips = []) {
-  const mappedIds = new Set(degree2.map((c) => c.source_connection_id).filter(Boolean));
-  const hiddenUrls = new Set(skips.map((s) => s.profileUrl).filter(Boolean));
-
+  // One rule for whose circle is open, hidden or still to do: lib/reach.js.
+  const reach = reachIndex(degree1, degree2, { skips });
   const state = (c) => {
-    if (mappedIds.has(c.id)) return 'mapped';
-    if (c.profile_url && hiddenUrls.has(c.profile_url)) return 'hidden';
-    return 'todo';
+    const s = circleState(c, reach);
+    return s === 'scanned' ? 'mapped' : s;
   };
 
   const counts = { mapped: 0, hidden: 0, todo: 0 };

package/.next/standalone/app/components/OnboardingGate.js

@@ -24,7 +24,7 @@ export default function OnboardingGate({ children }) {
       ) : (
         <div style={{ maxWidth: 420 }}>
           <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 8 }}>
-            Can’t reach 6 Degrees’ local server
+            Can’t reach Six Degrees’ local server
           </div>
           <div style={{ color: '#888', fontSize: 14, lineHeight: 1.6 }}>
             The page loaded but the app behind it is not answering. If you started it

package/.next/standalone/app/components/OrbitGraph.js

@@ -32,6 +32,7 @@ import {
   zoomTransform,
 } from 'd3';
 import { TIER_COLORS, TIER_ORDER, TIER_RING_RADIUS, initialsFor } from '../../lib/tiers';
+import { localPhoto } from '../../lib/photos';
 
 const GOLDEN_ANGLE = 2.399963;
 const LABEL_ZOOM_THRESHOLD = 1.1;
@@ -374,7 +375,8 @@ const OrbitGraph = forwardRef(function OrbitGraph(
         .attr('font-size', d.r * 0.8).attr('font-weight', 700)
         .attr('fill', '#0b0b16').style('pointer-events', 'none');
 
-      const imageUrl = isUser ? userImage : (conn?.profile_image_url ?? null);
+      // Only a photo saved on this computer (lib/photos.js).
+      const imageUrl = localPhoto(isUser ? userImage : conn?.profile_image_url);
       if (imageUrl) {
         const clipId = `og-clip-${safeId(d.id)}`;
         defs.append('clipPath').attr('id', clipId).append('circle').attr('r', d.r);

package/.next/standalone/app/components/OutlinkQuest.js

@@ -11,6 +11,7 @@ import { useMemo, useState } from 'react';
 import Link from 'next/link';
 import { buildQuest, XP_SEND, STAGE_SIZE } from '../../lib/quest';
 import { initialsFor } from '../../lib/tiers';
+import { localPhoto } from '../../lib/photos';
 
 const TIER = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
 const LINE = '1px solid rgba(255,255,255,0.1)';
@@ -24,8 +25,8 @@ function Face({ person, size = 36, ring }) {
         display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: size * 0.34, fontWeight: 800,
         border: `2px solid ${ring || color}`,
       }}>{initialsFor(person?.name || '?')}</div>
-      {person?.profile_image_url && (
-        <img src={person.profile_image_url} alt="" onError={(e) => { e.currentTarget.style.display = 'none'; }}
+      {localPhoto(person?.profile_image_url) && (
+        <img src={localPhoto(person.profile_image_url)} alt="" onError={(e) => { e.currentTarget.style.display = 'none'; }}
           style={{ position: 'absolute', inset: 0, width: size, height: size, borderRadius: '50%', objectFit: 'cover', border: `2px solid ${ring || color}` }} />
       )}
     </div>
@@ -47,8 +48,8 @@ function Ring({ progress, size = 86, color = '#FF6B35', children }) {
   );
 }
 
-export default function OutlinkQuest({ recs, sentIds, added, mappedIds, onSend, onUndo }) {
-  const quest = useMemo(() => buildQuest({ recs, sentIds, added, mappedIds }), [recs, sentIds, added, mappedIds]);
+export default function OutlinkQuest({ recs, sentIds, added, mappedIds, reach, onSend, onUndo }) {
+  const quest = useMemo(() => buildQuest({ recs, sentIds, added, mappedIds, reach }), [recs, sentIds, added, mappedIds, reach]);
   const [open, setOpen] = useState(null);         // bridge id of the expanded cluster
   const [toast, setToast] = useState(null);
   const { level } = quest;

package/.next/standalone/app/components/RingsView.js

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import { localPhoto } from '../../lib/photos';
 
 const TIER_COLORS = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
 const TIERS = ['S', 'A', 'B', 'C', 'D'];
@@ -58,8 +59,8 @@ export default function RingsView({ connections, degree2 = [], onSelect, mode })
                       boxShadow: hoveredId === cl.bridge.id ? `0 0 20px ${TIER_COLORS[cl.bridge.tier]}60` : `0 0 10px ${TIER_COLORS[cl.bridge.tier]}20`,
                       transition: 'box-shadow 0.2s',
                     }}>
-                      {cl.bridge.profile_image_url ? (
-                        <img src={cl.bridge.profile_image_url} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                      {localPhoto(cl.bridge.profile_image_url) ? (
+                        <img src={localPhoto(cl.bridge.profile_image_url)} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                       ) : (
                         <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center',
                           background: TIER_COLORS[cl.bridge.tier], color: cl.bridge.tier === 'S' ? '#000' : '#fff', fontSize: 20, fontWeight: 800 }}>
@@ -95,13 +96,13 @@ export default function RingsView({ connections, degree2 = [], onSelect, mode })
                               <div style={{
                                 width: size, height: size, borderRadius: '50%',
                                 border: `2px solid ${TIER_COLORS[tier]}`,
-                                overflow: 'hidden', background: p.profile_image_url ? '#111' : TIER_COLORS[tier],
+                                overflow: 'hidden', background: localPhoto(p.profile_image_url) ? '#111' : TIER_COLORS[tier],
                                 transition: 'transform 0.15s, box-shadow 0.15s',
                                 transform: isHov ? 'scale(1.3)' : 'scale(1)',
                                 boxShadow: isHov ? `0 0 12px ${TIER_COLORS[tier]}60` : 'none',
                               }}>
-                                {p.profile_image_url ? (
-                                  <img src={p.profile_image_url} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                                {localPhoto(p.profile_image_url) ? (
+                                  <img src={localPhoto(p.profile_image_url)} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                                     onError={e => { e.target.style.display = 'none'; e.target.parentElement.style.background = TIER_COLORS[tier]; }} />
                                 ) : (
                                   <span style={{ display: 'flex', width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center',
@@ -202,7 +203,7 @@ export default function RingsView({ connections, degree2 = [], onSelect, mode })
                         width: size, height: size, borderRadius: '50%',
                         border: `2px solid ${TIER_COLORS[tier]}`,
                         overflow: 'hidden',
-                        background: c.profile_image_url ? '#111' : TIER_COLORS[tier],
+                        background: localPhoto(c.profile_image_url) ? '#111' : TIER_COLORS[tier],
                         display: 'flex', alignItems: 'center', justifyContent: 'center',
                         transition: 'transform 0.15s, box-shadow 0.15s',
                         transform: isHovered ? 'scale(1.3)' : 'scale(1)',
@@ -210,8 +211,8 @@ export default function RingsView({ connections, degree2 = [], onSelect, mode })
                         zIndex: isHovered ? 10 : 1,
                         position: 'relative',
                       }}>
-                        {c.profile_image_url ? (
-                          <img src={c.profile_image_url} alt="" style={{
+                        {localPhoto(c.profile_image_url) ? (
+                          <img src={localPhoto(c.profile_image_url)} alt="" style={{
                             width: '100%', height: '100%', objectFit: 'cover',
                           }} onError={e => {
                             e.target.style.display = 'none';