six-degrees 0.2.0

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

@@ -0,0 +1,144 @@
+'use client';
+
+// Paths → Scores: every company in your network, the score it carries into
+// people's power, where that score comes from, and a control to set your own.
+// Setting a score rescores everyone (app/api/company-scores → lib/scoring.js).
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+const LINE = '1px solid rgba(255,255,255,0.1)';
+const SOURCE = {
+  yours: { label: 'your score', color: '#00ff88' },
+  known: { label: 'known list', color: '#3498DB' },
+  network: { label: 'estimated: many of your people', color: '#FF6B35' },
+  default: { label: 'unknown company', color: '#778' },
+};
+
+async function fetchScores() {
+  const r = await fetch('/api/company-scores');
+  const j = await r.json();
+  if (!r.ok) throw new Error(j.error || 'Could not load company scores');
+  return j.companies;
+}
+
+export function useCompanyScores() {
+  const [companies, setCompanies] = useState(null);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    let off = false;
+    fetchScores().then((c) => { if (!off) setCompanies(c); }).catch((e) => { if (!off) setError(e.message); });
+    return () => { off = true; };
+  }, []);
+  const setScore = useCallback(async (name, score) => {
+    const r = await fetch('/api/company-scores', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name, score }) });
+    const j = await r.json();
+    if (!r.ok) throw new Error(j.error || 'Could not save');
+    setCompanies(await fetchScores());
+    return j;
+  }, []);
+  return { companies, error, setScore };
+}
+
+/** A 1–10 picker; "auto" hands the score back to the list or the estimate. */
+export function ScorePicker({ company, onSet, compact }) {
+  const [busy, setBusy] = useState(false);
+  const pick = async (v) => {
+    setBusy(true);
+    try { await onSet(company.name, v === 'auto' ? null : Number(v)); } finally { setBusy(false); }
+  };
+  return (
+    <select disabled={busy} value={company.source === 'yours' ? String(company.score) : 'auto'} onChange={(e) => pick(e.target.value)}
+      title="Set this company's score. Auto uses the known list or an estimate."
+      style={{ padding: compact ? '2px 4px' : '4px 6px', borderRadius: 6, border: LINE, background: '#11131c', color: '#dfe6e9', fontSize: 12 }}>
+      <option value="auto">Auto ({company.source === 'yours' ? (company.suggested ?? 'est.') : company.score})</option>
+      {[10, 9, 8, 7, 6, 5, 4, 3, 2, 1].map((n) => <option key={n} value={n}>{n}</option>)}
+    </select>
+  );
+}
+
+export default function CompanyScores({ onRescored }) {
+  const { companies, error, setScore } = useCompanyScores();
+  const [query, setQuery] = useState('');
+  const [only, setOnly] = useState('all');
+  const [limit, setLimit] = useState(150);
+  const [toast, setToast] = useState(null);
+
+  const set = async (name, score) => {
+    const r = await setScore(name, score);
+    setToast(`${name}: ${score == null ? 'back to auto' : `set to ${score}`} · rescored ${r.scored} people`);
+    setTimeout(() => setToast(null), 3500);
+    onRescored?.();
+  };
+
+  const shown = useMemo(() => {
+    if (!companies) return [];
+    const q = query.trim().toLowerCase();
+    return companies.filter((c) => (!q || c.name.toLowerCase().includes(q)) && (only === 'all' || c.source === only));
+  }, [companies, query, only]);
+
+  if (error) return <div style={{ padding: 24, color: '#e74c3c' }}>{error}</div>;
+  if (!companies) return <div style={{ padding: 24, color: '#778' }}>Loading companies…</div>;
+
+  const count = (src) => companies.filter((c) => c.source === src).length;
+
+  return (
+    <div style={{ flex: 1, overflow: 'auto', padding: 16 }}>
+      <div style={{ maxWidth: 980, margin: '0 auto' }}>
+        <div style={{ padding: 14, borderRadius: 10, border: LINE, background: 'rgba(255,255,255,0.03)', fontSize: 12.5, color: '#cfd8d8', lineHeight: 1.6 }}>
+          <b style={{ color: '#fff' }}>How a power score works.</b> power = <b>title</b> × <b>company weight</b> + bonus.
+          The title (student 1 … founder or C-suite 10) comes from someone&rsquo;s current role, with former roles at 70%.
+          The company weight runs from 0.56 (no company found) to 1.0 (a company scored 10), so seniority counts for more at a bigger company.
+          The bonus is at most +1.5, for investor, YC or an audience in the millions, and counts half at an unknown company.
+          A 1st-degree person whose circle is unusually strong gets up to +1 more.
+          S ≥ 7.5 · A ≥ 5.5 · B ≥ 4 · C ≥ 2.5.
+          <div style={{ marginTop: 6, color: '#8b9a9a' }}>
+            So a VP at a 10 scores 9.0, a founder at an unknown company 6.7, a director at an unknown company 5.0, and an intern at a 10 scores 2.0.
+            Set a company&rsquo;s score below and everyone there is rescored.
+          </div>
+        </div>
+
+        <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap', margin: '14px 0 10px' }}>
+          <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Find a company"
+            style={{ padding: '6px 10px', borderRadius: 7, border: LINE, background: 'rgba(255,255,255,0.05)', color: '#fff', fontSize: 13, minWidth: 180 }} />
+          {[['all', `All ${companies.length}`], ['known', `Known list ${count('known')}`], ['yours', `Yours ${count('yours')}`], ['network', `Estimated ${count('network')}`], ['default', `Unknown ${count('default')}`]].map(([k, l]) => (
+            <button key={k} onClick={() => setOnly(k)} style={{
+              padding: '5px 10px', borderRadius: 7, border: LINE, cursor: 'pointer', fontSize: 11.5, fontWeight: 600,
+              background: only === k ? 'rgba(52,152,219,0.25)' : 'transparent', color: only === k ? '#cfe6f7' : '#8b9a9a',
+            }}>{l}</button>
+          ))}
+        </div>
+
+        <div style={{ borderRadius: 10, border: LINE, overflow: 'hidden' }}>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 70px 70px 70px 60px 180px 110px', gap: 8, padding: '8px 12px', fontSize: 10.5, letterSpacing: 0.6, color: '#8b9a9a', background: 'rgba(255,255,255,0.04)' }}>
+            <span>COMPANY</span><span style={{ textAlign: 'right' }}>PEOPLE</span><span style={{ textAlign: 'right' }}>YOU KNOW</span><span style={{ textAlign: 'right' }}>DIRECTOR+</span>
+            <span style={{ textAlign: 'right' }}>SCORE</span><span>SOURCE</span><span>SET</span>
+          </div>
+          {shown.slice(0, limit).map((c) => (
+            <div key={c.name} style={{ display: 'grid', gridTemplateColumns: '1fr 70px 70px 70px 60px 180px 110px', gap: 8, padding: '7px 12px', alignItems: 'center', borderTop: '1px solid rgba(255,255,255,0.05)', fontSize: 12.5 }}>
+              <span style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
+                <span title={`${c.industry.label} (inferred)`} style={{ width: 8, height: 8, borderRadius: '50%', background: c.industry.color, flexShrink: 0 }} />
+                <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.name}</span>
+              </span>
+              <span style={{ textAlign: 'right' }}>{c.people}</span>
+              <span style={{ textAlign: 'right', color: c.d1 ? '#00ff88' : '#556' }}>{c.d1}</span>
+              <span style={{ textAlign: 'right', color: c.senior ? '#FFD700' : '#556' }}>{c.senior}</span>
+              <b style={{ textAlign: 'right', fontSize: 15 }}>{c.score}</b>
+              <span style={{ fontSize: 11, color: SOURCE[c.source]?.color }}>{SOURCE[c.source]?.label}</span>
+              <ScorePicker company={c} onSet={set} compact />
+            </div>
+          ))}
+        </div>
+        {shown.length > limit && (
+          <button onClick={() => setLimit((n) => n + 300)} style={{ marginTop: 10, padding: '7px 14px', borderRadius: 8, border: LINE, background: 'rgba(255,255,255,0.05)', color: '#dfe6e9', cursor: 'pointer', fontSize: 12 }}>
+            Show more ({shown.length - limit} left)
+          </button>
+        )}
+      </div>
+      {toast && (
+        <div role="status" style={{ position: 'fixed', bottom: 24, left: '50%', transform: 'translateX(-50%)', padding: '10px 18px', borderRadius: 24, background: 'linear-gradient(135deg, #00ff88, #3498DB)', color: '#000', fontWeight: 800, fontSize: 13, zIndex: 50 }}>
+          {toast}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,110 @@
+'use client';
+
+import { useState } from 'react';
+import { loadSampleIntoSession } from '../../lib/demo';
+
+// The first thing a new install shows: there is no network yet, so pick a way in.
+//
+// It is also what anyone sees whose database is empty, which is why it asks
+// nothing about them. Scanning is first because it is the only way to the
+// 2nd-degree views; the CSV is the route that touches LinkedIn least; the sample
+// is for looking around before deciding either.
+export default function EmptyState() {
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+
+  async function loadSample() {
+    setBusy(true);
+    setError('');
+    try {
+      await loadSampleIntoSession();
+      window.location.reload();
+    } catch (err) {
+      setError(err.message || 'Could not load the sample network.');
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div style={{
+      position: 'absolute', inset: 0, display: 'flex', alignItems: 'center',
+      justifyContent: 'center', padding: 24, overflowY: 'auto',
+    }}>
+      <div style={{ maxWidth: 520, width: '100%', textAlign: 'center' }}>
+        <div style={{
+          width: 68, height: 68, borderRadius: '50%', margin: '0 auto 22px',
+          border: '2px solid rgba(255,215,0,0.35)', display: 'flex',
+          alignItems: 'center', justifyContent: 'center', fontSize: 26,
+        }}>✦</div>
+
+        <h2 style={{
+          fontSize: 28, fontWeight: 800, margin: '0 0 10px',
+          background: 'linear-gradient(135deg, #FFD700, #9B59B6, #3498DB)',
+          WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
+        }}>
+          Welcome to 6 Degrees
+        </h2>
+        <p style={{ color: 'rgba(255,255,255,0.5)', fontSize: 14.5, lineHeight: 1.7, margin: '0 0 28px' }}>
+          Your network, drawn as a galaxy. Everything stays on this computer.
+          Pick how to bring it in — you can switch later.
+        </p>
+
+        <Choice
+          href="/setup"
+          primary
+          badge="Recommended"
+          title="Scan my LinkedIn"
+          body="A few guided steps: set up the scanner, sign into LinkedIn yourself, and watch your galaxy fill in. The only way to see who your connections know."
+        />
+
+        <Choice
+          href="/import"
+          title="Import my LinkedIn CSV"
+          body="LinkedIn’s official export, read in your browser. Takes about ten minutes to arrive by email. Shows the people you know, not who they know."
+        />
+
+        <Choice
+          onClick={loadSample}
+          disabled={busy}
+          title={busy ? 'Loading…' : 'Explore a sample network'}
+          body="150 invented connections and the 598 people they know. Every view except Outlink and Scan, which need your own scan. Nothing about you is used."
+        />
+
+        {error && (
+          <div style={{ color: '#ff6b6b', fontSize: 13, marginTop: 18 }}>{error}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Choice({ href, onClick, disabled, primary, badge, title, body }) {
+  const style = {
+    display: 'block', width: '100%', boxSizing: 'border-box', textAlign: 'left',
+    padding: '16px 18px', borderRadius: 12, marginBottom: 12, textDecoration: 'none',
+    cursor: disabled ? 'default' : 'pointer', font: 'inherit',
+    border: primary ? '1px solid rgba(255,215,0,0.45)' : '1px solid rgba(255,255,255,0.12)',
+    background: primary
+      ? 'linear-gradient(135deg, rgba(255,215,0,0.12), rgba(155,89,182,0.14))'
+      : 'rgba(255,255,255,0.03)',
+    color: '#fff',
+  };
+  const inner = (
+    <>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 5 }}>
+        <span style={{ fontSize: 15.5, fontWeight: 750 }}>{title}</span>
+        {badge && (
+          <span style={{
+            fontSize: 10.5, fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase',
+            padding: '3px 8px', borderRadius: 20, background: '#FFD700', color: '#0a0a1a',
+          }}>{badge}</span>
+        )}
+        <span style={{ marginLeft: 'auto', color: 'rgba(255,255,255,0.4)' }}>→</span>
+      </div>
+      <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.5)', lineHeight: 1.6 }}>{body}</div>
+    </>
+  );
+  return href
+    ? <a href={href} style={style}>{inner}</a>
+    : <button onClick={onClick} disabled={disabled} style={style}>{inner}</button>;
+}

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

@@ -0,0 +1,184 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { viewsForMode } from './views';
+
+function useIsMobile() {
+  const [m, setM] = useState(false);
+  useEffect(() => { const c = () => setM(window.innerWidth < 768); c(); window.addEventListener('resize', c); return () => window.removeEventListener('resize', c); }, []);
+  return m;
+}
+
+const TIER_COLORS = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
+
+
+export default function FilterPanel({ collapsed, onToggle, mode, filter, onFilterChange, visualMode, onVisualModeChange, tierCounts, bridgeTierCounts }) {
+  const isMobile = useIsMobile();
+  const isDegreesMode = mode === 'degrees';
+  // Same source of truth the renderer uses, so the menu can never offer a
+  // view that does not exist or miss one that does.
+  const modes = viewsForMode(isDegreesMode ? 'degrees' : 'network');
+  const counts = isDegreesMode ? (bridgeTierCounts || {}) : (tierCounts || {});
+  const allCount = isDegreesMode
+    ? Object.values(bridgeTierCounts || {}).reduce((s, v) => s + v, 0)
+    : Object.values(tierCounts || {}).reduce((s, v) => s + v, 0);
+
+  if (collapsed) {
+    return (
+      <div
+        onClick={onToggle}
+        style={{
+          position: 'fixed', left: 16, top: 140, zIndex: 30, cursor: 'pointer',
+          display: 'flex', alignItems: 'center', gap: 0,
+          height: 36, borderRadius: 18,
+          background: 'rgba(52,152,219,0.15)', border: '2px solid rgba(52,152,219,0.5)',
+          color: '#3498DB', fontWeight: 700,
+          boxShadow: '0 0 12px rgba(52,152,219,0.3)',
+          backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
+          overflow: 'hidden', transition: 'width 0.25s ease',
+          width: 36,
+          padding: '0 10px',
+        }}
+        onMouseEnter={e => { e.currentTarget.style.width = '120px'; }}
+        onMouseLeave={e => { e.currentTarget.style.width = '36px'; }}
+      >
+        <span style={{ fontSize: 18, flexShrink: 0, width: 16, textAlign: 'center' }}>›</span>
+        <span style={{ fontSize: 11, fontWeight: 600, whiteSpace: 'nowrap', marginLeft: 6, opacity: 0.9 }}>Filters</span>
+      </div>
+    );
+  }
+
+  return (
+    <div style={isMobile ? {
+      position: 'fixed', top: 0, left: 0, bottom: 0, zIndex: 100,
+      width: '100vw', pointerEvents: 'auto',
+    } : { flexShrink: 0, height: '100%' }}>
+      {isMobile && <div onClick={onToggle} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.5)' }} />}
+      <div style={{
+        width: isMobile ? '80vw' : 320, minWidth: isMobile ? 0 : 320, maxWidth: isMobile ? 300 : 320, height: '100%',
+        borderRight: '1px solid rgba(52,152,219,0.15)',
+        padding: isMobile ? '12px 10px' : '16px 14px',
+        overflowY: 'auto', overflowX: 'hidden',
+        background: isMobile ? 'rgba(10,15,30,0.98)' : 'rgba(10,15,30,0.65)', fontSize: 13,
+        backdropFilter: 'blur(24px) saturate(1.4)', WebkitBackdropFilter: 'blur(24px) saturate(1.4)',
+        boxShadow: 'inset 0 0 60px rgba(52,152,219,0.04), 4px 0 24px rgba(0,0,0,0.3)',
+      }}>
+        {/* Close button */}
+        <button
+          onClick={onToggle}
+          style={{
+            display: 'flex', alignItems: 'center', gap: 6,
+            background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)',
+            borderRadius: 6, color: '#aaa', fontSize: 12, cursor: 'pointer',
+            padding: '6px 12px', marginBottom: 14, fontWeight: 600, width: '100%',
+          }}
+        >
+          <span style={{ fontSize: 16 }}>›</span> Close
+        </button>
+
+        {/* Visual Mode */}
+        <div style={{ marginBottom: 18 }}>
+          <div style={{ fontSize: 9, fontWeight: 700, color: '#555', letterSpacing: 1, marginBottom: 8, textTransform: 'uppercase' }}>
+            Visual
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+            {modes.map(m => (
+              <button
+                key={m.key}
+                onClick={() => onVisualModeChange && onVisualModeChange(m.key)}
+                style={{
+                  display: 'flex', alignItems: 'center', gap: 8, padding: '7px 10px',
+                  borderRadius: 6, border: 'none', cursor: 'pointer', width: '100%', textAlign: 'left',
+                  background: visualMode === m.key ? 'rgba(52,152,219,0.15)' : 'rgba(255,255,255,0.03)',
+                  color: visualMode === m.key ? '#3498DB' : '#888',
+                  transition: 'all 0.15s',
+                }}
+              >
+                <span style={{ fontSize: 14, width: 20, textAlign: 'center' }}>{m.icon}</span>
+                <div>
+                  <div style={{ fontSize: 11, fontWeight: 600 }}>{m.label}</div>
+                  <div style={{ fontSize: 8, color: '#555', marginTop: 1 }}>{m.desc}</div>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Tier Filters */}
+        <div style={{ marginBottom: 18 }}>
+          {/* In Degrees these chips filter by the tier of the connection who
+              introduces you, not the person reached — Separation has its own
+              "Their tier" chips for that, so the two must not read alike. */}
+          <div style={{ fontSize: 9, fontWeight: 700, color: '#555', letterSpacing: 1, marginBottom: 8, textTransform: 'uppercase' }}>
+            {isDegreesMode ? 'Filter by bridge tier' : 'Filter'}
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+            {/* All button */}
+            <button
+              onClick={() => onFilterChange && onFilterChange('all')}
+              style={{
+                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                padding: '7px 10px', borderRadius: 6, border: 'none', cursor: 'pointer', width: '100%',
+                background: filter === 'all' ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.03)',
+                color: filter === 'all' ? '#fff' : '#888',
+              }}
+            >
+              <span style={{ fontSize: 11, fontWeight: 600 }}>All</span>
+              <span style={{ fontSize: 10, color: '#555' }}>{allCount}</span>
+            </button>
+            {/* Tier buttons */}
+            {['S', 'A', 'B', 'C', 'D'].map(t => (
+              <button
+                key={t}
+                onClick={() => onFilterChange && onFilterChange(t)}
+                style={{
+                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                  padding: '7px 10px', borderRadius: 6, border: 'none', cursor: 'pointer', width: '100%',
+                  background: filter === t ? `${TIER_COLORS[t]}20` : 'rgba(255,255,255,0.03)',
+                  color: filter === t ? TIER_COLORS[t] : '#888',
+                  borderLeft: filter === t ? `3px solid ${TIER_COLORS[t]}` : '3px solid transparent',
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                  <div style={{
+                    width: 8, height: 8, borderRadius: '50%',
+                    background: TIER_COLORS[t], opacity: filter === t ? 1 : 0.4,
+                  }} />
+                  <span style={{ fontSize: 11, fontWeight: 600 }}>{t}-Tier</span>
+                </div>
+                <span style={{ fontSize: 10, color: '#555' }}>{counts[t] || 0}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Stats */}
+        <div style={{ borderTop: '1px solid rgba(255,255,255,0.06)', paddingTop: 12 }}>
+          <div style={{ fontSize: 9, fontWeight: 700, color: '#555', letterSpacing: 1, marginBottom: 8, textTransform: 'uppercase' }}>
+            Stats
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
+            {Object.entries(counts).filter(([k]) => ['S', 'A', 'B'].includes(k)).map(([tier, count]) => (
+              <div key={tier} style={{
+                padding: '6px 8px', borderRadius: 6,
+                background: `${TIER_COLORS[tier]}10`,
+                textAlign: 'center',
+              }}>
+                <div style={{ fontSize: 16, fontWeight: 800, color: TIER_COLORS[tier] }}>{count}</div>
+                <div style={{ fontSize: 8, color: '#555' }}>{tier}-Tier</div>
+              </div>
+            ))}
+            <div style={{
+              padding: '6px 8px', borderRadius: 6,
+              background: 'rgba(255,255,255,0.04)',
+              textAlign: 'center',
+            }}>
+              <div style={{ fontSize: 16, fontWeight: 800, color: '#fff' }}>{allCount}</div>
+              <div style={{ fontSize: 8, color: '#555' }}>Total</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}