TwinCity UI — Digital Twin Ops Console
Product proof surface TwinCity UI leads with the working spatial operations console: synthetic event replay, dispatch queues, readiness checks, report exports, and handoff surfaces. Commercial exploration is limited to the private inquiry lane listed in the service manifest.
Next.js (React/TypeScript) operations console for spatial event management. Overlays zones and events on a floorplan, connecting the spatial view to the full operator workflow: ingest, normalization, triage, dispatch, SLA reporting, and shift handoff.
Technical review pack: `docs/architecture-pack.md`
System Overview
| Lens | Decision signal |
|---|---|
| Users | Facilities, city operations, and industrial command centers that need spatial incidents, dispatch, and SLA evidence in one console. |
| Product proof | The demo, workflow loop, and static proof surface show the current product direction without production or customer claims. |
| Review proof | /api/proof-route-map, /api/health, /api/meta, runtime scorecard, reports, and screenshot evidence create a fast evaluation path. |
| Safety posture | Demo-mode defaults, trust-boundary metadata, normalized ingest, and explicit fallback behavior keep the public surface understandable and low-risk. |
Evaluation Path
- Start here: Use
/api/proof-route-map, then open/eventsand/reports. - Local demo: Run
npm ci && npm run dev, then openhttp://127.0.0.1:3000/events. - Checks: Run
npm run test:prooffor proof routes ornpm run verifyfor the full gate.
Architecture Notes
- Review guide summarizes the system scope, first files to inspect, verification commands, and known boundaries.
- Quality notes lists the local checks, CI surface, and release expectations for this repository.
- Enterprise readiness notes outlines security, data, operations, integration, and handoff expectations.
Product capabilities
- End-to-end operator UX: live/history views, filters, detail panel, action timeline, list/map/detail sync
- Transport fallback chain: WebSocket -> SSE -> HTTP polling with auto-retry
- Event normalization: inconsistent provider payloads -> single
EventItemschema - Spatial mapping: percent/world/bbox -> normalized coordinates with camera homography support
- Reporting: SLA summary, dispatch board, shift handoff, export routes
Quick start
npm ci
npm run dev
Open http://127.0.0.1:3000/events.
Walk Through This First
If you only have a minute, use this order:
/api/proof-route-map— pick the right first proof lane before opening the full console/api/health— confirm whether the console is in demo mode or attached to live ingest/api/meta— read the trust boundary and evidence bundle/api/runtime-scorecard— inspect ingest posture and SLA summary together/reports— see the dispatch, handoff, and export surfaces that make the operator story concrete
Public review surface
- Public Pages overview:
https://twincity-ui.pages.dev - The public site is a recorded, synthetic review surface with console evidence and architecture notes.
- Run the repository locally for interactive routes and API responses.
Verify
npm run test:proof
npm run verify
Key routes
/events- Main operator console/reports- SLA, dispatch, handoff, export/api/health- Ingest mode + readiness/api/proof-route-map- Front-door operator route chooser/api/meta- Trust boundary + evidence bundle/api/runtime-scorecard- Ingest posture + SLA snapshot/api/public-apis- Korean public API enrichment readiness/api/reports/summary- Deterministic SLA summary/api/reports/dispatch-board- Attention / dispatch / resolved queues/api/reports/handoff- Next-shift digest + overdue risk/api/reports/export- JSON / CSV report export
Live sources (optional)
Create .env.local from .env.local.example:
NEXT_PUBLIC_EVENT_WS_URL=wss://example.com/events
NEXT_PUBLIC_EVENT_STREAM_URL=https://example.com/events/stream
NEXT_PUBLIC_EVENT_API_URL=https://example.com/events
NEXT_PUBLIC_EVENT_POLL_MS=5000
Without live sources, the app runs in demo mode with mock data.
Optional Korean public-data enrichment is exposed through /api/public-apis. The readiness registry is aligned with public-apis-4Kr and checks for server-side provider secrets such as SEOUL_OPEN_DATA_API_KEY, KMA_API_KEY, AIRKOREA_API_KEY, and PUBLIC_SAFETY_API_KEY without returning secret values.
Mock endpoints
GET /api/mock/events?shape=a&count=4GET /api/mock/events?shape=b&count=4GET /api/mock/events?shape=singleGET /api/mock/events?shape=edge&count=4
Docs
docs/LIVE_INTEGRATION.md- Payload examples + transport fallbacksdocs/ops/RUNBOOK.md- Operator/release guidancedocs/ops/POSTMORTEM_TEMPLATE.md- Incident follow-up template
Current limitations
- Demo mode doesn't cover auth, backpressure, or central persistence
- Reports summarize browser-local state, not a central store
- 3D routes are experimental, not production-grade
Next
- Deeper report aggregation beyond handoff + replay
- More adapters for edge-device / VLM payload variants
- Better calibration tooling for camera homography
Cloud + AI Architecture
- Cloud + AI architecture blueprint
- Machine-readable architecture manifest
- Validation command:
python3 scripts/validate_architecture_blueprint.py
Enterprise Productization
- Product operating model defines the product scope, trust boundary, operating checks, and service path for this repository.
System Architecture
- System architecture maps the runtime boundary, data/control flow, cloud or local deployment surface, and operating assumptions for this repository.
Service Architecture
- Service architecture defines the cloud resources, account information, cost controls, and production guardrails needed to turn this repo into a scoped service without publishing public financial assumptions.
Search And Service Surface
- Public entry: public demo with synthetic city/facility events
- Paid boundary: Architecture Scope Sprint
- Canonical URL: https://twincity-ui.pages.dev/
- Lead capture: https://kim3310-doeon-kim-portfolio.pages.dev/?offer=twincity-ui&inquiry=architecture-scope-sprint#private-inquiry
- Resource route: https://kim3310-doeon-kim-portfolio.pages.dev/resources/twincity-ui/
- Commercial route: https://kim3310-doeon-kim-portfolio.pages.dev/?offer=twincity-ui#service-offers
- Machine-readable offer: docs/service-offer.json
- Search growth implementation: docs/search-growth-implementation.md
- Revenue architecture: docs/revenue-architecture.md