Authenticating...
CTO PLATFORM BLUEPRINT
Platform Evolution
From static modules to a dynamic business operating system. This is the CTO's build plan — architecture, investment, phases, and decisions tracked in one place.
Total Investment
$140K
100 dev-days / 16 weeks
Blended Rate
$175/hr
Full-stack + AI
Current Phase
Planning
Architecture decisions
Modules Today
19
Live on platform
The Vision
The PrimeLedger platform today is 19 static HTML modules connected by a shared nav bar. Each module is standalone with inline CSS and JavaScript. This architecture got us from zero to a working internal platform in record time.
The next phase demands something fundamentally different. The platform becomes a dynamic model of the business itself — where every team member sees a personalized operating environment shaped by their role, data, objectives, and decisions.
From → To
Static HTML pages with hardcoded nav
→
Dynamic app launcher with role-configured workspace
Same view for everyone (hidden by RBAC)
→
Personalized dashboards with role-specific widgets
Data fetched on each page load
→
Unified data layer with real-time streaming
19 isolated modules
→
Composable widget system with cross-module data flow
Tier-based show/hide
→
Role-based config: what you SEE, not just what you CAN see
Nav bar = information architecture
→
App launcher = personalized operating environment
Strategy lives in CLAUDE.md
→
Strategy cascade is live data, connected to execution
Design Principle: Every screen should answer one question — what do I need to know or do RIGHT NOW? The platform surfaces signal, suppresses noise, and presents decisions — not data.
The Shell
Replace the current homepage grid with a Shell — a persistent app frame that owns authentication, navigation, theming, notifications, and the widget layout engine. Modules become micro-apps that mount inside the Shell.
Shell Responsibilities
- Authentication — Google SSO flow, session management, token refresh. One login, persistent across all modules.
- App Launcher — Role-configured grid, ordered by usage frequency, with AI-suggested modules.
- Widget Canvas — Configurable grid where users pin widgets from any module. Drag-and-drop, saved per-user.
- Notification Rail — Real-time alerts from all data sources.
- Command Palette — Keyboard-driven search across all modules, data, and actions.
- Theme Engine — Dark/light toggle plus per-module accent colors.
Technology Stack
Shell FrameVanilla JS + Web ComponentsApp chrome, auth, routing, layout engine
Module LoaderDynamic import() + manifestLazy-load module code on demand
Widget SystemCustom Elements (Shadow DOM)Encapsulated UI units, no CSS bleed
Data BusEventTarget + BroadcastChannelCross-widget pub/sub communication
State StorelocalStorage + IndexedDBPreferences, cached data, offline support
Real-timeServer-Sent Events (SSE)Push updates from serverless functions
No React. No Vue. Vanilla JS with Web Components for widget encapsulation. Each widget is a Custom Element (<pl-pipeline-summary>, <pl-burn-rate>) with native Shadow DOM isolation.
The Role Engine
Today RBAC controls access. The Role Engine controls configuration. Two people with the same tier see completely different dashboards.
| Field | Type | Example |
|---|---|---|
role_id | string | cto | ceo | coo | director_ops | advisor |
pillar | enum | technology | growth | operations | revenue |
tier | integer | -1 (CTO) through 5 (Default) |
home_widgets | array | [burn-rate, pipeline-summary, team-status] |
nav_order | array | [command-center, dashboard, roadmap, team] |
kpi_targets | object | { deploy_frequency: 5/week, uptime: 99.9 } |
data_feeds | array | [mercury, github, hubspot, google-calendar] |
alert_rules | array | [{ source: mercury, condition: balance < 50000 }] |
ai_context_block | ref | Link to CLAUDE-MEMORY-BLOCK |
decision_authority | object | { spend_limit: 5000, hire: false } |
The Widget System
Every piece of information visible to a user is rendered by a widget. Widgets are self-contained and composable.
| Category | Example Widgets | Data Source |
|---|---|---|
| Financial | Burn rate, runway, cash position, revenue forecast | Mercury + HubSpot |
| Pipeline | Deal stage summary, top 10 deals, conversion rate | HubSpot CRM |
| Engineering | Commit velocity, deploy frequency, PR cycle time | GitHub API |
| Team | Org chart, headcount, open roles, onboarding | Google Admin |
| Strategic | OKR progress, pillar health, North Star metrics | Internal DB |
| Calendar | Today's meetings, prep needed, deadlines | Google Calendar |
| Comms | Email triage summary, unread count, flagged items | Gmail API |
| Security | Health score, active sessions, compliance | Permissions DB |
| AI Insights | Suggested actions, risk alerts, opportunity flags | AI Engine |
Widget Contract
// Every widget implements this interface
{
register() → { name, sizes, dataDeps, refreshInterval, minTier }
mount(el, cfg) → Renders into DOM element with role config
update(data) → Incremental render from data bus event
unmount() → Cleanup: listeners, timers, resources
export() → Current state as structured data
}
The Data Layer
- Data Connectors — One adapter per system (Mercury, HubSpot, GitHub, Google). Each normalizes to standard schema.
- Refresh Scheduler — Mercury 5 min, HubSpot 15 min, GitHub 10 min, Calendar 2 min.
- Cache Layer — IndexedDB for offline access. Stale-while-revalidate.
- SSE Push — High-priority updates pushed via Server-Sent Events.
- Data Classification — Every data point carries VERIFIED / INFERRED / UNVERIFIED tier.
AI Integration Layer
- Insight Widget — AI surfaces top 3 action items from user's data feeds.
- Smart Triage — AI-scored priority feed per user's role and objectives.
- Decision Support — Contextual AI when viewing deals, reports, approvals.
- Report Generation — AI drafts weekly status via SMART workflow. Human approves.
Privacy Model: What Flows Up
Individual → Manager
KPI progress, completion rate, blockers, decisions
Manager → Pillar
Team velocity, utilization, risk summary, opportunities
Pillar → Company
Health score, North Star contribution, alignment grade
Email content, personal notes, browsing stay private. Always.
Module Evolution Map
Every existing module gets a path forward — nothing thrown away. Modules become hosts for composable widgets.
| Module | Evolution | Widgets Extracted |
|---|---|---|
| Dashboard | Default home canvas, widgets for any role | burn-rate, cash-position, pipeline-summary, calendar-today |
| Command Center | CTO home canvas, engineering widgets | commit-velocity, deploy-health, roadmap-progress |
| Cap Table | Standalone (complex). Summary widget. | equity-summary, dilution-snapshot |
| Reports | Module stays. Cards become widgets. | report-status, approval-queue |
| Team | Module stays. Health widgets extracted. | headcount, onboarding-status, org-chart-mini |
| Strategy | Cascade visualization. OKR widgets. | okr-progress, pillar-health, north-star-metric |
| Roadmap | Module stays. Progress widgets. | roadmap-progress, initiative-status |
| Permissions | CTO-only stays. Security widget. | security-health, active-sessions |
| Email Triage | Per-user AI widget on own inbox. | triage-summary, priority-inbox |
| Status Reports | AI auto-generated. Widget for controls. | weekly-status, pillar-rollup |
| Pipeline | Revenue-role widget set. | deal-pipeline, revenue-forecast, top-deals |
Role-Based Views
Pre-configured home canvases — users rearrange but can't exceed tier. Switch roles below to see each experience.
Technology & Innovation
Commit Velocity
47 +12%
30-day trend
Deploy Health
98.2%
Success rate
Roadmap Progress
6/14
Initiatives complete
Security Health
92
Score / 100
Pipeline
$1.2M
Weighted value
Team
12
Active members
AI Insight: Top 3 Actions
1. Review PR #47 (3 days open) • 2. Security audit overdue 5d • 3. Mercury below $50K threshold
Value Creation & Growth
Pipeline by Stage
$3.4M
Total pipeline
Cash Position
$284K
Mercury live
North Star
72%
To target
Investor Update
8 days
Until due
OKR Progress
4/4
Pillars reporting
Board Prep
3/7
Materials ready
Operational Excellence
Ops KPIs
87%
On-target
Vendor Payments
2 due
This week
Onboarding
1 active
Day 14/90
Data Health
94%
CRM completeness
Compliance
11/12
Checklist items
Utilization
78%
Team avg
Board View — Read-only
Company Health
87/100
Composite
North Star
72%
Annual target
Cap Table
3 classes
Common, Pref A, Options
Pipeline
$3.4M
Weighted
Board Report
Q1 2026
Published Mar 1
Data Room
14 files
Updated 3d ago
Implementation Phases
Four phases, each ships usable value — no big-bang rewrite.
Wk 1
Wk 2
Wk 3
Wk 4
Wk 5
Wk 6
Wk 7
Wk 8
Wk 9
Wk 10
Wk 11
Wk 12
Wk 13
Wk 14
Wk 15
Wk 16
Phase 1
Planning
Phase 2
Phase 3
Phase 4
Shell MVP
2 modules migrated
Data layer live
20+ widgets
AI insights live
Auto status reports
Command palette
Full launch
Phase 1: Foundation
Phase 2: Data & Widgets
Phase 3: AI
Phase 4: Polish
Phase 1: Foundation (Weeks 1–4)
Shell, Widget Contract, Role Engine. Migrate 2–3 modules as proof of concept.
| Task | Effort | Deliverable |
|---|---|---|
| Shell frame (auth, routing, theme, layout) | 5d | SPA shell with dynamic module loading |
| Widget Contract + base class | 2d | Web Component base with standard lifecycle |
| Role Engine (DB + API + client) | 3d | role_profiles table, /api/role, client store |
| Data Bus | 2d | EventTarget + BroadcastChannel pub/sub |
| Migrate Dashboard | 4d | 5 widgets extracted |
| Migrate Command Center | 4d | 5 widgets extracted |
| CI/CD + Tests | 3d | GitHub Actions, Vitest, Playwright |
23 days / $32,200
Phase 2: Data & Widgets (Weeks 5–8)
Data Layer, all widget types, per-user configuration.
| Task | Effort | Deliverable |
|---|---|---|
| Data Connectors (4 systems) | 6d | Normalized adapters with caching |
| Refresh Scheduler + SSE | 3d | Configurable polling + push |
| IndexedDB cache | 2d | Offline, stale-while-revalidate |
| Widget library (20+) | 8d | Full catalog from evolution map |
| User preferences API | 2d | Arrangement, nav order saved |
| Migrate remaining modules | 6d | All 19 in shell |
| Data classification badges | 2d | V/I/U visual indicators |
29 days / $40,600
Phase 3: AI & Intelligence (Weeks 9–12)
Federated AI: per-user surfaces, insights, report automation.
| Task | Effort | Deliverable |
|---|---|---|
| AI Insight Widget | 5d | Top-3 actions from data feeds |
| Smart Triage | 4d | AI-scored priority feed |
| Decision Support overlay | 4d | Side-panel AI on data views |
| Auto status reports (SMART) | 5d | Draft → approve → cascade |
| Upward reporting pipeline | 4d | Metrics with privacy boundaries |
| Context block enforcement | 3d | Onboarding gate for AI |
25 days / $35,000
Phase 4: Polish & Scale (Weeks 13–16)
Command palette, notifications, performance, advisor portal, docs.
| Task | Effort | Deliverable |
|---|---|---|
| Command Palette | 3d | Global search + actions |
| Notification Rail | 3d | Priority-filtered alerts |
| Advisor/Board portal | 3d | Curated read-only view |
| Performance optimization | 3d | Sub-2s load |
| TypeScript migration (API) | 5d | Type-safe functions |
| Documentation | 3d | Widget dev guide, schema docs |
| Load test + security audit | 3d | E2E suite, pentest plan |
23 days / $32,200
Investment Summary
Phase 1
$32.2K
Wk 1–4 • 23 days
Phase 2
$40.6K
Wk 5–8 • 29 days
Phase 3
$35.0K
Wk 9–12 • 25 days
Phase 4
$32.2K
Wk 13–16 • 23 days
Total: $140,000 • 100 dev-days • 16 weeks • $175/hr blended
Usable after Phase 1. Powerful after 2. Intelligent after 3. Polished after 4.
Usable after Phase 1. Powerful after 2. Intelligent after 3. Polished after 4.
Build vs. Buy
| Approach | Cost | Timeline | Risk |
|---|---|---|---|
| Evolve codebase (this plan) | $140K | 16 weeks | Low |
| Rewrite (Next.js/React) | $280K–$400K | 6–9 months | High |
| Buy SaaS | $60K–$120K/yr | 4–6 weeks | Medium |
| Hybrid | $100K–$160K | 12–16 weeks | Medium |
Success Metrics
| Phase | Metric | Target |
|---|---|---|
| P1 | Time to first meaningful screen | < 2s |
| P1 | Files to add a new module | 1 (manifest) |
| P2 | API calls on initial load | < 5 |
| P2 | Data freshness (worst stale) | < 15 min |
| P3 | Auto-generated status reports | > 80% |
| P3 | Decision context load time | < 3s |
| P4 | Lighthouse performance | > 90 |
| P4 | E2E test coverage | > 70% |
| All | Daily active usage | > 80% |
Architecture Decisions
Key technical choices that need CTO sign-off. Add notes, change status, track rationale.
No React / No Frameworks
REVIEWING
Zero-framework is a competitive advantage: <30s deploys, zero build failures, zero dependency vulns, anyone can read the code. Web Components provide the same encapsulation natively. Revisit if team grows past 8–10 devs.
Web Components for Widget System
REVIEWING
Native standard. No build step. Shadow DOM isolation. Works with any future framework. Widget contract maps directly to Custom Element lifecycle.
SSE over WebSockets
REVIEWING
Standard HTTP, Vercel-native, unidirectional (matches our pattern), auto-reconnect built in. WebSockets only needed for real-time collaboration (not on roadmap).
IndexedDB for Cache Layer
REVIEWING
Structured data, >5MB, async. localStorage stays for simple flags (theme, auth). IndexedDB for API cache and widget state.
Evolve Codebase (vs. Rewrite or Buy)
REVIEWING
$140K / 16 weeks / Low risk. Zero-framework architecture, custom RBAC, AI governance, and per-user context model are competitive advantages lost in any buy/rewrite.
Strategic Alignment
- Strategic Cascade — Widget system + role engine = Company → Pillar → Individual with live data.
- Federated AI Network — Per-user AI in Phase 3, privacy via data bus.
- Per-User Context Block — Role Engine schema maps to 7-section block. Enforced at onboarding.
- SMART Workflow — Sense → Map → Act → Report → Tune as widget lifecycle events.
- Three Skills — Role Playbook = profile. Comms Style = AI tone. Alignment = OKR widgets.
- Phased Rollout — P1 = co-founders. P2 = directors. P3 = full org.
- Decision Authority — Role profiles include decision_authority. AI checks before recommending.
The platform evolution is not separate from the business strategy. It IS the business strategy made executable.