Skip to content

Restore contrast and scene depth #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
titashdev-ops merged 5 commits into from
Aug 27, 2026
Merged

Restore contrast and scene depth #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8dff7fe
Make brief covers more room-specific and cinematic
titashdev-ops Aug 27, 2026
e0ac7a9
Make archive search more cinematic and shelf-like
titashdev-ops Aug 27, 2026
ee1dfae
Fix featured search refs and keyboard behavior
titashdev-ops Aug 27, 2026
8d308c3
Make trust surfaces more graphic and staged
titashdev-ops Aug 27, 2026
0613851
Merge main into contrast-wow-pass.
titashdev-ops Aug 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 7 additions & 121 deletions src/components/SystemsIntelligenceCanvas.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,12 @@
import React, { useState, useEffect, useMemo, useRef, useCallback } from "react";
import React, { useState, useMemo, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
Activity, Cpu, Network, ShieldCheck, Zap, Radio,
Layers, Compass, Database, Terminal, RefreshCw, X, Info, CheckCircle2,
Server, GitCommit, ShieldAlert, ArrowUpRight, CpuIcon, BookOpen,
HelpCircle, Link2, Sparkles, Code2, ArrowRight, History, Lightbulb,
Workflow, Layers3, ChevronRight, Share2, CornerDownRight
import {
Layers, Compass, X, History, ChevronRight
} from "lucide-react";
import clsx from "clsx";
import { twMerge } from "tailwind-merge";
import { useSpatial } from "../SpatialContext";
import { useSystemCommand } from "../context/SystemCommandContext";
import EngineeringReviewPanel from "./EngineeringReviewPanel";
import { CASE_STUDIES } from "../data/missions";
import { MICRO_EDUCATION_DB, MISSION_TOPOLOGIES, AMBIENT_NODES, AMBIENT_LINKS } from "../data/canvas-atlas";
import { mapReveal } from "../lib/motion";

Expand All @@ -29,18 +23,7 @@ export default function SystemsIntelligenceCanvas() {
const [selectedNode, setSelectedNode] = useState(null);
const [hoveredLink, setHoveredLink] = useState(null);
const [selectedTech, setSelectedTech] = useState(null);
const [viewMode, setViewMode] = useState("presentation");

const activeMissionData = useMemo(() => {
if (selectedMissionId) {
return CASE_STUDIES.find((m) => m.missionId === selectedMissionId) || CASE_STUDIES[0];
}
return CASE_STUDIES[0];
}, [selectedMissionId]);

const [eventLogIndex, setEventLogIndex] = useState(0);

// Phase 2: Engineering Memory (Session Exploration History Trail)
const [explorationHistory, setExplorationHistory] = useState(() => {
return [
{ type: "mission", id: "ops-dronly", label: "ops.dronly.in" }
Expand All @@ -49,34 +32,13 @@ export default function SystemsIntelligenceCanvas() {

const addToHistory = useCallback((item) => {
setExplorationHistory((prev) => {
// Avoid duplicate consecutive entries
if (prev.length > 0 && prev[prev.length - 1].id === item.id) return prev;
const filtered = prev.filter((x) => x.id !== item.id);
return [...filtered.slice(-5), item];
});
}, []);

// Pillar 1: Live Pulse Traffic Density & Simulation Controls
const [trafficDensity, setTrafficDensity] = useState('NORMAL'); // 'NORMAL' | 'HIGH_LOAD' | 'FAILOVER'
const [manualBreakerTripped, setManualBreakerTripped] = useState(false);

const isBreakerActive = manualBreakerTripped || trafficDensity === 'FAILOVER';

// Computed Dynamic Operations Telemetry Metrics
const pingRate = trafficDensity === 'FAILOVER' ? '142.0k pings/s' : trafficDensity === 'HIGH_LOAD' ? '68.5k pings/s' : '12.4k pings/s';
const workerPool = trafficDensity === 'FAILOVER' ? '256 Workers' : trafficDensity === 'HIGH_LOAD' ? '128 Workers' : '64 Workers';
const healthSLA = isBreakerActive ? '94.10% SHIELDED' : trafficDensity === 'HIGH_LOAD' ? '98.42% ARMED' : '99.98% NOMINAL';

// Packet animation speed
const packetAnimDuration = trafficDensity === 'FAILOVER' ? '0.5s' : trafficDensity === 'HIGH_LOAD' ? '1.2s' : '3.8s';

// Cycle telemetry event log ticker
useEffect(() => {
const interval = setInterval(() => {
setEventLogIndex((prev) => prev + 1);
}, 4000);
return () => clearInterval(interval);
}, []);
const packetAnimDuration = "3.8s";

const activeTopology = useMemo(() => {
if (selectedMissionId && MISSION_TOPOLOGIES[selectedMissionId]) {
Expand All @@ -87,15 +49,8 @@ export default function SystemsIntelligenceCanvas() {

const currentNodes = activeTopology ? activeTopology.nodes : AMBIENT_NODES;
const currentLinks = activeTopology ? activeTopology.links : AMBIENT_LINKS;
const currentEvents = activeTopology ? activeTopology.events : [
"Systems Mesh active: Monitoring distributed nodes",
"Telemetry link integrity: 99.94% Nominal",
"Zero security vulnerabilities detected in active build",
"Select a Flagship Mission above to inspect full topology"
];

const themeColor = isBreakerActive ? "#f43f5e" : trafficDensity === 'HIGH_LOAD' ? "#fbbf24" : activeTopology ? activeTopology.hexColor : "#00f0ff";
const themeText = isBreakerActive ? "text-rose-400" : trafficDensity === 'HIGH_LOAD' ? "text-amber-400" : activeTopology ? activeTopology.textClass : "text-cyan-electric";
const themeColor = activeTopology ? activeTopology.hexColor : "#00f0ff";

// Helper to resolve node coordinates
const getNodePos = useCallback((id) => {
Expand Down Expand Up @@ -203,29 +158,6 @@ export default function SystemsIntelligenceCanvas() {
);
})}
</div>

<div className="flex items-center gap-2 overflow-x-auto custom-scrollbar shrink-0">
<div className="flex items-center rounded-md border border-obsidian-border bg-slate-950 p-0.5 font-sans text-xs shrink-0">
<button type="button"
onClick={() => { playClickSound(); setViewMode("presentation"); }}
className={cn(
"px-2.5 py-1 rounded transition-all cursor-pointer font-medium flex items-center gap-1",
viewMode === "presentation" ? "bg-cyan-electric/20 text-cyan-electric border border-cyan-electric/40" : "text-slate-400 hover:text-white"
)}
>
Map
</button>
<button type="button"
onClick={() => { playClickSound(); setViewMode("review"); }}
className={cn(
"px-2.5 py-1 rounded transition-all cursor-pointer font-medium flex items-center gap-1",
viewMode === "review" ? "bg-amber-400/20 text-amber-300 border border-amber-400/50" : "text-slate-400 hover:text-white"
)}
>
<ShieldCheck size={11} /> Review
</button>
</div>
</div>
</div>

{/* Phase 2: Engineering Memory (Session History Trail) */}
Expand Down Expand Up @@ -259,17 +191,8 @@ export default function SystemsIntelligenceCanvas() {

</div>

{/* Layer 2: Main Vector Node Canvas Stage OR Engineering Review Mode Panel */}
{viewMode === "review" ? (
<div className="relative w-full flex-1 my-2 rounded-lg bg-slate-950/90 border border-amber-400/30 p-4 overflow-y-auto max-h-[640px] custom-scrollbar z-10">
<EngineeringReviewPanel
mission={activeMissionData}
activeMode={viewMode}
onToggleMode={(mode) => setViewMode(mode)}
/>
</div>
) : (
<div className="relative w-full flex-1 min-h-[300px] my-2 rounded-lg bg-slate-950/60 border border-obsidian-border/50 overflow-hidden">
{/* Layer 2: Main Vector Node Canvas Stage */}
<div className="relative w-full flex-1 min-h-[300px] my-2 rounded-lg bg-slate-950/60 border border-obsidian-border/50 overflow-hidden">

{/* SVG Vector Links Layer */}
<svg className="absolute inset-0 w-full h-full pointer-events-none z-10">
Expand Down Expand Up @@ -573,46 +496,9 @@ export default function SystemsIntelligenceCanvas() {
<div className="kicker text-slate-400 flex items-center justify-center gap-1.5">
<Compass size={13} /> Open a system
</div>
<p className="font-sans text-xs text-slate-400 leading-tight">
Click a node for situation, choice, and cost.
</p>
</div>
)}
</div>
)}

{/* Layer 3: Contextual Operational Telemetry Status Bar */}
<div className="relative z-10 grid grid-cols-2 sm:grid-cols-4 gap-2 pt-2.5 font-mono text-xs">

<div className="p-2 sm:p-2.5 rounded-lg bg-obsidian-surface/70 border border-obsidian-border/70">
<span className="text-slate-500 block text-[8px] uppercase tracking-wider">Active Mission</span>
<span className={cn("font-bold truncate block mt-0.5", themeText)}>
{activeTopology ? activeTopology.title : "Global Systems Mesh"}
</span>
</div>

<div className="p-2 sm:p-2.5 rounded-lg bg-obsidian-surface/70 border border-obsidian-border/70">
<span className="text-slate-500 block text-[8px] uppercase tracking-wider">gRPC Worker Pool</span>
<span className="text-slate-300 font-semibold truncate block mt-0.5">
{workerPool}
</span>
</div>

<div className="p-2 sm:p-2.5 rounded-lg bg-obsidian-surface/70 border border-obsidian-border/70">
<span className="text-slate-500 block text-[8px] uppercase tracking-wider">Live Ingest Rate</span>
<span className="text-cyan-electric font-bold truncate block mt-0.5">
{pingRate}
</span>
</div>

<div className="p-2 sm:p-2.5 rounded-lg bg-obsidian-surface/70 border border-obsidian-border/70">
<span className="text-slate-500 block text-[8px] uppercase tracking-wider">Circuit Breaker SLA</span>
<span className={cn("font-bold truncate block mt-0.5 flex items-center gap-1", isBreakerActive ? "text-rose-400" : trafficDensity === 'HIGH_LOAD' ? "text-amber-400" : "text-emerald-glow")}>
<CheckCircle2 size={11} /> {healthSLA}
</span>
</div>

</div>

</div>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/TrustCenter.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ export default function TrustCenter() {
</div>
</div>

<div className="flex flex-1 flex-col overflow-hidden md:flex-row">
<div className="flex min-h-0 flex-1 flex-col overflow-hidden md:flex-row">
<div className="w-full shrink-0 border-b border-obsidian-border/60 bg-obsidian/45 overflow-x-auto overflow-y-hidden p-3 flex flex-row gap-2 md:w-72 md:flex-col md:overflow-y-auto md:overflow-x-hidden md:border-b-0 md:border-r md:p-4">
{TRUST_SECTIONS.map((section) => {
const isActive = activeSection === section.id;
Expand Down
Loading
Loading