six-degrees 0.4.11 → 0.5.0

package/.next/standalone/app/queue/page.js

@@ -1,6 +1,10 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { Suspense, useEffect, useMemo, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import AppTabs from '../components/AppTabs';
+import SocialHub from '../social/SocialHub';
+import { setNotchTabs } from '../../lib/island';
 import { loadNetwork } from '../../lib/network';
 import { IS_DEMO } from '../../lib/demo';
 import OutlinkQuest from '../components/OutlinkQuest';
@@ -34,9 +38,12 @@ function calculatePriority(person, sectors) {
 }
 
 export default function QueuePage() {
-  return <OnboardingGate><QueueInner /></OnboardingGate>;
+  // useSearchParams (which view a link opens) needs a Suspense boundary to build.
+  return <Suspense fallback={null}><OnboardingGate><QueueInner /></OnboardingGate></Suspense>;
 }
 
+const VIEWS = ['quest', 'recs', 'pending', 'messages'];
+
 function QueueInner() {
   const { userId, userProfile: ctxProfile } = useUser();
   const sectors = ctxProfile?.sectors || [];
@@ -51,7 +58,9 @@ function QueueInner() {
   const [serverPending, setServerPending] = useState([]);
   const [bridgeById, setBridgeById] = useState({});
   // Circles is the game (lib/quest.js); the list and Pending are still here.
-  const [view, setView] = useState('quest'); // quest | recs | pending
+  // Messages & follow-ups is Social, folded in (Blake, 2026-10-02); a link can open any view: /queue?view=messages.
+  const asked = useSearchParams().get('view');
+  const [view, setView] = useState(() => (VIEWS.includes(asked) ? asked : 'quest')); // quest | recs | pending | messages
   const [added, setAdded] = useState([]);
   const [mappedIds, setMappedIds] = useState(() => new Set());
   // Whose circle can be scanned next, hidden lists known (lib/reach.js).
@@ -131,6 +140,21 @@ function QueueInner() {
     return out;
   }, [serverPending, recs, requests, bridgeById]);
 
+  // Circles, To add, Pending and Messages & follow-ups in the notch under the tabs.
+  useEffect(() => {
+    setNotchTabs({
+      items: [
+        { key: 'quest', label: 'Circles' },
+        { key: 'recs', label: `To add (${recs.length})` },
+        { key: 'pending', label: `Pending (${pendingList.length})` },
+        { key: 'messages', label: 'Messages & follow-ups' },
+      ],
+      current: view,
+      onPick: setView,
+    });
+    return () => setNotchTabs(null);
+  }, [view, recs.length, pendingList.length]);
+
   // Demo builds: this page is excluded from the public demo
   if (IS_DEMO) {
     return (
@@ -239,35 +263,25 @@ function QueueInner() {
       fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
       display: 'flex', flexDirection: 'column', overflow: 'hidden',
     }}>
-      {/* Header */}
-      <header style={{ padding: '14px 24px', borderBottom: '1px solid rgba(255,255,255,0.1)', flexShrink: 0 }}>
+      {/* The same header as every page: the app's tabs, Outlink lit. Circles, To add,
+          Pending and Messages & follow-ups sit in the notch under it. */}
+      <header style={{ padding: '20px 30px', borderBottom: '1px solid rgba(255,255,255,0.1)', flexShrink: 0 }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+          <Link href="/" style={{ textDecoration: 'none' }}>
+            <h1 style={{ fontSize: 28, fontWeight: 700, margin: 0, background: 'linear-gradient(135deg, #FFD700, #9B59B6, #3498DB)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
+              Six Degrees
+            </h1>
+          </Link>
+          <AppTabs active="outlink" />
+          <Link href="/settings" title="Settings" aria-label="Settings" style={{
+            width: 32, height: 32, borderRadius: '50%', flexShrink: 0, background: 'rgba(255,255,255,0.06)', color: '#888',
+            fontSize: 16, textDecoration: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
+          }}>⚙</Link>
+        </div>
+      </header>
+      {(view === 'recs' || view === 'pending') && (
+      <div style={{ padding: '10px 24px', borderBottom: '1px solid rgba(255,255,255,0.08)', flexShrink: 0 }}>
         <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
-          <Link href="/" style={{
-            display: 'flex', alignItems: 'center', gap: 6, color: '#888', textDecoration: 'none',
-            fontSize: 13, fontWeight: 600, padding: '6px 14px', borderRadius: 6,
-            background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)',
-          }}><span style={{ fontSize: 16 }}>&larr;</span> Map</Link>
-          <h1 style={{
-            fontSize: 20, fontWeight: 700, margin: 0,
-            background: 'linear-gradient(135deg, #FF6B35, #FFD700)',
-            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
-          }}>Outlink</h1>
-          {/* View toggle: Recommendations vs Pending */}
-          <div style={{ display: 'flex', gap: 2, background: 'rgba(255,255,255,0.06)', borderRadius: 6, padding: 2 }}>
-            <button onClick={() => setView('quest')} style={{
-              padding: '5px 12px', borderRadius: 4, border: 'none', fontSize: 11, fontWeight: 700, cursor: 'pointer',
-              background: view === 'quest' ? 'linear-gradient(135deg, #FFD700, #FF6B35)' : 'transparent', color: view === 'quest' ? '#000' : '#FFD700',
-            }}>Circles</button>
-            <button onClick={() => setView('recs')} style={{
-              padding: '5px 12px', borderRadius: 4, border: 'none', fontSize: 11, fontWeight: 600, cursor: 'pointer',
-              background: view === 'recs' ? '#fff' : 'transparent', color: view === 'recs' ? '#000' : '#888',
-            }}>To Add ({recs.length})</button>
-            <button onClick={() => setView('pending')} style={{
-              padding: '5px 12px', borderRadius: 4, border: 'none', fontSize: 11, fontWeight: 600, cursor: 'pointer',
-              background: view === 'pending' ? 'linear-gradient(135deg, #FF6B35, #FFD700)' : 'transparent',
-              color: view === 'pending' ? '#000' : '#FF6B35',
-            }}>Pending ({pendingList.length})</button>
-          </div>
           <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
             {view === 'recs' && (<>
               <button onClick={() => setGroupBy('tier')} style={{
@@ -286,7 +300,7 @@ function QueueInner() {
           </div>
         </div>
         {/* Filters (the list's; the Circles game has its own order) */}
-        <div style={{ display: view === 'quest' ? 'none' : 'flex', gap: 6 }}>
+        <div style={{ display: 'flex', gap: 6 }}>
           {[
             { k: 'all', l: `All (${recs.length})` },
             { k: 'S', l: `S (${tierCounts.S})`, c: TIER_COLORS.S },
@@ -300,7 +314,15 @@ function QueueInner() {
             }}>{f.l}</button>
           ))}
         </div>
-      </header>
+      </div>
+      )}
+
+      {/* Messages & follow-ups: Social, inside Outlink */}
+      {view === 'messages' && (
+        <div style={{ flex: 1, overflow: 'auto', padding: '40px 8px 0' }}>
+          <SocialHub embedded />
+        </div>
+      )}
 
       {/* Batch action bar — recs view only */}
       {view === 'recs' && selected.size > 0 && (
@@ -338,7 +360,7 @@ function QueueInner() {
       )}
 
       {/* Scrollable list */}
-      {view !== 'quest' && (
+      {(view === 'recs' || view === 'pending') && (
       <div style={{ flex: 1, overflow: 'auto', padding: '12px 24px' }}>
         <div style={{ maxWidth: 700, margin: '0 auto' }}>
 

package/.next/standalone/app/scores/page.js

@@ -1,75 +1,25 @@
 'use client';
 
-// Scores: how a power score is worked out, and everything you can change about
-// it, in one place (Blake, 2026-09-28: "maybe this should be its own tab").
-// Your field (the sector focus), how tiers are graded, and every company's
-// score. The first two used to live in Settings and the company scores in
-// Paths → Scores; the old links forward here (app/settings/page.js,
-// app/paths/page.js).
+// Scores had a tab of its own from 2026-09-28 to 2026-10-02. It now lives in
+// Settings (Blake, 2026-10-02: "moving scores into settings"), and network
+// health in Profile → Insights. Old links land in the right place:
+// /scores#sector, #tiers and #companies go to the same place in Settings;
+// /scores#health goes to Insights.
 
-import { useState } from 'react';
+import { useEffect } from 'react';
 import Link from 'next/link';
-import OnboardingGate from '../components/OnboardingGate';
-import SectorSection from '../components/settings/SectorSection';
-import TierSection from '../components/settings/TierSection';
-import NetworkHealthSection from '../components/settings/NetworkHealthSection';
-import CompanyScores from '../components/CompanyScores';
-import { Body, LINE, FONT } from '../components/ui';
-import { IS_DEMO } from '../../lib/demo';
-
-export default function ScoresPage() {
-  return <OnboardingGate><ScoresInner /></OnboardingGate>;
-}
-
-const jump = { color: '#3498DB', textDecoration: 'none', fontWeight: 600 };
-
-function ScoresInner() {
-  // Saving your sector or tiers rescores everyone; the company list below reads
-  // its scores again when this changes.
-  const [saves, setSaves] = useState(0);
-  const saved = () => setSaves((n) => n + 1);
-  if (IS_DEMO) {
-    return (
-      <div style={{
-        minHeight: '100vh', background: '#0a0a1a', color: 'rgba(255,255,255,0.7)',
-        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
-        gap: 12, textAlign: 'center', padding: 24, fontFamily: FONT,
-      }}>
-        <h2 style={{ margin: 0, fontSize: 20, fontWeight: 700, color: '#fff' }}>Not part of the demo</h2>
-        <p style={{ margin: 0, fontSize: 13 }}>The public demo includes the Network Circle and Degrees views only.</p>
-        <Link href="/" style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', textDecoration: 'none' }}>&larr; Back to the network</Link>
-      </div>
-    );
-  }
+import { useRouter } from 'next/navigation';
+import { FONT } from '../components/ui';
 
+export default function ScoresMoved() {
+  const router = useRouter();
+  useEffect(() => {
+    const at = window.location.hash;
+    router.replace(at === '#health' ? '/profile?view=insights' : `/settings${at || '#scoring'}`);
+  }, [router]);
   return (
-    <div style={{ minHeight: '100vh', background: '#0a0a1a', color: '#fff', fontFamily: FONT }}>
-      <header style={{ padding: '16px 24px', borderBottom: LINE, display: 'flex', alignItems: 'center', gap: 16 }}>
-        <Link href="/" style={{
-          display: 'flex', alignItems: 'center', gap: 6, color: '#888', textDecoration: 'none',
-          fontSize: 13, fontWeight: 600, padding: '6px 14px', borderRadius: 6,
-          background: 'rgba(255,255,255,0.06)', border: LINE,
-        }}>← Back to Map</Link>
-        <h1 style={{
-          fontSize: 22, fontWeight: 700, margin: 0,
-          background: 'linear-gradient(135deg, #FFD700, #9B59B6, #3498DB)',
-          WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
-        }}>Scores</h1>
-      </header>
-      <main style={{ maxWidth: 980, margin: '0 auto', padding: '8px 24px 64px' }}>
-        <Body style={{ marginTop: 16 }}>
-          How someone&rsquo;s power score is worked out, and the three things you can change about it:{' '}
-          <a href="#sector" style={jump}>your field</a>, <a href="#tiers" style={jump}>how tiers are graded</a> and{' '}
-          <a href="#companies" style={jump}>any company&rsquo;s score</a>. A change here rescores everyone.
-          {' '}First, <a href="#health" style={jump}>how your network holds together</a>.
-        </Body>
-        <NetworkHealthSection />
-        <SectorSection onSaved={saved} />
-        <TierSection onSaved={saved} />
-        <div id="companies" style={{ marginTop: 28 }}>
-          <CompanyScores version={saves} />
-        </div>
-      </main>
+    <div style={{ minHeight: '100vh', background: '#0a0a1a', color: '#aab', fontFamily: FONT, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13 }}>
+      Scores are in <Link href="/settings#scoring" style={{ color: '#3498DB', marginLeft: 4 }}>Settings</Link> now.
     </div>
   );
 }

package/.next/standalone/app/settings/page.js

@@ -2,10 +2,13 @@
 
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 import OnboardingGate from '../components/OnboardingGate';
 import UpdatePanel from '../components/UpdatePanel';
 import DataSection from '../components/settings/DataSection';
+import SectorSection from '../components/settings/SectorSection';
+import TierSection from '../components/settings/TierSection';
+import TitleSection from '../components/settings/TitleSection';
+import CompanyScores from '../components/CompanyScores';
 import { Section, Body, Mono, LINE, FONT } from '../components/ui';
 import { IS_DEMO } from '../../lib/demo';
 
@@ -13,6 +16,11 @@ import { IS_DEMO } from '../../lib/demo';
 // and the facts about this copy. Each feature adds its own <Section>; what the
 // user chooses is saved in the database (lib/settings.js), so it travels with
 // their data.
+//
+// Scores live here again (Blake, 2026-10-02: "moving scores into settings"):
+// your field, how tiers are graded and every company's score. They had a tab
+// of their own (app/scores), which now forwards here; network health went to
+// Profile → Insights.
 
 export default function SettingsPage() {
   return <OnboardingGate><SettingsInner /></OnboardingGate>;
@@ -28,13 +36,9 @@ const KIND_LABEL = {
 function SettingsInner() {
   const [info, setInfo] = useState(null);
   const [error, setError] = useState(null);
-  const router = useRouter();
-  // Your field and tiers moved to the Scores tab (app/scores): old links to
-  // /settings#sector and /settings#tiers go there.
-  useEffect(() => {
-    const at = window.location.hash;
-    if (at === '#sector' || at === '#tiers') router.replace(`/scores${at}`);
-  }, [router]);
+  // Saving your field or tiers rescores everyone; the company list reads its scores again when this changes.
+  const [saves, setSaves] = useState(0);
+  const saved = () => setSaves((n) => n + 1);
 
   useEffect(() => {
     fetch('/api/settings')
@@ -74,16 +78,26 @@ function SettingsInner() {
         }}>Settings</h1>
       </header>
 
-      <main style={{ maxWidth: 720, margin: '0 auto', padding: '8px 24px 64px' }}>
+      <main style={{ maxWidth: 980, margin: '0 auto', padding: '8px 24px 64px' }}>
         {error && <Body style={{ color: '#ff7676', marginTop: 16 }}>{error}</Body>}
 
         <UpdatePanel />
-        <Section id="scoring" title="Your field and tiers">
+        <Section id="scoring" title="Scores">
           <Body>
-            They&rsquo;re on the <Link href="/scores" style={{ color: '#3498DB' }}>Scores</Link> tab now, beside every
-            company&rsquo;s score: <Link href="/scores#sector" style={{ color: '#3498DB' }}>your field</Link> and{' '}
-            <Link href="/scores#tiers" style={{ color: '#3498DB' }}>how tiers are graded</Link>.
+            How someone&rsquo;s power score is worked out, and the four things you can change about it:{' '}
+            <a href="#sector" style={{ color: '#3498DB', textDecoration: 'none', fontWeight: 600 }}>your field</a>,{' '}
+            <a href="#tiers" style={{ color: '#3498DB', textDecoration: 'none', fontWeight: 600 }}>how tiers are graded</a>,{' '}
+            <a href="#titles" style={{ color: '#3498DB', textDecoration: 'none', fontWeight: 600 }}>how titles rank</a> and{' '}
+            <a href="#companies" style={{ color: '#3498DB', textDecoration: 'none', fontWeight: 600 }}>any company&rsquo;s score</a>.
+            A change here rescores everyone. How your network holds together is in{' '}
+            <Link href="/profile?view=insights" style={{ color: '#3498DB', textDecoration: 'none', fontWeight: 600 }}>Profile → Insights</Link>.
           </Body>
+          <SectorSection onSaved={saved} />
+          <TierSection onSaved={saved} />
+          <TitleSection onSaved={saved} />
+          <div id="companies" style={{ marginTop: 28 }}>
+            <CompanyScores version={saves} />
+          </div>
         </Section>
         <DataSection />