/* global React, WatsonRail, WaxSeal, CaseMark, Timeline, AlertsLedger, EntityPanel, RiskScore, MitreGrid, DevicePanel, Card, Tag, Sev, EVIDENCE, EVIDENCE_TWIST, HYPOTHESES, NARRATIVE, recomputeHypotheses */
// Full Incident Investigation screen - Evening dark theme matching Figma 1:1006
const { useState: uS } = React;
// ── Figma logo/icon asset URLs ──
const SHERLOCK_LOGO_URL = 'https://www.figma.com/api/mcp/asset/175bbae4-18a9-4e65-9f5b-e92f7ce878e4';
const CMD_ICON_URL = 'https://www.figma.com/api/mcp/asset/41004654-7768-4573-8d44-16ee2e1210dd';
// ── Top bar - Figma 1:1668, height 76px ──────────────────────────────
function TopBar({
caseId = 'Marcus Chen, Mar 5',
commandValue,
suggestionsOpen,
suggestions,
variant = 'A',
onCommand,
}) {
const [localCmd, setLocalCmd] = uS('');
function handleKey(e) {
if (e.key === 'Enter' && localCmd.trim()) {
if (onCommand) onCommand(localCmd.trim());
setLocalCmd('');
}
}
return (
);
}
// ── Command suggestions dropdown ──────────────────────────────────────
function CommandSuggestions({ items, header = 'Try', onRun }) {
const groups = items || [
{ kind: 'canvas', label: 'show me logins from Bucharest in the last 72h', hint: 'reshape - timeline' },
{ kind: 'canvas', label: 'switch timeline to two lanes', hint: 'reshape - timeline' },
{ kind: 'canvas', label: 'compare to last week', hint: 'overlay - timeline' },
{ kind: 'canvas', label: 'stack alerts by MITRE tactic', hint: 'reshape - alerts' },
{ kind: 'ask', label: 'why is hijack hypothesis rising?', hint: 'ask Watson' },
{ kind: 'ask', label: 'has Marcus Chen been flagged before?', hint: 'ask Watson' },
{ kind: 'ask', label: 'what does the new device fingerprint prove?', hint: 'ask Watson' },
];
return (
{header}
{groups.map((g, i) => (
onRun && onRun(g.label)}
style={{
display: 'grid', gridTemplateColumns: '56px 1fr auto',
alignItems: 'center', gap: 10,
padding: '7px 14px',
cursor: 'pointer',
transition: 'background 0.1s',
}}
onMouseEnter={e => e.currentTarget.style.background = 'rgba(239,231,210,0.06)'}
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
>
{g.kind === 'canvas' ? 'canvas' : 'ask'}
{g.label}
{g.hint}
))}
Watson commands the canvas; pinned clues stay.
Enter to run
);
}
// ── Case header row - title + meta right ─────────────────────────────
function CaseHeader({ topConf, hijackConf, clueCount = 0, topName }) {
const hasTheory = clueCount > 0;
const titleText = hasTheory && topName ? topName : 'Open case, no theory yet';
return (
{titleText}
Marcus Chen, 5 Mar 2026
{hasTheory ? (
<>
Watson{' '}
{topConf}%
{hijackConf != null && (
session-hijack possibility {hijackConf}%
)}
) : (
{clueCount === 0 ? 'Watson is reading the ledger.' : `${clueCount} clue collected`}
)}
);
}
// ── Timeline mode toggle ──────────────────────────────────────────────
function TimelineActions({ timelineMode, showCompare, onModeChange }) {
const modes = [
{ id: 'area', label: 'AREA' },
{ id: 'bars', label: 'BARS' },
{ id: 'lanes', label: 'LANES' },
];
return (
{modes.map(m => {
const active = timelineMode === m.id;
return (
onModeChange && onModeChange(m.id)}
style={{
padding: '4px 10px',
fontFamily: 'var(--sans)', fontSize: 10.5, fontWeight: 500,
letterSpacing: '0.06em',
/* Active mode: inverted - cream bg, dark text. Figma: bg #efe7d2 text #272a42 */
background: active ? 'var(--ink)' : 'transparent',
color: active ? 'var(--parchment)' : 'var(--ink-mute)',
cursor: 'pointer',
transition: 'background 0.12s, color 0.12s',
userSelect: 'none',
}}>{m.label}
);
})}
{showCompare && (
compare: last week ON
)}
);
}
// ── Panel card wrapper (dark themed) ─────────────────────────────────
function DarkPanel({ children, style }) {
return (
{children}
);
}
// ── Section heading inside a panel ───────────────────────────────────
function PanelHeading({ children, muted }) {
return (
{children}
);
}
// ── Main investigation screen ─────────────────────────────────────────
function InvestigationScreen({
variant = 'A',
pins = [],
ranked,
brush = null,
pinned = [],
timelineMode = 'bars',
showCompare = false,
commandValue,
suggestionsOpen = false,
onCommand,
onBrushChange,
onPinRegion,
onUnpinRegion,
onResizeRegion,
onPinAlert,
onUnpin,
onFocus,
onTimelineModeChange,
}) {
const computedRanked = ranked || (typeof recomputeHypotheses !== 'undefined' ? recomputeHypotheses(pins, HYPOTHESES) : HYPOTHESES);
const topConf = computedRanked.length > 0
? (computedRanked[0].conf <= 1 ? Math.round(computedRanked[0].conf * 100) : Math.round(computedRanked[0].conf))
: 72;
const hijackEntry = computedRanked.find(h => h.id === 'hijack');
const hijackConf = hijackEntry
? (hijackEntry.conf <= 1 ? Math.round(hijackEntry.conf * 100) : Math.round(hijackEntry.conf))
: 38;
return (
{/* Body: watson rail (left 337px) + main canvas (right) */}
{/* Watson rail - 289px panel + 24px gutters each side = 337px total */}
{/* Main canvas - scrollable */}
{/* Case title row */}
{/* Hero timeline */}
{/* Middle row: alerts (left) + risk + subject (right) */}
{/* Alerts ledger */}
p.t)} onPin={onPinAlert} max={7} />
{/* Right column stack */}
{/* Risk gauge - 399x126 (compact) */}
{/* Subject card - 399x291 */}
{/* Devices section */}
Devices
p.t)} />
{/* Mapped techniques */}
);
}
Object.assign(window, { TopBar, CommandSuggestions, InvestigationScreen, CaseHeader, TimelineActions });