# The Live Migration Simulation

## Product thesis

The portfolio is not a gallery. It is a controlled enterprise incident in which the visitor becomes the client and Ahamed becomes the forward-deployed engineer. Capability is demonstrated through decisions, system behavior, and measurable outcomes rather than claims.

The simulation is explicitly labeled as fictional. Resume-derived outcomes are separated from illustrative telemetry.

## Visitor journey

### Entry: the incident briefing

- Present a SEV-1 migration warning: `Legacy Migration Incomplete. Downtime Looming.`
- Identify the fictional client and show a live countdown.
- Offer two paths:
  - `Initiate Deployed Engineer Session` for the interactive experience.
  - `Watch Automated Walkthrough` for a recruiter with limited time.

### Stage 1: discovery and enterprise RAG

1. Render a broker portal connected to a saturated monolith and unindexed document store.
2. Let the visitor run `fde diagnose --scope=full --trace`.
3. Reveal the blocking document parser and the manual intake bottleneck.
4. Let the visitor deploy the enterprise RAG slice.
5. Morph the map into document intake, OCR/extraction, retrieval, vector knowledge, typed APIs, and a human review workspace.
6. Show resume-backed outcomes: intake reduced from roughly 45 minutes to under five, roughly 70% of fields populated, and six or more forms generated.

### Stage 2: critical third-party incident

1. Trigger a simulated HTTP 429 event during an integration stress test.
2. Display a visible degraded state across topology and telemetry.
3. Offer three defensible policies:
   - Queue and drain.
   - Adaptive backoff.
   - Circuit breaker with a trusted cache.
4. Spin up traffic, queue, and recovery agents.
5. Reveal the orchestration pseudocode, selected policy, verification loop, and final recovery.

### Stage 3: SLA sign-off

1. Display a stabilized architecture and completed migration.
2. Summarize simulation telemetry and operator clearance.
3. Capture name, work email, organization, mission brief, and typed signature.
4. Generate a prefilled secure email handoff.
5. Unlock the resume, LinkedIn channel, and replay action.

## Interaction state machine

`briefing → discovery → diagnosed → deploying → rag-live → incident → mitigating → signoff → signed`

Every state owns:

- available terminal commands;
- architecture nodes and health classes;
- telemetry values;
- guided primary action;
- copy explaining the engineering decision.

Invalid terminal commands fail visibly and explain what is available in the current state.

## Automated walkthrough script

| Time | Beat | System behavior | Recruiter takeaway |
| --- | --- | --- | --- |
| 0:00 | Incident loaded | Monolith and downtime warning appear | The experience begins with pressure, not biography |
| 0:02 | Diagnostics | Dependency trace and bottleneck logs stream | Ahamed discovers before prescribing |
| 0:05 | RAG deployment | Architecture expands into modern services | He owns architecture, implementation, and verification |
| 0:09 | Incident | Third-party API returns HTTP 429 | The happy path is deliberately broken |
| 0:11 | Mitigation | Three agents coordinate queueing and replay | Agentic AI is bounded by policy and acceptance criteria |
| 0:15 | Stabilization | SLA and health indicators turn green | Outcomes are measured and made legible |
| 0:17 | Handoff | Recruiter signs and unlocks the clearance profile | Conversion is part of the narrative |

## Recommended production stack

### Experience layer

- React and TypeScript for the state machine and deterministic interaction model.
- React Flow (`@xyflow/react`) when the topology needs free pan, zoom, selectable nodes, custom edges, and larger graphs.
- Xterm.js (`@xterm/xterm`) when the console should support ANSI sequences, keyboard modes, link detection, and a real process stream.
- Zustand or an explicit reducer for session state, action history, replay, and URL-safe checkpoints.
- Motion One or Framer Motion for graph transitions, node re-parenting, and incident choreography.

### Runtime layer

- Cloudflare Workers for the public session API and zero-cold-start interaction endpoints.
- Durable Objects when sessions need coordinated server state, multiplayer observers, or replayable event streams.
- WebSockets for live terminal events; Server-Sent Events are sufficient for a one-way automated walkthrough.
- D1 for anonymized simulation runs and contact consent records.
- Resend or Postmark for a real `/hire` endpoint. Never imply that a message was sent until the provider confirms delivery.

### Quality and observability

- Vitest for state transitions and command parsing.
- Playwright for the complete recruiter journey, keyboard paths, and responsive layouts.
- Axe for automated accessibility checks.
- Sentry for client/runtime errors and trace correlation.
- PostHog for privacy-conscious funnel events: session started, diagnostics run, strategy selected, SLA opened, handoff generated.

## Visual direction

`Cyberpunk enterprise`, not neon decoration:

- near-black graphite panels;
- restrained lime, cyan, amber, and incident red;
- dense information hierarchy with generous outer space;
- thin infrastructure lines and deterministic packet motion;
- real operational language instead of sci-fi filler;
- typography split between a neutral grotesk and a precise mono;
- all metrics labeled as simulated unless backed by the resume.

## Implementation note

The shipped portfolio uses native React components and CSS for the console and topology to keep the initial bundle small and deterministic. React Flow and Xterm.js are the recommended upgrade path when real server-streamed sessions, pan/zoom diagrams, or process-backed terminals are introduced.