);
}
// ════════════════════════ TERMINAL OVERVIEW ════════════════════════
// First-screen view: condensed sentiment + engagement + blueprint in one
// scroll. Each panel has a "Show more →" button that jumps to that tab.
function TerminalOverview({ community, ready, subFor, onJump, personalized, onPersonalize, streakDays, onStreakClick, onAction, liveLog, scanInsights, apiPhase }) {
const sentiment = community.sentiment || [];
const posts = (community.posts || []).slice().sort((a, b) => (b.rel ?? 0) - (a.rel ?? 0));
const postsTop = posts.slice(0, 2);
const items = (community.blueprint || []).slice(0, 3);
// Tour highlight that cycles through the 3 panels. User clicks "next" to
// advance; the highlight on a panel auto-clears once that panel's data has
// loaded in (so it disappears with the information box).
const [tourStep, setTourStep] = useStateT(0);
const allReady = ready.sentiment && ready.engagement && ready.blueprint;
const panelReady = [ready.sentiment, ready.engagement, ready.blueprint];
// Auto-advance past panels that are already loaded.
useEffectT(() => {
if (allReady) return;
if (tourStep < 3 && panelReady[tourStep]) {
setTourStep((s) => Math.min(3, s + 1));
}
}, [ready.sentiment, ready.engagement, ready.blueprint, tourStep, allReady]);
function tourHighlight(idx) {
// hide highlight on a panel once its data has arrived
if (panelReady[idx]) return false;
return tourStep === idx;
}
const tourActive = !allReady && tourStep < 3;
return (
Terminal · {community.name}
tap a card to act
{tourActive &&
tour · {tourStep + 1}/3
}
{/* Live pipeline log → scan insights card (appears once community is identified) */}
{/* BLUEPRINT PANEL — shows the actual 3 curated posts, not generic labels.
"Show playbook →" jumps to the Blueprint tab for read/join/give guidance. */}
{ready.blueprint ?
<>
03 · blueprint for action3 posts
{/* Mobile: one-liner summary */}
read{items[0]?.postRef || "—"}
3 moves ready in {community.name}
{/* Desktop: 3 blueprint items — read / join / give.
Uses community.blueprint directly so it always shows the AI-selected
blueprint posts, independent of the engagement posts list. */}
:
}
{tourHighlight(2) && setTourStep(3)} onSkip={() => setTourStep(3)} last />}
);
}
// Tour overlay rendered inside one panel at a time during loading.
// Click "Next" to advance; the overlay disappears automatically when that
// panel's real data arrives.
function TourHighlight({ step, total, onNext, onSkip, last }) {
return (
);
}
const SKELETON_META = {
sentiment: {
title: "How does your community feel?",
body: "We score every thread in the last 24h to show whether the room is open, skeptical, or actively asking for what you sell.",
preview: (
),
},
engagement: {
title: "Which posts should you reply to?",
body: "We rank live posts by relevance, heat, and reply-window so you spend time where a thoughtful comment actually compounds.",
preview: (
{[1,2].map(i => (
))}
),
},
blueprint: {
title: "What should you do today?",
body: "Three concrete moves: one post worth reading, one conversation to join, one way to give back — drafted in your voice.",
preview: (
Earn streaks for free credits. A 90-day streak unlocks 100 credits — that's $10 of engagement, on us. Miss a day and the streak resets to zero. We'll roll this out soon.
{/* read → open Reddit URL directly.
join → open ActionModal with draft comment (copies + redirects on Post).
give → open ActionModal for writing a new post. */}
{ins.kind === "read"
? {ins.cta}↗
:
}