Pillar 01 · Map
Mapping layer
Live incident visualisation with interactive markers. Clusters, priority colour coding, distance maths, optimised marker recycling for high-frequency updates.
Work / AI · Agents / CityGuard Response Hub
No. 23 · NDA · Urban Crisis Response
One screen.
One truth.
Calls cannot wait.
When 112 (the Indian 911) gets a call, dispatchers juggle four screens, three radios and two databases. The call is queued. Lives are queued. CityGuard fuses calls, units and incidents into a single live map · one operator surface, one source of truth, one keyboard.
1Operator surface · not four
AAAWCAG 2.1 contrast & targets
⌘Keyboard-first dispatch
AISub-second tactical plan
NDASource · private engagement
Act I · The Dispatch Floor
A 112 dispatcher's day, at this moment.
An emergency call arrives. The clock starts. Every second between "hello" and "unit en route" is paid in someone else's life.
Before · Status quo
Four screens. Three radios. Two databases.
- CAD console for incident logging
- GIS map for unit locations
- Roster spreadsheet for who's on shift
- Phone for callers, radio for units
- Memory for "what did the supervisor decide last hour"
- Stress for the rest
After · CityGuard
One screen. One feed. One AI tactical plan.
- Live map renders incidents in priority order
- Keyboard-first navigation through the queue
- Two-step dispatch · select, then request the plan
- Sub-second AI plan with units, route and protocol
- Persistent audit log · operator and timestamp on every decision
- One pair of hands, full situational awareness
Act II · The Four Pillars
Four capabilities, one operational reality.
No mocks. No fakes. Each layer does exactly one job, and every job is load-bearing. Vendor specifics redacted under client NDA.
Pillar 02 · AI
AI tactical engine
Sub-second response plan generation. Units to dispatch, route to take, protocol to follow, hazards to flag. Streamed straight to the command panel.
Pillar 03 · Auth + DB
Auth + persistence
Single sign-on for dispatchers, real-time persistent incident state. Every decision carries operator and timestamp · ready for after-action review.
Pillar 04 · Telemetry
Production telemetry
Usage, performance, and accessibility insights. Core Web Vitals measured live in production, not just in CI.
Act III · The Hot Workflow
From feed to dispatched plan, without leaving the keyboard.
The keyboard is faster than a mouse. CityGuard's hot path is tuned for it. Every interaction has a key. Every shortcut works alone. Exact bindings redacted under client NDA.
Step
Step through the live incident feed in priority order.
instant
Select
Lock onto an incident. The map flies, the side-panel hydrates, ARIA announces.
live region
Plan
Request tactical AI response plan. Streams units, routes, protocols.
sub-second
Exit
Deselect, return focus to the feed. Never traps. Never breaks.
no trap
Help
Surface the full keyboard shortcuts dialog on demand.
a11yAct IV · The Standards
Targeting 100% on every parameter.
Hitting it on most.
Code qualityStrict
Strict TypeScript · JSDoc · zero any
SecurityHardened
XSS prevention · input validation · rate limiter · CSP nonce
EfficiencyTuned
Object pooling · Web Vitals · lazy loading · stale-while-revalidate
TestingFull · 0 mocks
Unit · integration · workflow · accessibility · zero mocks
AccessibilityWCAG AAA
7:1 contrast · 48px targets · roving tabindex · live regions
SourcePrivate
Repository private · vendor specifics under client NDA
Act V · Proof
Production-grade from day one.
Real services · zero mocking
Production-grade test suite. Workflow tests for dispatch, integration tests for module interactions, dedicated accessibility coverage · all exercising real services in CI.
Responsive: phone, tablet, desktop, 4K
Mobile uses bottom-tab navigation with safe-area support for notched devices. Tablet shifts to two-column. Desktop opens the full three-column command-centre layout.
Tuned for high-frequency map updates
Marker recycling prevents GC stutter under heavy live traffic. Memory and frame timing monitored with custom marks.
Built to a brief, not to a demo
Delivered for a private engagement against a strict operator-experience brief. No any, no mocks, no shortcuts. Source and vendor specifics held under NDA.
The Stack · high-level
Modern web platform. One TypeScript codebase.
High-level only. Specific vendors, services, and library versions are held under client NDA.
- React
- TypeScript strict
- Vite
- Tailwind CSS
- Vitest
- Web Vitals
- CSP nonce
If a 112 dispatcher can ship plans without leaving the keyboard, your operators can too.
I build operator-first dashboards that respect the keyboard, the screen reader, and the second hand of the clock. If your team's surface is too wide, talk to me.