David Wolf · Project Use Case
AI SECURITY · PRODUCT SECURITY · INTERNAL PRODUCT
Internal Product
Schema-Driven AI Workspace & Newtab Platform
A browser-native AI workspace using schema-rendered panels, Preact/React UI surfaces, data-driven tool registries, Chrome extension newtab/sidepanel UX,...
Designed and implemented a schema-driven AI workspace across Chrome extension newtab and sidepanel surfaces, using a pure-data panel registry, config-driven rendering, Preact/React components, local-first state, tool panels, AI...
Client
Internal Product / Confidential Platform
Engagement Type
Internal product buildout
Period
2025–2026
Role
Principal Architect / Product Architect / Browser Extension UI Engineer
Focus Areas
Schema-Driven UI, Chrome Extension Newtab, Chrome Extension Sidepanel, Preact/Vite
The Research Narrative
Strategic Problem
The challenge was scale. Every tool could not become a hand-coded page. The product needed many panels, actions, fields, metrics, and workflow surfaces without multiplying UI code or creating inconsistent...
What David Did
David designed a pure-data panel registry and SchemaPanel renderer. Panel definitions describe structure, actions, fields, and visual patterns, while the renderer turns them into...
What Became Clearer
The result is a scalable AI workspace architecture: low-bloat, schema-driven, local-first, and designed for fast expansion. It shows how David turns complex AI automation into usable...
Consulting Proof
This is evidence of turning messy security telemetry into explainable dashboards, alert-quality improvements, and executive-ready operating views.
The Context
A browser-native AI product needs a real workspace, not a pile of disconnected popups. The newtab and sidepanel became the operating surface for tools, chat, integrations, dashboards, and workflow state.
The Challenge
The challenge was scale. Every tool could not become a hand-coded page. The product needed many panels, actions, fields, metrics, and workflow surfaces without multiplying UI code or creating inconsistent experiences.
What I Did
David designed a pure-data panel registry and SchemaPanel renderer. Panel definitions describe structure, actions, fields, and visual patterns, while the renderer turns them into consistent Preact/React UI.
- •Designed a schema-driven UI architecture where tool panels are defined as pure data rather than custom pages
- •Built a panel registry containing structured definitions for tool panels, actions, groups, fields, charts, sections, integrations, and workflow surfaces
- •Implemented a SchemaPanel renderer that converts registry definitions into interactive UI components
- •Used Preact and Vite for the Chrome extension newtab surface to keep the browser UI fast and lightweight
- •Designed a React port path for reuse inside the Next.js web app and broader product workspace
- •Used shared UI primitives, tokenized styling, glass-style surfaces, Lucide icon mappings, and Tailwind-compatible layout patterns
- •Created newtab and sidepanel surfaces for AI chat, integrations, job intelligence, pipeline workflows, dashboards, and user tools
- •Kept the registry pure-data so new panels could be generated, edited, versioned, and validated independently from renderer code
The Outcome
The result is a scalable AI workspace architecture: low-bloat, schema-driven, local-first, and designed for fast expansion. It shows how David turns complex AI automation into usable product surfaces rather than backend-only demos.
Research Outcomes
Signal Quality
Improved the trustworthiness of operational security signals
Operational Clarity
Translated complex security data into clearer operating views
Executive Visibility
Built dashboards leaders could trust for decision-making
Operational Impact
Turned raw telemetry into actionable security intelligence
Capabilities Demonstrated
Dashboard Development
Operational and executive views
Operational Reporting
Actionable views for security operations
Security Analytics
Signal investigation and event analysis
IAM / Access Control
Identity telemetry and access insights
SIEM Alert Debugging
Noise reduction and signal validation
Executive Reporting
Security data translated for leadership
Telemetry Normalization
Consistent and trusted data
Public-Safe Evidence
Shareable insights without sensitive data
Key Deliverables
- •Schema-driven AI workspace architecture
- •Chrome extension newtab UI surface
- •Chrome extension sidepanel UI surface
- •Pure-data panel registry
- •SchemaPanel renderer
- •Preact/Vite extension implementation
- •React/Next.js port strategy
- •Tool-panel configuration model
Tools & Technologies
Consulting Translation
The reusable pattern is not Disney-specific: normalize fragmented security telemetry, debug low-signal alert behavior, build trusted operating views, and give leadership evidence they can act on without exposing sensitive systems.