six-degrees 0.4.0-beta.1 → 0.4.1

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

@@ -42,7 +42,7 @@ export default function EmptyState() {
           background: 'linear-gradient(135deg, #FFD700, #9B59B6, #3498DB)',
           WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
         }}>
-          Welcome to 6 Degrees
+          Welcome to Six 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.

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

@@ -0,0 +1,94 @@
+'use client';
+
+// The Scan page's one question before the first scan: what field you're in.
+// The same picks as Scores → Your sector (SectorPicker), saved the same way
+// (lib/settings-client.js), so the first scan is already scored with them.
+// Optional: Skip for now carries on without one. Either answer is kept
+// (`fieldAsked`, lib/sector-focus.js), so it's asked once; when it's asked at
+// all is lib/scanner-setup.js askForField.
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { Body, Btn, Status, LINE } from './ui';
+import SectorPicker from './settings/SectorPicker';
+import { sectorByKey } from '../../lib/sector-directory';
+import { saveSettings } from '../../lib/settings-client';
+
+const link = { color: '#3498DB' };
+// The card's own colour (3% white on the page's #0a0a1a), made solid so the
+// picks scroll behind the buttons rather than through them.
+const FOOT = '#111121';
+
+/** The question. `onDone(sectors)` once it's answered ([] when skipped). */
+export default function FieldStep({ onDone }) {
+  const [sectors, setSectors] = useState([]);
+  const [saving, setSaving] = useState(null);
+  const [error, setError] = useState(null);
+
+  async function pick() {
+    setSaving('pick');
+    setError(null);
+    const d = await saveSettings({ sectorFocus: { sectors, strength: 'lean' }, fieldAsked: true });
+    // Saved even if the rescore it set off failed: there's no one to rescore
+    // yet, and the first scan scores everyone.
+    if (d.settings) { onDone(d.settings.sectorFocus.sectors); return; }
+    setError(d.error);
+    setSaving(null);
+  }
+
+  async function skip() {
+    setSaving('skip');
+    setError(null);
+    // Kept so it isn't asked again. If that can't be saved, skipping still
+    // skips: the question comes back next time, which is all it costs.
+    await saveSettings({ fieldAsked: true });
+    onDone([]);
+  }
+
+  return (
+    <section aria-labelledby="field-question" data-field-question style={{
+      margin: '8px 0 0', padding: '20px 22px 0', borderRadius: 12, border: LINE, background: 'rgba(255,255,255,0.03)',
+    }}>
+      <div style={{ fontSize: 12, color: '#788', textTransform: 'uppercase', letterSpacing: 0.6 }}>Before you scan · optional</div>
+      <h2 id="field-question" style={{ fontSize: 18, fontWeight: 700, margin: '6px 0 4px' }}>What field are you in?</h2>
+      <Body style={{ marginTop: 0, marginBottom: 14 }}>
+        Pick up to three. Companies in your field count for more when your network is scored, so the people there rank
+        higher. You can change it anytime on the Scores tab.
+      </Body>
+
+      <SectorPicker sectors={sectors} onChange={setSectors} disabled={Boolean(saving)} />
+
+      {/* The twelve industries, and any lists opened, run the card past the
+          bottom of the window. So Continue and Skip for now stay at the foot of
+          the window while the card is on screen; globals.css keeps a pick
+          reached with Tab from stopping behind them. A failed save shows here
+          too, beside them. */}
+      <div style={{
+        position: 'sticky', bottom: 0, margin: '16px -22px 0', padding: '12px 22px 16px',
+        borderTop: LINE, borderRadius: '0 0 11px 11px', background: FOOT,
+      }}>
+        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+          <Btn primary onClick={pick} disabled={!sectors.length || Boolean(saving)}>
+            {saving === 'pick' ? 'Saving…' : 'Continue'}
+          </Btn>
+          <Btn onClick={skip} disabled={Boolean(saving)}>Skip for now</Btn>
+        </div>
+        {error && <Status tone="bad">{error}</Status>}
+      </div>
+    </section>
+  );
+}
+
+/** What was answered, above the scan's steps: where it went, and where to change it. */
+export function FieldAnswer({ sectors }) {
+  if (!sectors.length) {
+    return <Status>No field for now. You can pick one anytime on <Link href="/scores#sector" style={link}>Scores</Link>.</Status>;
+  }
+  // The labels have commas of their own ("Tech, Software & AI"), so a dot separates them.
+  return (
+    <Status tone="ok">
+      Your field: {sectors.map((k) => sectorByKey(k).label).join(' · ')}. Your first scan is scored with it. Change it
+      anytime on <Link href="/scores#sector" style={link}>Scores</Link>.
+    </Status>
+  );
+}

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

@@ -12,7 +12,7 @@ function useIsMobile() {
 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 }) {
+export default function FilterPanel({ collapsed, onToggle, mode, filter, onFilterChange, visualMode, onVisualModeChange, tierCounts, bridgeTierCounts, degrees = [1], onDegreesChange, degreeCounts = {} }) {
   const isMobile = useIsMobile();
   const isDegreesMode = mode === 'degrees';
   // Same source of truth the renderer uses, so the menu can never offer a
@@ -105,6 +105,42 @@ export default function FilterPanel({ collapsed, onToggle, mode, filter, onFilte
         </div>
 
         {/* Tier Filters */}
+        {/* Network Circle: which degrees to draw. Any mix, never none: 2nd and
+            3rd without your own connections shows who's valuable outside them. */}
+        {!isDegreesMode && onDegreesChange && (
+          <div style={{ marginBottom: 18 }}>
+            <div style={{ fontSize: 9, fontWeight: 700, color: '#555', letterSpacing: 1, marginBottom: 8, textTransform: 'uppercase' }}>
+              Degree
+            </div>
+            <div style={{ display: 'flex', gap: 6 }}>
+              {[[1, '1st', 'Your connections'], [2, '2nd', 'In a scanned circle'], [3, '3rd', 'Found by a company scan']].map(([d, label, what]) => {
+                const on = degrees.includes(d);
+                const count = degreeCounts[d] || 0;
+                const last = on && degrees.length === 1;
+                return (
+                  <button
+                    key={d}
+                    title={`${what}: ${count.toLocaleString()}${last ? ' (keep at least one)' : ''}`}
+                    aria-pressed={on}
+                    disabled={last || (!on && !count)}
+                    onClick={() => onDegreesChange(on ? degrees.filter((x) => x !== d) : [...degrees, d].sort())}
+                    style={{
+                      flex: 1, padding: '7px 4px', borderRadius: 8, fontSize: 11.5, fontWeight: 700,
+                      cursor: last || (!on && !count) ? 'default' : 'pointer',
+                      border: on ? '1px solid rgba(52,152,219,0.6)' : '1px solid rgba(255,255,255,0.08)',
+                      background: on ? 'rgba(52,152,219,0.18)' : 'rgba(255,255,255,0.03)',
+                      color: on ? '#cfe6f7' : count ? '#888' : '#444',
+                    }}
+                  >
+                    {label}
+                    <div style={{ fontSize: 9.5, fontWeight: 500, opacity: 0.8, marginTop: 2 }}>{count.toLocaleString()}</div>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
         <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