
Visual Html Gen Ui
- 3 installs
- 8 repo stars
- Updated May 15, 2026
- ifuryst/visual-html-gen-ui
Provides standalone, self-contained HTML chart examples across domains like finance and health to adapt into data-rich UI without loading a chart library.
About
Provides a catalog of standalone HTML chart examples organized by domain (finance, office, health, ecommerce, gaming, and more) using inline CSS and SVG. A developer uses it as visual references to adapt into data-rich product screens, dashboards, and reports without loading a large chart library into context.
- Domain catalog of standalone HTML chart examples (finance, health, gaming, more)
- Self-contained inline CSS + SVG references to adapt into product screens
Visual Html Gen Ui by the numbers
- 3 all-time installs (skills.sh)
- Ranked #1,550 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 2, 2026 (Skillselion catalog sync)
npx skills add https://github.com/ifuryst/visual-html-gen-ui --skill visual-html-gen-uiAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 3 |
|---|---|
| repo stars | ★ 8 |
| Last updated | May 15, 2026 |
| Repository | ifuryst/visual-html-gen-ui ↗ |
What it does
Provides standalone, self-contained HTML chart examples across domains like finance and health to adapt into data-rich UI without loading a chart library.
Files
Visual HTML Gen UI
Use this skill when you need a standalone HTML chart example for a specific product domain. Start here, choose the relevant domain and chart, then open only that chart's HTML file.
The examples are self-contained HTML documents using inline CSS and SVG. They are intended as visual references that agents can adapt into product screens, reports, dashboards, and deliverables.
How To Use
1. Pick the domain that matches the user's problem. 2. Open the linked chart file, not the whole skill directory. 3. Reuse the chart structure, labels, spacing, and interaction pattern as a starting point. 4. Replace sample data, copy, and colors with project-specific values.
Domain Catalog
Finance
Capital markets, investment research, portfolio analytics, risk, and private-market operating metrics.
- Line Chart - Show price, NAV, revenue, or macro trend changes over time.
- Area Chart - Emphasize accumulated scale such as AUM, deposits, or net inflows.
- Grouped Bar Chart - Compare multiple companies, quarters, or scenarios side by side.
- Stacked Bar Chart - Break revenue, holdings, or portfolio exposure into components.
- Donut Allocation - Summarize asset allocation, sector weight, or capital deployment.
- Risk Return Scatter - Position strategies or assets by volatility and return.
- Valuation Bubble - Compare valuation, growth, and market capitalization in one view.
- Sector Rotation Heatmap - Track sector strength, factor rotation, or weekly flows.
- Market Map Treemap - Show market capitalization or portfolio weight by company and sector.
- Candlestick Chart - Display OHLC market action for trader-facing views.
- Depth Chart - Visualize bid and ask liquidity around the current price.
- Drawdown Chart - Expose peak-to-trough losses for a fund or strategy.
- Equity Curve - Show cumulative strategy or fund growth over time.
- Rolling Sharpe - Track risk-adjusted return quality through time.
- Efficient Frontier - Compare portfolio choices by expected return and volatility.
- Monte Carlo Fan - Present a range of possible future portfolio paths.
- Deal Funnel - Summarize VC or lending pipeline conversion by stage.
- Capital Flow Sankey - Show how capital moves between sources, vehicles, and uses.
- Correlation Matrix - Expose relationships between assets, factors, or sectors.
- Factor Exposure - Show portfolio sensitivity to value, momentum, quality, and size.
- Risk Attribution - Break total risk into sector, factor, security, and currency drivers.
- Waterfall Profit Bridge - Explain movement from revenue to net income or EBITDA.
- Tornado Sensitivity - Rank model assumptions by effect on valuation or IRR.
- Company Score Radar - Score a company or fund across multiple qualitative dimensions.
- Trading Calendar Heatmap - Show daily returns, trading activity, or cash movement intensity.
- Yield Curve - Display rates across maturities for macro and fixed-income analysis.
- Cap Table - Present ownership, share classes, and dilution after financing.
- Capital Cohort Retention - Analyze customer or portfolio cohort quality over time.
- Unit Economics - Compare CAC, LTV, payback, gross margin, and burn efficiency.
- VaR Stress Test - Show expected loss bands under normal and stressed scenarios.
Office
Workplace productivity, meetings, task execution, communication, approvals, and team operations.
- Meeting Load Timeline - Track recurring and ad hoc meeting load against protected focus time.
- Task Status Stacked Bar - Break internal operating queues into done, active, blocked, and waiting states.
- Workspace Calendar Heatmap - Reveal high-pressure days where reviews, deadlines, and handoffs collide.
- Email Response Funnel - Track high-priority announcements from sent to resolved follow-up.
- Document Flow Sankey - Visualize policy or operating documents moving through owner, review, approval, and rework paths.
- Team Capacity Bars - Compare available hours, committed work, and interruptions by team.
- Approval Waterfall - Explain business days added by manager, legal, finance, and executive gates.
- Workspace Utilization Heatmap - Show room, desk, and focus-space usage by daypart.
- Knowledge Base Treemap - Map documentation coverage, stale-doc risk, and ownership gaps by operating area.
- Workload Risk Radar - Score operating risk across urgency, ambiguity, dependencies, load, focus, and morale.
- Decision Latency Control - Monitor decision cycle time against target and escalation limits.
- Dependency Risk Matrix - Map cross-team blockers by requesting team and dependency owner.
- Work Intake Aging Histogram - Show whether requests are aging before they become visible delivery risks.
- Stakeholder Alignment Map - Place stakeholders by support, influence, and affected headcount before a rollout.
Education
Learning progress, classroom operations, curriculum quality, assessment, and student support analytics.
- Learning Progress Line - Track standards mastery growth across a semester and expose plateaus before finals.
- Grade Distribution Bars - Compare proficiency bands across class sections after a shared assessment.
- Mastery Heatmap - Map concept mastery by learner group so teachers can plan reteach blocks.
- Attendance Calendar - Reveal absence, tardy, and participation pressure across a school month.
- Learner Cohort Retention - Track course completion and continued participation by enrollment cohort.
- Curriculum Coverage Treemap - Show instructional time and assessment weight by standards cluster.
- Intervention Funnel - Track students from risk flag to family outreach, tutoring, practice, and recovery.
- Learning Path Sankey - Show learners moving from diagnostic placement through modules, retakes, and outcomes.
- Rubric Score Radar - Summarize writing or project performance across rubric dimensions.
- Assessment Stress Test - Compare expected performance under timed, supported, remote, and advanced assessment conditions.
- Resource Equity Matrix - Compare student need with actual access to teachers, tutoring, devices, and support minutes.
Health
Patient monitoring, care operations, population health, appointment flow, and clinical quality views.
- Vitals Trend Line - Track remote blood pressure readings against escalation thresholds between visits.
- Symptom Severity Area - Show symptom burden after discharge before readmission risk rises.
- Patient Flow Funnel - Summarize emergency department flow from arrival to discharge decision.
- Appointment Calendar - Show clinic appointment load, no-show clusters, and follow-up gaps by day.
- Ward Utilization Heatmap - Reveal inpatient bed and nurse coverage pressure by ward and shift block.
- Care Pathway Sankey - Visualize referral, diagnosis, treatment, follow-up, recovery, and escalation paths.
- Population Risk Scatter - Position patient cohorts by clinical risk, cost, and care-management priority.
- Treatment Response Cohort - Track treatment response and adherence by start-month cohort.
- Clinical Quality Radar - Score clinical quality across safety, access, experience, outcomes, equity, and cost.
- Readmission Stress Test - Compare readmission risk under staffing, follow-up, and surge scenarios.
- Claims Denial Waterfall - Explain billed charges, denial leakage, appeal recovery, and net collection.
Ecommerce
Online retail conversion, merchandising, inventory, customer value, promotions, and fulfillment analytics.
- Revenue Line - Track daily GMV and promotion lift across a campaign window.
- Checkout Funnel - Track shoppers from product view through cart, checkout, payment, and purchase.
- Category Sales Stacked Bar - Break category sales by online, marketplace, and store-assisted channels.
- Product Margin Waterfall - Explain product contribution margin after discounts, fulfillment, returns, and fees.
- Inventory Heatmap - Reveal stockout and overstock risk by SKU family and fulfillment region.
- Shopper Cohort Retention - Track repeat purchase retention by acquisition cohort and first-order channel.
- LTV CAC KPI - Compare LTV, CAC, payback, contribution margin, and repeat rate.
- Basket Affinity Sankey - Show basket paths from anchor products into bundles, add-ons, and repeat purchases.
- SKU Performance Treemap - Map SKU contribution, hero products, and long-tail drag by product family.
- Promo Sensitivity Tornado - Rank discount, free shipping, return rate, and ad-spend assumptions by profit effect.
- Returns Reason Pareto - Prioritize product, fit, logistics, and expectation gaps by return volume.
Social
Community growth, engagement, creator networks, moderation, content propagation, and retention.
- Active Users Line - Track daily active users around launches, notification changes, and creator campaigns.
- Engagement Area - Emphasize accumulated reactions, comments, shares, and saves after content launches.
- Activation Funnel - Track new users from signup through profile setup, first follow, first post, and day-7 return.
- Creator Network Sankey - Show audience movement from creators into topics, communities, follows, and shares.
- Topic Heatmap - Reveal topic momentum by day, community segment, and moderation sensitivity.
- Community Treemap - Map communities by active members, post volume, and moderation workload.
- User Cohort Retention - Track retained users by signup cohort, lifecycle age, and first community joined.
- Influence Bubble - Compare creators by reach, engagement quality, audience size, and trust risk.
- Moderation Waterfall - Explain moderation queue changes from report inflow, automation, review, appeals, and backlog.
- Community Health Radar - Score community health across safety, activity, diversity, creator supply, retention, and trust.
- Moderation Aging Queue - Show trust-and-safety report backlog by age, policy area, and SLA risk.
Entertainment
Streaming, music, film, live events, audience behavior, releases, and catalog performance.
- Viewership Line - Track episode watch time before and after trailer, premiere, and finale drops.
- Catalog Share Donut - Summarize where a featured title's watch starts come from across discovery surfaces.
- Box Office Stacked Bar - Break weekly title demand by search, playlist, and recommendation channels after launch.
- Audience Retention Cohort - Track how catalog, long-tail, prelaunch, launch, and weekly cohorts retain viewers over time.
- Release Calendar Heatmap - Show when catalog refreshes, long-tail pushes, trailers, premieres, and week-one activity collide.
- Genre Momentum Heatmap - Reveal genre demand shifts as a release campaign changes audience attention week by week.
- Playlist Flow Sankey - Show how audiences move from owned channels and ticketing into merch, trailers, shows, and playlists.
- Talent Score Radar - Score talent or titles before greenlight, booking, sponsorship, or cross-promotion decisions.
- Campaign Funnel - Track a title campaign from audience follow-through to trailer exposure, intent, and purchase.
- Title Portfolio Treemap - Map catalog portfolio weight by genre to find hit concentration and underused long-tail shelves.
- Rights Windowing Timeline - Coordinate theatrical, transactional, streaming, and international rights windows.
Gaming
Game telemetry, player progression, economy balance, monetization, matchmaking, and live ops.
- DAU Line - Track daily active players across season launch, finale event, patch, and D7 return windows.
- Level Progression Funnel - Find where new players drop from tutorial completion through first PvP or co-op session and core-loop return.
- Economy Sankey - Visualize premium currency and crafted-item movement between store, crafting, inventory, sinks, and wallet balances.
- Session Calendar - Reveal session intensity around season, finale, patch, event, and retention checkpoints.
- Mode Popularity Stacked Bar - Break engagement mix by boosts, events, and inventory activity across live-ops beats.
- Matchmaking Heatmap - Show friction and quality signals across onboarding, PvP, co-op, store, and guild touchpoints during season beats.
- Player Retention Cohort - Track retention for season, finale, patch, and early lifecycle cohorts through the first week.
- Item Sales Treemap - Map monetization contribution by mode and social surface to separate store demand from gameplay-driven purchases.
- Balance Tornado - Rank tuning variables by expected impact on match fairness, progression speed, and reward pacing.
- Player Segment Radar - Compare target player segments across risk, retention, skill, spend, social behavior, and completion.
- Economy Inflation Band - Track wallet balances and price index against healthy economy bands.
Content Creation
Creator workflow, publishing cadence, audience growth, monetization, editorial planning, and performance.
- Publishing Cadence Line - Track publishing cadence across shorts, long-form, newsletters, and campaign assets.
- Content Pipeline Funnel - Track ideas through brief, draft, edit, review, scheduled, and published steps.
- Channel Mix Donut - Summarize audience reach or revenue by platform, owned channel, and paid surface.
- Audience Growth Area - Emphasize cumulative followers, subscribers, and email capture after launches and collaborations.
- Editorial Calendar Heatmap - Show publishing load, review collisions, and campaign gaps by day.
- Content Performance Treemap - Map views, revenue, and engagement by series or format to reveal hits and long-tail shelves.
- Creator Retention Cohort - Track repeat viewers, subscribers, and paid supporters by acquisition cohort and first content touch.
- Platform Flow Sankey - Show audience movement from discovery platforms into follows, email, community, paid support, and purchase.
- Monetization KPI - Compare RPM, support conversion, paid community mix, payback, and revenue per fan after a campaign.
- Format Score Radar - Score formats across reach, depth, effort, reuse, monetization, and audience fit for editorial planning.
- Sponsorship Pipeline Forecast - Forecast sponsored-content revenue by deal stage, content slot, and close probability.
Enterprise Services
B2B sales, delivery, support, customer success, implementation, and account health analytics.
- ARR Line - Track ARR movement from new logos, expansion, renewals, churn, and contracted backlog across quarters.
- Sales Pipeline Funnel - Track enterprise opportunities from lead through qualification, proposal, procurement, and closed won.
- Implementation Sankey - Show customers moving from kickoff through setup, integration, training, go-live, and support handoff.
- Ticket Heatmap - Reveal support load by severity, product area, and daypart for customer escalations.
- Account Health Radar - Score renewal accounts across adoption, support burden, expansion readiness, sentiment, and risk.
- Service Margin Waterfall - Explain services gross margin from contract value through labor, travel, support, and delivery overrun.
- Customer Retention Cohort - Track logo and revenue retention by contract cohort, renewal quarter, and onboarding path.
- SLA Calendar - Show SLA breaches, incident pressure, and response-risk clusters by day.
- Account Portfolio Treemap - Map revenue and delivery effort by account segment or service line to spot concentration.
- Sales Efficiency KPI - Compare CAC, payback, expansion, win rate, and sales-capacity efficiency for enterprise motions.
- Renewal Forecast Ladder - Separate committed, likely, at-risk, and expansion renewal value by quarter.
Cybersecurity
Threat detection, incidents, vulnerability management, risk posture, response operations, and control health.
- Incident Line - Track confirmed incidents and high-fidelity alerts across releases, campaigns, and response shifts.
- Severity Stacked Bar - Break open findings by severity across endpoint, identity, cloud, and application remediation waves.
- Attack Path Sankey - Show likely attacker movement from phishing or exposed services into lateral movement and data access.
- Vulnerability Heatmap - Map vulnerability risk by asset class, exploitability, and remediation priority.
- Response Funnel - Track alert handling from trigger through triage, investigation, containment, eradication, and closure.
- Asset Risk Treemap - Map residual cyber risk by critical application, host group, and business unit.
- Control Maturity Radar - Score core control maturity across identity, endpoint, network, detection, backup, and training.
- Phishing Calendar - Reveal phishing simulations, reported messages, and training completion pressure by day.
- Risk Reduction Waterfall - Explain residual risk movement from new findings, patches, control improvements, exceptions, and accepted risk.
- Breach Stress Test - Compare estimated loss, downtime, and response capacity under ransomware, data leak, and outage scenarios.
- Vulnerability Aging Burndown - Track whether exploitable findings are aging out before SLA and exception risk rises.
AI Agent
Agent workflows, model performance, tool use, evaluation, cost, latency, safety, and autonomy analytics.
- Task Success Line - Track agent task success rate across eval suites, product releases, and prompt or model changes.
- Latency Area - Emphasize cumulative runtime and cost across planning, tool calls, code execution, browser work, and verification.
- Tool Use Sankey - Show how agent work moves from planning into search, code edits, browser checks, tests, and final verification.
- Eval Heatmap - Map pass rate by task family and capability dimension to expose regressions and coverage gaps.
- Failure Funnel - Track agent failures from detection through reproduction, root cause, fix, rerun, and verified pass.
- Model Cost Scatter - Position model and prompt variants by eval quality, latency, token cost, and production fit.
- Agent Cohort Retention - Track repeat workflow success for task cohorts across agent versions, prompts, and tool policies.
- Capability Radar - Score an agent across planning, tool use, coding, browsing, safety, memory, and verification.
- Token Waterfall - Explain token use from system context, retrieved docs, reasoning, tool output, scratch state, and final answer.
- Safety Stress Test - Compare failure rates under normal, adversarial, long-context, stale-context, and tool-error scenarios.
- Fallback Taxonomy Treemap - Group agent fallbacks by model, tool, policy, environment, and handoff root cause.
Real Estate
Property valuation, leasing, occupancy, market supply, rent, cap rates, and asset operations.
- Price Index Line - Track rent index, achieved rent, and cap-rate pressure across submarkets and lease cycles.
- Occupancy Area - Show leased area and physical occupancy buildup after deliveries, renewals, and move-ins.
- Lease Funnel - Track prospects from inquiry through tour, application, offer, lease signing, and move-in.
- Asset Portfolio Treemap - Map NOI, valuation, and square-foot exposure by asset, submarket, and property type.
- Market Heatmap - Compare rent growth, vacancy, absorption, and concession pressure by market and property type.
- Development Waterfall - Explain development return from land basis through hard costs, financing, lease-up, incentives, and exit value.
- Tenant Cohort Retention - Track tenant renewal, expansion, contraction, and move-out patterns by lease-start cohort.
- Valuation Sensitivity Tornado - Rank value sensitivity to cap rate, market rent growth, vacancy, downtime, and debt cost assumptions.
- Asset Score Radar - Score acquisition or hold decisions across location, income durability, asset condition, tenant quality, liquidity, and risk.
- Cashflow Stress Test - Compare cashflow resilience under vacancy shock, rate reset, construction delay, refinancing gap, and recession scenarios.
- Lease Expiry Ladder - Show upcoming lease expirations by rent exposure, renewal confidence, and vacancy risk.
HR
Workforce planning, recruiting, performance, retention, engagement, compensation, and people operations.
- Headcount Line - Track approved headcount, open requisitions, starts, exits, and hiring-plan variance by month.
- Recruiting Funnel - Track candidates from sourced through recruiter screen, hiring-manager review, onsite, offer, accepted, and start.
- Department Mix Stacked Bar - Break workforce mix by function, level, location, employment type, and manager span.
- Attrition Calendar - Reveal resignation, absence, PTO, and backfill risk patterns by week, month, team, or location.
- Engagement Heatmap - Map survey engagement scores, manager trust, workload, inclusion, and growth sentiment by team.
- Compensation Scatter - Position employees or roles by compa-ratio, pay band, performance, tenure, and equity review priority.
- Promotion Cohort - Track promotion, lateral move, retention, and time-in-level patterns by starting cohort and demographic segment.
- Org Treemap - Map headcount, payroll, manager span, and open requisition load by org unit.
- Performance Radar - Score a team or role family across impact, collaboration, execution, craft, ownership, and growth readiness.
- Workforce Risk Stress Test - Compare staffing resilience under attrition shock, hiring freeze, demand spike, reorg, and skills-gap scenarios.
- Pay Equity Boxplot - Compare compensation distributions by level and cohort before calibration closes.
Mobility
Urban mobility, ride hailing, fleet operations, routing, utilization, safety, and multimodal transport.
- Trip Volume Line - Track ride requests, completed trips, cancellations, ETA, and weather or event demand by hour or day.
- Fleet Utilization Area - Show active, idle, charging, maintenance, and repositioning vehicle capacity across service windows.
- Dispatch Funnel - Track requests from open search through match, driver accept, arrival, pickup, completion, and rating.
- Mobility Route Heatmap - Reveal demand, congestion, wait time, and supply gaps by zone, corridor, and time block.
- Mode Share Donut - Summarize trips by mode, purpose, distance band, and transfer behavior across a city or campus network.
- Station Treemap - Map dock, depot, station, or curb-zone usage by departures, arrivals, dwell time, and rebalance need.
- Driver Cohort Retention - Track driver activation, first-trip completion, weekly activity, churn, and reactivation by onboarding cohort.
- Fare Waterfall - Explain rider fare and driver earnings from base, time, distance, surge, incentives, fees, tolls, and platform margin.
- Safety Radar - Score operations across crash rate, harsh braking, compliance, training, vehicle health, and incident response.
- Demand Stress Test - Compare service capacity under storm, event surge, transit outage, driver shortage, and app incident scenarios.
- Charger Utilization Heatmap - Reveal EV fleet charging constraints by depot and daypart.
Travel
Trips, bookings, destinations, itinerary planning, hospitality, demand forecasting, and traveler experience.
- Booking Line - Track booking demand, room nights, cancellation rate, ADR, and campaign pickup by booking window.
- Destination Share Donut - Summarize booked trips by destination, region, traveler segment, trip purpose, and season.
- Booking Funnel - Track traveler conversion from search through availability, quote, checkout, payment, confirmation, and check-in.
- Itinerary Sankey - Show itinerary flow across origin market, destination, lodging, transport, activities, add-ons, and return.
- Seasonality Calendar - Reveal booking pickup, arrival intensity, price compression, and blackout dates across the travel calendar.
- Travel Route Heatmap - Map route demand, load factor, fare pressure, and availability by origin-destination pair and month.
- Hotel Portfolio Treemap - Map room-night revenue, occupancy, ADR, and brand contribution by property, destination, or segment.
- Traveler Retention Cohort - Track repeat booking, reactivation, loyalty tier movement, and destination switching by acquisition cohort.
- Trip Margin Waterfall - Explain trip margin from gross booking value through discounts, taxes, supplier cost, payment fees, support, refunds, and attach revenue.
- Experience Radar - Score traveler experience across price transparency, itinerary convenience, disruption support, supplier quality, flexibility, and loyalty value.
- Occupancy RevPAR Matrix - Compare hotels or destinations by occupancy, RevPAR, room nights, and cancellation pressure.
Biotech
Drug discovery, clinical trials, lab operations, biomarkers, pipelines, safety, and R&D portfolio views.
- Biomarker Line - Track biomarker, assay, or pharmacodynamic response by visit, dose arm, and responder threshold.
- Trial Enrollment Funnel - Track screened, eligible, consented, randomized, dosed, and completed subjects by site and screen-failure reason.
- Pipeline Sankey - Show asset movement through target validation, lead optimization, IND, clinical phases, regulatory review, and approval.
- Assay Heatmap - Map potency, selectivity, viability, and off-target response by compound, target, and assay batch.
- Program Portfolio Treemap - Map program value, probability of technical success, spend, modality, and therapeutic-area exposure.
- Dose Response Scatter - Position dose cohorts by efficacy response, adverse-event rate, exposure, and therapeutic window.
- Patient Cohort Retention - Track visit adherence, follow-up completion, endpoint capture, protocol deviations, and dropout by cohort.
- R&D Runway Waterfall - Explain cash runway from financing, trial spend, CMC, milestones, grants, partnership revenue, and operating burn.
- Program Risk Radar - Score program risk across efficacy evidence, safety margin, CMC readiness, regulatory path, IP, competition, and market fit.
- Clinical Stress Test - Compare timeline, cash need, and probability impact under enrollment delay, safety signal, CMC slip, and regulatory hold scenarios.
- Adverse Event Incidence - Compare treatment-emergent adverse events by dose arm and severity.
Legal
Matter management, contracts, litigation, compliance, risk, billing, and legal operations dashboards.
- Matter Volume Line - Track new matters, closures, active backlog, aging, and outside-counsel escalation by week or month.
- Contract Review Funnel - Track contracts from intake through triage, redline, negotiation, approval, signature, and obligation handoff.
- Case Stage Sankey - Show matters moving across intake, investigation, filing, discovery, mediation, settlement, trial, and close.
- Risk Heatmap - Map legal exposure, urgency, control weakness, and owner accountability by business unit and issue type.
- Billing Waterfall - Explain legal spend from budget through outside counsel fees, alternative fee credits, accruals, discounts, reserves, and variance.
- Clause Treemap - Map clause negotiation effort, fallback usage, approval burden, and risk exceptions by clause family.
- Compliance Calendar - Show regulatory filings, audit windows, policy attestations, renewal deadlines, and remediation due dates.
- Matter Cohort - Track resolution speed, reopen rate, escalation, and aging risk by matter intake cohort.
- Case Merit Radar - Score case posture across evidence strength, damages exposure, precedent, venue, cost, timing, and settlement leverage.
- Litigation Stress Test - Compare reserve and exposure under early settlement, extended discovery, trial loss, appeal, and adverse judgment scenarios.
- Discovery Review Burndown - Track document review progress, privilege queue, and production deadline risk.
Government
Public services, budgets, case queues, civic operations, policy outcomes, and infrastructure programs.
- Service Demand Line - Track service requests, permit intake, case openings, SLA misses, and closure capacity by week or month.
- Budget Allocation Donut - Summarize adopted budget by agency, program, fund source, restricted dollars, and discretionary capacity.
- Permit Funnel - Track permit applications from precheck through submission, completeness review, correction, approval, payment, and issuance.
- Case Flow Sankey - Show constituent case movement across intake, eligibility, triage, assignment, service delivery, referral, and closure.
- District Heatmap - Map service demand, response time, complaint rate, equity gap, and outcome attainment by district and topic.
- Program Treemap - Map program spend, beneficiaries served, outcome yield, grant dependency, and administrative load by portfolio area.
- Deadline Calendar - Show hearings, filing cutoffs, grant windows, council votes, reporting dates, and public comment periods.
- Outcome Cohort - Track participant outcomes, recertification, benefits continuity, service completion, and follow-up by intake cohort.
- Policy Score Radar - Score policy options across cost, coverage, equity impact, implementation complexity, legal risk, and public acceptance.
- Budget Stress Test - Compare fund balance, service capacity, reserve draw, and deficit risk under inflation, revenue decline, demand spike, disaster response, and grant loss scenarios.
- Service Backlog Aging - Show constituent service case aging by department and SLA risk band.
Manufacturing
Production, quality, supply chain, maintenance, throughput, yield, and factory operations analytics.
- Production Line - Track planned output, actual units, first-pass yield, takt adherence, downtime loss, and overtime recovery by shift and week.
- Quality Stacked Bar - Break production into pass, rework, scrap, quarantine, hold, and customer-return states by line and product.
- Defect Heatmap - Map defect rate, severity, recurrence, and suspected root cause by station, shift, and defect type.
- Supply Flow Sankey - Show material flow from suppliers through receiving, inspection, inventory, line-side staging, production lines, finished goods, and shipment.
- OEE KPI - Compare availability, performance, quality, changeover time, minor stops, scrap loss, and cycle-time variance.
- Line Utilization Calendar - Reveal line utilization, planned downtime, changeovers, overtime, sanitation, and unplanned stops by day and shift.
- Product Mix Treemap - Map output volume, revenue, margin, changeover burden, and quality loss by product family and SKU.
- Maintenance Funnel - Track maintenance work orders from detection through triage, parts readiness, scheduling, completion, verification, and recurrence monitoring.
- Cost Waterfall - Explain unit cost movement from material price, labor efficiency, energy, scrap, rework, freight, overtime, and yield recovery.
- Factory Risk Radar - Score a plant across safety incidents, quality risk, capacity headroom, maintenance health, supply resilience, cost pressure, and staffing coverage.
- Process Control Chart - Monitor production measurements against centerline and control limits.
Energy
Generation, demand, grid operations, trading, storage, renewables, emissions, and asset performance.
- Load Line - Track hourly load, renewable output, net load, curtailment, peak price, and reserve margin across operating days.
- Generation Stack Area - Show generation mix across solar, wind, hydro, gas, coal, imports, storage discharge, and curtailment over time.
- Fuel Mix Donut - Summarize generation, consumption, emissions intensity, and contracted supply by fuel or resource type.
- Grid Heatmap - Map load, congestion price, outage exposure, voltage constraint, and reserve scarcity by region and hour.
- Dispatch Sankey - Show energy flow from renewable and thermal generation through transmission, storage charge, storage discharge, curtailment, grid delivery, and end-use load.
- Asset Treemap - Map capacity, merchant revenue, contracted revenue, emissions, availability, and maintenance exposure by plant or asset.
- Price Risk Scatter - Position hubs, assets, or hedges by price volatility, spread margin, liquidity, basis risk, and downside exposure.
- Emissions Waterfall - Explain emissions movement from demand growth, efficiency, renewables, storage, fuel switching, offsets, and curtailment.
- Project Sensitivity Tornado - Rank power price, capex, capacity factor, degradation, interconnect cost, tax credits, and financing assumptions by project return impact.
- Supply Stress Test - Compare reserve margin, unserved load, storage duration, fuel availability, and price spike exposure under outage, heat wave, fuel shock, demand spike, and transmission constraint scenarios.
- Battery Dispatch Profile - Show storage charging, discharging, and state of charge against grid signals.
Retail
Store operations, category management, merchandising, footfall, inventory, promotions, and basket analytics.
- Same Store Sales Line - Track comp sales, footfall, conversion, basket size, markdown lift, and promo or weather variance by week.
- Category Mix Stacked Bar - Break sales, margin, units, markdown dollars, and inventory turns by department, category, and channel.
- Store Traffic Calendar - Reveal footfall, transactions, queue pressure, staffing coverage, event lifts, and weather dips by daypart.
- Shelf Availability Heatmap - Map on-shelf availability, stockout risk, phantom inventory, planogram compliance, and replenishment lag by store and category.
- Basket Sankey - Show basket flow from entry category through attach items, substitution, promotion redemption, checkout, and loyalty capture.
- Store Treemap - Map revenue, gross margin, traffic, conversion, shrink, and labor cost by store and region.
- Promotion Funnel - Track shoppers from impression through offer view, clip or save, redemption, purchase, repeat, and loyalty enrollment.
- Loyalty Cohort Retention - Track repeat shopping, churn, average order value, rewards usage, and category expansion by loyalty cohort.
- Margin Waterfall - Explain gross margin movement from sales mix, markdowns, vendor funding, shrink, labor, fulfillment, freight, and returns.
- Store Score Radar - Score a store across traffic quality, conversion, availability, service level, shrink control, staffing, and local demand.
- Inventory Aging Buckets - Show inventory value aging by category to guide markdown, transfer, or replenishment action.
Crypto
Token markets, DeFi liquidity, wallets, protocol revenue, on-chain behavior, risk, and exchange operations.
- Token Price Line - Track token price, realized volatility, volume, active addresses, exchange netflow, and protocol revenue over time.
- Liquidity Depth Chart - Visualize bid and ask depth, spread, slippage, liquidity walls, and order-book imbalance around current price.
- Wallet Cohort Retention - Track active wallets, repeat transactions, retained balances, gas spend, and protocol usage by first-transaction cohort.
- DeFi Flow Sankey - Show value movement from wallets through swaps, lending pools, staking, bridges, liquidations, and protocol fees.
- Protocol Treemap - Map TVL, volume, fees, active users, incentives, and chain exposure by protocol.
- Chain Heatmap - Reveal transactions, active addresses, gas price, failed transactions, bridge inflow, and fee intensity by chain and day.
- Portfolio Donut - Summarize wallet, fund, or treasury allocation by asset, stablecoin exposure, liquid staking, DeFi positions, and cash runway.
- Yield Risk Scatter - Position pools by APY, TVL depth, impermanent loss, smart-contract risk, liquidity lockup, and reward sustainability.
- Liquidation Waterfall - Explain collateral movement from oracle shock, collateral drawdown, margin call, liquidation discount, fees, bad debt, and residual equity.
- Protocol Stress Test - Compare losses under stablecoin depeg, oracle failure, bridge exploit, liquidity drain, governance attack, and validator outage scenarios.
- Token Unlock Schedule - Visualize scheduled token supply unlocks by investor, team, ecosystem, and treasury cohorts.
Fashion
Collections, merchandising, trend signals, inventory, brand performance, runway, and customer style analytics.
- Trend Line - Track search demand, social buzz, sell-through, wishlist adds, waitlist depth, and markdown risk for a trend.
- Collection Mix Donut - Summarize assortment by category, fabric, color family, price tier, size curve, and sustainability claim.
- Sell Through Stacked Bar - Break sales, inventory, sell-through, markdown units, and replenishment need by collection, channel, and lifecycle stage.
- Color Heatmap - Map color demand, sell-through, returns, regional preference, and seasonal palette gaps by region, month, and product line.
- Runway To Retail Funnel - Track looks from concept through sample, costing, merchant buy, allocation, launch, sell-through, and reorder decision.
- Assortment Treemap - Map revenue, units, margin, inventory depth, return rate, and markdown exposure by style, category, and collection.
- Customer Cohort Retention - Track repeat purchase, category expansion, average order value, returns, loyalty tier movement, and churn by customer cohort.
- Brand Affinity Sankey - Show movement from inspiration source through category browse, collection preference, size availability, cart, and purchase.
- Markdown Waterfall - Explain margin movement from full-price sales through markdowns, returns, inventory carrying cost, freight, duties, and liquidation.
- Style Score Radar - Score a look across trend relevance, fit confidence, gross margin, availability, size coverage, brand fit, and return risk.
- Size Availability Curve - Compare size-curve demand with available units before launch or reorder decisions.
Sports
Team performance, player development, game operations, fan engagement, training, and commercial sports metrics.
- Performance Line - Track team rating, expected points, pace, win probability, rest days, and opponent strength across games and weeks.
- Player Usage Stacked Bar - Break minutes, touches, possessions, shot attempts, defensive assignments, and load by player, role, and unit.
- Shot Heatmap - Map shot quality, attempt volume, expected value, scoring zones, defensive pressure, and conversion rate.
- Training Calendar - Reveal training load, recovery score, travel, match congestion, soreness flags, and readiness by day.
- Fan Funnel - Track fans from reach through engagement, content click, ticket intent, purchase, attendance, and loyalty membership.
- Roster Treemap - Map salary, minutes, availability, contribution, upside, contract length, and positional depth by player group.
- Injury Risk Scatter - Position athletes by acute load, chronic load, fatigue, soreness, prior injury, and availability risk.
- Season Ticket Cohort - Track renewals, attendance, resale activity, upgrades, churn, and revenue per seat by buyer cohort.
- Match Flow Sankey - Show possession flow from build-up through progression, final third, shot creation, turnover, transition, and goal outcome.
- Athlete Score Radar - Score an athlete across technical skill, speed, endurance, decision quality, availability, tactical fit, and development upside.
- Lineup Net Rating Matrix - Compare player-pair lineup combinations by net rating and shared minutes.
Pets
Pet health, care routines, marketplace behavior, adoption, insurance, services, and owner engagement.
- Wellness Line - Track weight, activity minutes, appetite, symptoms, medication adherence, and wellness score over time.
- Care Calendar - Show feeding, medication, grooming, vaccination, parasite prevention, training, and vet visit adherence by day.
- Adoption Funnel - Track pets from intake and listing through views, inquiries, applications, meet-and-greet visits, approval, adoption, and follow-up.
- Service Mix Donut - Summarize spend and bookings by grooming, veterinary, food, insurance, training, boarding, toys, and wellness plans.
- Clinic Flow Sankey - Show movement from appointment reason through triage, diagnosis, treatment, pharmacy, follow-up, and outcome.
- Breed Health Heatmap - Map condition risk, preventive care, activity, weight trend, claims, and age patterns by breed and age group.
- Subscription Cohort Retention - Track repeat orders, plan retention, skip frequency, churn, upsell, and replenishment timing by signup cohort.
- Product Treemap - Map product revenue, units, margin, repeat purchase, inventory risk, and brand concentration by category.
- Claim Waterfall - Explain claim value from invoice through deductible, exclusions, copay, policy limit, reimbursement, and owner out-of-pocket.
- Pet Profile Radar - Score care needs across activity, diet, grooming, medical risk, behavior training, socialization, and preventive care.
- Appointment Capacity Calendar - Show clinic appointment capacity, urgent slots, grooming demand, and overbook risk by day.
Maintenance
Maintainers should add or edit chart HTML files one at a time, update this index by hand, and update the matching gallery card in index.html in the same change.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AI Agent - Agent Cohort Retention</title>
<style>
:root {
--ivory: #FAF9F5;
--paper: #FFFFFF;
--slate: #141413;
--clay: #D97757;
--rust: #B04A3F;
--oat: #E3DACC;
--olive: #788C5D;
--teal: #4D8A8B;
--blue: #5277A3;
--gold: #C99A42;
--gray-100: #F0EEE6;
--gray-300: #D1CFC5;
--gray-500: #87867F;
--gray-700: #3D3D3A;
--serif: ui-serif, Georgia, "Times New Roman", serif;
--sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--ivory);
color: var(--slate);
font-family: var(--sans);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.page {
width: min(1120px, calc(100vw - 40px));
margin: 0 auto;
padding: 56px 0 96px;
}
header {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: end;
margin-bottom: 28px;
border-bottom: 1.5px solid var(--gray-300);
padding-bottom: 22px;
}
.eyebrow {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-500);
margin-bottom: 10px;
}
h1 {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(34px, 5vw, 56px);
line-height: 1.04;
letter-spacing: 0;
margin: 0;
}
.purpose {
max-width: 620px;
margin: 16px 0 0;
color: var(--gray-700);
font-size: 16px;
}
.stamp {
border: 1.5px solid var(--gray-300);
background: var(--paper);
border-radius: 8px;
padding: 10px 12px;
font-family: var(--mono);
font-size: 12px;
color: var(--gray-700);
white-space: nowrap;
}
.frame {
background: var(--paper);
border: 1.5px solid var(--gray-300);
border-radius: 8px;
padding: 22px;
}
.chart-head {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: start;
margin-bottom: 16px;
}
.chart-title {
font-family: var(--serif);
font-size: 26px;
line-height: 1.15;
margin: 0;
font-weight: 500;
}
.chart-meta {
font-family: var(--mono);
color: var(--gray-500);
font-size: 12px;
}
svg {
display: block;
width: 100%;
height: auto;
}
.note-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 18px;
margin-top: 22px;
}
.note {
border-top: 1.5px solid var(--gray-300);
padding-top: 16px;
color: var(--gray-700);
}
.note h2 {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-500);
margin: 0 0 8px;
}
.note p, .note ul { margin: 0; }
.note ul { padding-left: 18px; }
.axis { stroke: var(--gray-300); stroke-width: 1.5; }
.grid { stroke: var(--gray-100); stroke-width: 1.5; }
.label {
fill: var(--gray-500);
font: 12px var(--mono);
}
.small {
fill: var(--gray-700);
font: 13px var(--sans);
}
@media (max-width: 760px) {
.page { width: min(100vw - 28px, 1120px); padding-top: 32px; }
header, .note-grid { grid-template-columns: 1fr; }
.stamp { width: fit-content; }
.frame { padding: 16px; }
.chart-head { flex-direction: column; }
}
</style>
</head>
<body>
<main class="page">
<header>
<div>
<div class="eyebrow">AI Agent / cohort</div>
<h1>Agent Cohort Retention</h1>
<p class="purpose">Track repeat workflow success for task cohorts across agent versions, prompts, and tool policies.</p>
</div>
<div class="stamp">standalone html</div>
</header>
<section id="chart-preview" class="frame" aria-label="Agent Cohort Retention example">
<div class="chart-head">
<div>
<h2 class="chart-title">Workflow success retention by agent version</h2>
<div class="chart-meta">task cohort pass rates across version, prompt, and tool-policy changes</div>
</div>
<div class="chart-meta">ai-agent/agent-cohort-retention</div>
</div>
<div style="overflow:auto">
<table class="cohort"><tbody><tr><th>W2</th><td style="background:color-mix(in srgb, #4D8A8B 95%, #FAF9F5)">95%</td><td style="background:color-mix(in srgb, #4D8A8B 86%, #FAF9F5)">86%</td><td style="background:color-mix(in srgb, #4D8A8B 77%, #FAF9F5)">77%</td><td style="background:color-mix(in srgb, #4D8A8B 68%, #FAF9F5)">68%</td><td style="background:color-mix(in srgb, #4D8A8B 59%, #FAF9F5)">59%</td><td style="background:color-mix(in srgb, #4D8A8B 50%, #FAF9F5)">50%</td></tr><tr><th>W3</th><td></td><td style="background:color-mix(in srgb, #4D8A8B 92%, #FAF9F5)">92%</td><td style="background:color-mix(in srgb, #4D8A8B 83%, #FAF9F5)">83%</td><td style="background:color-mix(in srgb, #4D8A8B 74%, #FAF9F5)">74%</td><td style="background:color-mix(in srgb, #4D8A8B 65%, #FAF9F5)">65%</td><td style="background:color-mix(in srgb, #4D8A8B 56%, #FAF9F5)">56%</td></tr><tr><th>W4</th><td></td><td></td><td style="background:color-mix(in srgb, #4D8A8B 89%, #FAF9F5)">89%</td><td style="background:color-mix(in srgb, #4D8A8B 80%, #FAF9F5)">80%</td><td style="background:color-mix(in srgb, #4D8A8B 71%, #FAF9F5)">71%</td><td style="background:color-mix(in srgb, #4D8A8B 62%, #FAF9F5)">62%</td></tr><tr><th>W5</th><td></td><td></td><td></td><td style="background:color-mix(in srgb, #4D8A8B 86%, #FAF9F5)">86%</td><td style="background:color-mix(in srgb, #4D8A8B 77%, #FAF9F5)">77%</td><td style="background:color-mix(in srgb, #4D8A8B 68%, #FAF9F5)">68%</td></tr><tr><th>W6</th><td></td><td></td><td></td><td></td><td style="background:color-mix(in srgb, #4D8A8B 83%, #FAF9F5)">83%</td><td style="background:color-mix(in srgb, #4D8A8B 74%, #FAF9F5)">74%</td></tr><tr><th>W7</th><td></td><td></td><td></td><td></td><td></td><td style="background:color-mix(in srgb, #4D8A8B 80%, #FAF9F5)">80%</td></tr></tbody></table>
</div>
<style>
table.cohort { width:100%; border-collapse:separate; border-spacing:6px; }
.cohort th, .cohort td { min-width:92px; height:44px; border-radius:6px; text-align:center; font:13px var(--mono); }
.cohort th { color:#87867F; background:#F0EEE6; }
.cohort td { color:#141413; }
</style>
<div class="note-grid">
<div class="note">
<h2>Use When</h2>
<p>Track repeat workflow success for task cohorts across agent versions, prompts, and tool policies.</p>
</div>
<div class="note">
<h2>Signals</h2>
<ul>
<li>version stability</li>
<li>cohort decay</li>
<li>tool-policy impact</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AI Agent - Capability Radar</title>
<style>
:root {
--ivory: #FAF9F5;
--paper: #FFFFFF;
--slate: #141413;
--clay: #D97757;
--rust: #B04A3F;
--oat: #E3DACC;
--olive: #788C5D;
--teal: #4D8A8B;
--blue: #5277A3;
--gold: #C99A42;
--gray-100: #F0EEE6;
--gray-300: #D1CFC5;
--gray-500: #87867F;
--gray-700: #3D3D3A;
--serif: ui-serif, Georgia, "Times New Roman", serif;
--sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--ivory);
color: var(--slate);
font-family: var(--sans);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.page {
width: min(1120px, calc(100vw - 40px));
margin: 0 auto;
padding: 56px 0 96px;
}
header {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: end;
margin-bottom: 28px;
border-bottom: 1.5px solid var(--gray-300);
padding-bottom: 22px;
}
.eyebrow {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-500);
margin-bottom: 10px;
}
h1 {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(34px, 5vw, 56px);
line-height: 1.04;
letter-spacing: 0;
margin: 0;
}
.purpose {
max-width: 620px;
margin: 16px 0 0;
color: var(--gray-700);
font-size: 16px;
}
.stamp {
border: 1.5px solid var(--gray-300);
background: var(--paper);
border-radius: 8px;
padding: 10px 12px;
font-family: var(--mono);
font-size: 12px;
color: var(--gray-700);
white-space: nowrap;
}
.frame {
background: var(--paper);
border: 1.5px solid var(--gray-300);
border-radius: 8px;
padding: 22px;
}
.chart-head {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: start;
margin-bottom: 16px;
}
.chart-title {
font-family: var(--serif);
font-size: 26px;
line-height: 1.15;
margin: 0;
font-weight: 500;
}
.chart-meta {
font-family: var(--mono);
color: var(--gray-500);
font-size: 12px;
}
svg {
display: block;
width: 100%;
height: auto;
}
.note-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 18px;
margin-top: 22px;
}
.note {
border-top: 1.5px solid var(--gray-300);
padding-top: 16px;
color: var(--gray-700);
}
.note h2 {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-500);
margin: 0 0 8px;
}
.note p, .note ul { margin: 0; }
.note ul { padding-left: 18px; }
.axis { stroke: var(--gray-300); stroke-width: 1.5; }
.grid { stroke: var(--gray-100); stroke-width: 1.5; }
.label {
fill: var(--gray-500);
font: 12px var(--mono);
}
.small {
fill: var(--gray-700);
font: 13px var(--sans);
}
@media (max-width: 760px) {
.page { width: min(100vw - 28px, 1120px); padding-top: 32px; }
header, .note-grid { grid-template-columns: 1fr; }
.stamp { width: fit-content; }
.frame { padding: 16px; }
.chart-head { flex-direction: column; }
}
</style>
</head>
<body>
<main class="page">
<header>
<div>
<div class="eyebrow">AI Agent / radar</div>
<h1>Capability Radar</h1>
<p class="purpose">Score an agent across planning, tool use, coding, browsing, safety, memory, and verification.</p>
</div>
<div class="stamp">standalone html</div>
</header>
<section id="chart-preview" class="frame" aria-label="Capability Radar example">
<div class="chart-head">
<div>
<h2 class="chart-title">Agent capability profile for release review</h2>
<div class="chart-meta">planning, tool use, coding, browsing, safety, memory, and verification capability scores</div>
</div>
<div class="chart-meta">ai-agent/capability-radar</div>
</div>
<svg viewBox="0 0 960 430" role="img" aria-label="Chart preview">
<rect x="0" y="0" width="960" height="430" rx="8" fill="#FAF9F5"/>
<polygon points="480.0,155.0 527.6,182.5 527.6,237.5 480.0,265.0 432.4,237.5 432.4,182.5" fill="none" stroke="#D1CFC5" stroke-width="1.5"/>
<polygon points="480.0,110.0 566.6,160.0 566.6,260.0 480.0,310.0 393.4,260.0 393.4,160.0" fill="none" stroke="#D1CFC5" stroke-width="1.5"/>
<polygon points="480.0,65.0 605.6,137.5 605.6,282.5 480.0,355.0 354.4,282.5 354.4,137.5" fill="none" stroke="#D1CFC5" stroke-width="1.5"/>
<polygon points="480.0,123.0 570.1,158.0 584.8,270.5 480.0,348.0 409.9,250.5 395.1,161.0" fill="#4D8A8B" opacity="0.35" stroke="#4D8A8B" stroke-width="4"/>
<text class="label" x="480.0" y="36.0" text-anchor="middle">Browser</text>
<text class="label" x="630.7" y="123.0" text-anchor="middle">Verify</text>
<text class="label" x="630.7" y="297.0" text-anchor="middle">Ship</text>
<text class="label" x="480.0" y="384.0" text-anchor="middle">Planning</text>
<text class="label" x="329.3" y="297.0" text-anchor="middle">Search</text>
<text class="label" x="329.3" y="123.0" text-anchor="middle">Code</text>
</svg>
<div class="note-grid">
<div class="note">
<h2>Use When</h2>
<p>Score an agent across planning, tool use, coding, browsing, safety, memory, and verification.</p>
</div>
<div class="note">
<h2>Signals</h2>
<ul>
<li>planning strength</li>
<li>tool-use gap</li>
<li>safety margin</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AI Agent - Eval Heatmap</title>
<style>
:root {
--ivory: #FAF9F5;
--paper: #FFFFFF;
--slate: #141413;
--clay: #D97757;
--rust: #B04A3F;
--oat: #E3DACC;
--olive: #788C5D;
--teal: #4D8A8B;
--blue: #5277A3;
--gold: #C99A42;
--gray-100: #F0EEE6;
--gray-300: #D1CFC5;
--gray-500: #87867F;
--gray-700: #3D3D3A;
--serif: ui-serif, Georgia, "Times New Roman", serif;
--sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--ivory);
color: var(--slate);
font-family: var(--sans);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.page {
width: min(1120px, calc(100vw - 40px));
margin: 0 auto;
padding: 56px 0 96px;
}
header {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: end;
margin-bottom: 28px;
border-bottom: 1.5px solid var(--gray-300);
padding-bottom: 22px;
}
.eyebrow {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-500);
margin-bottom: 10px;
}
h1 {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(34px, 5vw, 56px);
line-height: 1.04;
letter-spacing: 0;
margin: 0;
}
.purpose {
max-width: 620px;
margin: 16px 0 0;
color: var(--gray-700);
font-size: 16px;
}
.stamp {
border: 1.5px solid var(--gray-300);
background: var(--paper);
border-radius: 8px;
padding: 10px 12px;
font-family: var(--mono);
font-size: 12px;
color: var(--gray-700);
white-space: nowrap;
}
.frame {
background: var(--paper);
border: 1.5px solid var(--gray-300);
border-radius: 8px;
padding: 22px;
}
.chart-head {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: start;
margin-bottom: 16px;
}
.chart-title {
font-family: var(--serif);
font-size: 26px;
line-height: 1.15;
margin: 0;
font-weight: 500;
}
.chart-meta {
font-family: var(--mono);
color: var(--gray-500);
font-size: 12px;
}
svg {
display: block;
width: 100%;
height: auto;
}
.note-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 18px;
margin-top: 22px;
}
.note {
border-top: 1.5px solid var(--gray-300);
padding-top: 16px;
color: var(--gray-700);
}
.note h2 {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-500);
margin: 0 0 8px;
}
.note p, .note ul { margin: 0; }
.note ul { padding-left: 18px; }
.axis { stroke: var(--gray-300); stroke-width: 1.5; }
.grid { stroke: var(--gray-100); stroke-width: 1.5; }
.label {
fill: var(--gray-500);
font: 12px var(--mono);
}
.small {
fill: var(--gray-700);
font: 13px var(--sans);
}
@media (max-width: 760px) {
.page { width: min(100vw - 28px, 1120px); padding-top: 32px; }
header, .note-grid { grid-template-columns: 1fr; }
.stamp { width: fit-content; }
.frame { padding: 16px; }
.chart-head { flex-direction: column; }
}
</style>
</head>
<body>
<main class="page">
<header>
<div>
<div class="eyebrow">AI Agent / heatmap</div>
<h1>Eval Heatmap</h1>
<p class="purpose">Map pass rate by task family and capability dimension to expose regressions and coverage gaps.</p>
</div>
<div class="stamp">standalone html</div>
</header>
<section id="chart-preview" class="frame" aria-label="Eval Heatmap example">
<div class="chart-head">
<div>
<h2 class="chart-title">Eval pass-rate heatmap by capability area</h2>
<div class="chart-meta">task-family pass rates across planning, coding, browsing, tool use, safety, and memory dimensions</div>
</div>
<div class="chart-meta">ai-agent/eval-heatmap</div>
</div>
<svg viewBox="0 0 960 380" role="img" aria-label="Chart preview">
<rect x="0" y="0" width="960" height="380" rx="8" fill="#FAF9F5"/>
<text class="small" x="58" y="96">Browser</text>
<rect x="150" y="70" width="88" height="34" rx="5" fill="#CF6B52"/>
<rect x="262" y="70" width="88" height="34" rx="5" fill="#CF6B52"/>
<rect x="374" y="70" width="88" height="34" rx="5" fill="#B04A3F"/>
<rect x="486" y="70" width="88" height="34" rx="5" fill="#B04A3F"/>
<rect x="598" y="70" width="88" height="34" rx="5" fill="#788C5D"/>
<rect x="710" y="70" width="88" height="34" rx="5" fill="#9BAE78"/>
<text class="small" x="58" y="144">Verify</text>
<rect x="150" y="118" width="88" height="34" rx="5" fill="#9BAE78"/>
<rect x="262" y="118" width="88" height="34" rx="5" fill="#9BAE78"/>
<rect x="374" y="118" width="88" height="34" rx="5" fill="#E3DACC"/>
<rect x="486" y="118" width="88" height="34" rx="5" fill="#E3DACC"/>
<rect x="598" y="118" width="88" height="34" rx="5" fill="#CF6B52"/>
<rect x="710" y="118" width="88" height="34" rx="5" fill="#CF6B52"/>
<text class="small" x="58" y="192">Ship</text>
<rect x="150" y="166" width="88" height="34" rx="5" fill="#CF6B52"/>
<rect x="262" y="166" width="88" height="34" rx="5" fill="#B04A3F"/>
<rect x="374" y="166" width="88" height="34" rx="5" fill="#B04A3F"/>
<rect x="486" y="166" width="88" height="34" rx="5" fill="#788C5D"/>
<rect x="598" y="166" width="88" height="34" rx="5" fill="#9BAE78"/>
<rect x="710" y="166" width="88" height="34" rx="5" fill="#9BAE78"/>
<text class="small" x="58" y="240">Planning</text>
<rect x="150" y="214" width="88" height="34" rx="5" fill="#9BAE78"/>
<rect x="262" y="214" width="88" height="34" rx="5" fill="#E3DACC"/>
<rect x="374" y="214" width="88" height="34" rx="5" fill="#E3DACC"/>
<rect x="486" y="214" width="88" height="34" rx="5" fill="#CF6B52"/>
<rect x="598" y="214" width="88" height="34" rx="5" fill="#CF6B52"/>
<rect x="710" y="214" width="88" height="34" rx="5" fill="#B04A3F"/>
<text class="small" x="58" y="288">Search</text>
<rect x="150" y="262" width="88" height="34" rx="5" fill="#B04A3F"/>
<rect x="262" y="262" width="88" height="34" rx="5" fill="#B04A3F"/>
<rect x="374" y="262" width="88" height="34" rx="5" fill="#788C5D"/>
<rect x="486" y="262" width="88" height="34" rx="5" fill="#9BAE78"/>
<rect x="598" y="262" width="88" height="34" rx="5" fill="#9BAE78"/>
<rect x="710" y="262" width="88" height="34" rx="5" fill="#E3DACC"/>
<text class="label" x="176" y="48">W4</text>
<text class="label" x="288" y="48">W5</text>
<text class="label" x="400" y="48">W6</text>
<text class="label" x="512" y="48">W7</text>
<text class="label" x="624" y="48">W8</text>
<text class="label" x="736" y="48">W1</text>
</svg>
<div class="note-grid">
<div class="note">
<h2>Use When</h2>
<p>Map pass rate by task family and capability dimension to expose regressions and coverage gaps.</p>
</div>
<div class="note">
<h2>Signals</h2>
<ul>
<li>capability gap</li>
<li>coverage gap</li>
<li>regression cell</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AI Agent - Failure Funnel</title>
<style>
:root {
--ivory: #FAF9F5;
--paper: #FFFFFF;
--slate: #141413;
--clay: #D97757;
--rust: #B04A3F;
--oat: #E3DACC;
--olive: #788C5D;
--teal: #4D8A8B;
--blue: #5277A3;
--gold: #C99A42;
--gray-100: #F0EEE6;
--gray-300: #D1CFC5;
--gray-500: #87867F;
--gray-700: #3D3D3A;
--serif: ui-serif, Georgia, "Times New Roman", serif;
--sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--ivory);
color: var(--slate);
font-family: var(--sans);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.page {
width: min(1120px, calc(100vw - 40px));
margin: 0 auto;
padding: 56px 0 96px;
}
header {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: end;
margin-bottom: 28px;
border-bottom: 1.5px solid var(--gray-300);
padding-bottom: 22px;
}
.eyebrow {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-500);
margin-bottom: 10px;
}
h1 {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(34px, 5vw, 56px);
line-height: 1.04;
letter-spacing: 0;
margin: 0;
}
.purpose {
max-width: 620px;
margin: 16px 0 0;
color: var(--gray-700);
font-size: 16px;
}
.stamp {
border: 1.5px solid var(--gray-300);
background: var(--paper);
border-radius: 8px;
padding: 10px 12px;
font-family: var(--mono);
font-size: 12px;
color: var(--gray-700);
white-space: nowrap;
}
.frame {
background: var(--paper);
border: 1.5px solid var(--gray-300);
border-radius: 8px;
padding: 22px;
}
.chart-head {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: start;
margin-bottom: 16px;
}
.chart-title {
font-family: var(--serif);
font-size: 26px;
line-height: 1.15;
margin: 0;
font-weight: 500;
}
.chart-meta {
font-family: var(--mono);
color: var(--gray-500);
font-size: 12px;
}
svg {
display: block;
width: 100%;
height: auto;
}
.note-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 18px;
margin-top: 22px;
}
.note {
border-top: 1.5px solid var(--gray-300);
padding-top: 16px;
color: var(--gray-700);
}
.note h2 {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-500);
margin: 0 0 8px;
}
.note p, .note ul { margin: 0; }
.note ul { padding-left: 18px; }
.axis { stroke: var(--gray-300); stroke-width: 1.5; }
.grid { stroke: var(--gray-100); stroke-width: 1.5; }
.label {
fill: var(--gray-500);
font: 12px var(--mono);
}
.small {
fill: var(--gray-700);
font: 13px var(--sans);
}
@media (max-width: 760px) {
.page { width: min(100vw - 28px, 1120px); padding-top: 32px; }
header, .note-grid { grid-template-columns: 1fr; }
.stamp { width: fit-content; }
.frame { padding: 16px; }
.chart-head { flex-direction: column; }
}
</style>
</head>
<body>
<main class="page">
<header>
<div>
<div class="eyebrow">AI Agent / funnel</div>
<h1>Failure Funnel</h1>
<p class="purpose">Track agent failures from detection through reproduction, root cause, fix, rerun, and verified pass.</p>
</div>
<div class="stamp">standalone html</div>
</header>
<section id="chart-preview" class="frame" aria-label="Failure Funnel example">
<div class="chart-head">
<div>
<h2 class="chart-title">Failure triage funnel from detection to verified pass</h2>
<div class="chart-meta">failed evals moving through repro, root cause, fix, rerun, and verified pass stages</div>
</div>
<div class="chart-meta">ai-agent/failure-funnel</div>
</div>
<svg viewBox="0 0 960 390" role="img" aria-label="Chart preview">
<rect x="0" y="0" width="960" height="390" rx="8" fill="#FAF9F5"/>
<rect x="124.5" y="58" width="711" height="42" rx="6" fill="#4D8A8B"/><text x="480" y="85" text-anchor="middle" font-family="var(--sans)" font-size="15" fill="#141413">Cost</text>
<rect x="188.5" y="116" width="583" height="42" rx="6" fill="#788C5D"/><text x="480" y="143" text-anchor="middle" font-family="var(--sans)" font-size="15" fill="#141413">Safety</text>
<rect x="260.0" y="174" width="440" height="42" rx="6" fill="#C99A42"/><text x="480" y="201" text-anchor="middle" font-family="var(--sans)" font-size="15" fill="#141413">Model</text>
<rect x="331.0" y="232" width="298" height="42" rx="6" fill="#D97757"/><text x="480" y="259" text-anchor="middle" font-family="var(--sans)" font-size="15" fill="#141413">Tools</text>
<rect x="391.5" y="290" width="177" height="42" rx="6" fill="#B04A3F"/><text x="480" y="317" text-anchor="middle" font-family="var(--sans)" font-size="15" fill="#141413">Latency</text>
</svg>
<div class="note-grid">
<div class="note">
<h2>Use When</h2>
<p>Track agent failures from detection through reproduction, root cause, fix, rerun, and verified pass.</p>
</div>
<div class="note">
<h2>Signals</h2>
<ul>
<li>repro rate</li>
<li>root-cause gap</li>
<li>verified pass</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>AI Agent Fallback Taxonomy Treemap</title><style>
:root{--ivory:#FAF9F5;--paper:#fff;--slate:#141413;--rust:#B04A3F;--clay:#D97757;--gold:#C99A42;--teal:#4D8A8B;--olive:#788C5D;--blue:#5277A3;--gray-300:#D1CFC5;--gray-500:#87867F;--gray-700:#3D3D3A;--serif:ui-serif,Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Monaco,Consolas,monospace}*{box-sizing:border-box}body{margin:0;background:var(--ivory);color:var(--slate);font-family:var(--sans);line-height:1.55}.page{width:min(1120px,calc(100vw - 40px));margin:0 auto;padding:56px 0 96px}header{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:28px;border-bottom:1.5px solid var(--gray-300);padding-bottom:22px}.eyebrow,.chart-meta,.label{font-family:var(--mono);color:var(--gray-500);font-size:12px}.eyebrow{letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5vw,56px);line-height:1.04;margin:0}.purpose{max-width:650px;margin:16px 0 0;color:var(--gray-700);font-size:16px}.stamp{border:1.5px solid var(--gray-300);background:var(--paper);border-radius:8px;padding:10px 12px;font-family:var(--mono);font-size:12px;color:var(--gray-700);white-space:nowrap}.frame{background:var(--paper);border:1.5px solid var(--gray-300);border-radius:8px;padding:22px}.chart-head{display:flex;justify-content:space-between;gap:16px;align-items:start;margin-bottom:16px}.chart-title{font-family:var(--serif);font-size:26px;line-height:1.15;margin:0;font-weight:500}svg{display:block;width:100%;height:auto}.small{fill:var(--slate);font:15px var(--sans)}.note-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-top:22px}.note{border-top:1.5px solid var(--gray-300);padding-top:16px;color:var(--gray-700)}.note h2{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-500);margin:0 0 8px}.note p,.note ul{margin:0}.note ul{padding-left:18px}@media(max-width:760px){.page{width:min(100vw - 28px,1120px);padding-top:32px}header,.note-grid{grid-template-columns:1fr}.stamp{width:fit-content}.chart-head{flex-direction:column}.frame{padding:16px}}</style></head>
<body><main class="page"><header><div><div class="eyebrow">Visual HTML Gen UI / AI Agent</div><h1>Fallback Taxonomy Treemap</h1><p class="purpose">Group agent fallbacks by root cause so product and eval teams can distinguish model limits from tool, policy, and environment failures.</p></div><div class="stamp">Standalone HTML + SVG</div></header>
<section id="chart-preview" class="frame" aria-label="Fallback Taxonomy Treemap example"><div class="chart-head"><div><h2 class="chart-title">Fallback volume by root cause</h2><div class="chart-meta">production fallbacks grouped by model, tool, permissions, policy, and user-input causes</div></div><div class="chart-meta">ai-agent/fallback-taxonomy-treemap</div></div>
<svg viewBox="0 0 960 390" role="img" aria-label="Treemap of AI agent fallback causes"><rect width="960" height="390" rx="8" fill="#FAF9F5"/><rect x="60" y="62" width="310" height="230" rx="6" fill="#B04A3F"/><text class="small" x="82" y="96">Tool failures</text><text class="label" x="82" y="124">timeouts, schema, auth</text><rect x="388" y="62" width="230" height="132" rx="6" fill="#C99A42"/><text class="small" x="410" y="96">Ambiguous input</text><rect x="636" y="62" width="250" height="132" rx="6" fill="#5277A3"/><text class="small" x="658" y="96">Policy boundary</text><rect x="388" y="214" width="160" height="118" rx="6" fill="#4D8A8B"/><text class="small" x="410" y="248">Model miss</text><rect x="566" y="214" width="150" height="118" rx="6" fill="#788C5D"/><text class="small" x="588" y="248">No data</text><rect x="734" y="214" width="152" height="118" rx="6" fill="#D97757"/><text class="small" x="756" y="248">Human handoff</text></svg>
<div class="note-grid"><div class="note"><h2>Use When</h2><p>Use this when an agent appears unreliable but the team needs to prioritize fixes by root cause rather than by aggregate failure count.</p></div><div class="note"><h2>Signals</h2><ul><li>fallback cause</li><li>tool errors</li><li>handoff drivers</li></ul></div></div></section></main></body></html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AI Agent - Latency Area</title>
<style>
:root {
--ivory: #FAF9F5;
--paper: #FFFFFF;
--slate: #141413;
--clay: #D97757;
--rust: #B04A3F;
--oat: #E3DACC;
--olive: #788C5D;
--teal: #4D8A8B;
--blue: #5277A3;
--gold: #C99A42;
--gray-100: #F0EEE6;
--gray-300: #D1CFC5;
--gray-500: #87867F;
--gray-700: #3D3D3A;
--serif: ui-serif, Georgia, "Times New Roman", serif;
--sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--ivory);
color: var(--slate);
font-family: var(--sans);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.page {
width: min(1120px, calc(100vw - 40px));
margin: 0 auto;
padding: 56px 0 96px;
}
header {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: end;
margin-bottom: 28px;
border-bottom: 1.5px solid var(--gray-300);
padding-bottom: 22px;
}
.eyebrow {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-500);
margin-bottom: 10px;
}
h1 {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(34px, 5vw, 56px);
line-height: 1.04;
letter-spacing: 0;
margin: 0;
}
.purpose {
max-width: 620px;
margin: 16px 0 0;
color: var(--gray-700);
font-size: 16px;
}
.stamp {
border: 1.5px solid var(--gray-300);
background: var(--paper);
border-radius: 8px;
padding: 10px 12px;
font-family: var(--mono);
font-size: 12px;
color: var(--gray-700);
white-space: nowrap;
}
.frame {
background: var(--paper);
border: 1.5px solid var(--gray-300);
border-radius: 8px;
padding: 22px;
}
.chart-head {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: start;
margin-bottom: 16px;
}
.chart-title {
font-family: var(--serif);
font-size: 26px;
line-height: 1.15;
margin: 0;
font-weight: 500;
}
.chart-meta {
font-family: var(--mono);
color: var(--gray-500);
font-size: 12px;
}
svg {
display: block;
width: 100%;
height: auto;
}
.note-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 18px;
margin-top: 22px;
}
.note {
border-top: 1.5px solid var(--gray-300);
padding-top: 16px;
color: var(--gray-700);
}
.note h2 {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-500);
margin: 0 0 8px;
}
.note p, .note ul { margin: 0; }
.note ul { padding-left: 18px; }
.axis { stroke: var(--gray-300); stroke-width: 1.5; }
.grid { stroke: var(--gray-100); stroke-width: 1.5; }
.label {
fill: var(--gray-500);
font: 12px var(--mono);
}
.small {
fill: var(--gray-700);
font: 13px var(--sans);
}
@media (max-width: 760px) {
.page { width: min(100vw - 28px, 1120px); padding-top: 32px; }
header, .note-grid { grid-template-columns: 1fr; }
.stamp { width: fit-content; }
.frame { padding: 16px; }
.chart-head { flex-direction: column; }
}
</style>
</head>
<body>
<main class="page">
<header>
<div>
<div class="eyebrow">AI Agent / area</div>
<h1>Latency Area</h1>
<p class="purpose">Emphasize cumulative runtime and cost across planning, tool calls, code execution, browser work, and verification.</p>
</div>
<div class="stamp">standalone html</div>
</header>
<section id="chart-preview" class="frame" aria-label="Latency Area example">
<div class="chart-head">
<div>
<h2 class="chart-title">Cumulative runtime cost by agent workflow stage</h2>
<div class="chart-meta">latency accumulation across planning, tools, code execution, browser work, and verification</div>
</div>
<div class="chart-meta">ai-agent/latency-area</div>
</div>
<svg viewBox="0 0 960 430" role="img" aria-label="Chart preview">
<rect x="0" y="0" width="960" height="430" rx="8" fill="#FAF9F5"/>
<line class="grid" x1="82" y1="54.0" x2="902" y2="54.0"/>
<line class="grid" x1="82" y1="129.0" x2="902" y2="129.0"/>
<line class="grid" x1="82" y1="204.0" x2="902" y2="204.0"/>
<line class="grid" x1="82" y1="279.0" x2="902" y2="279.0"/>
<line class="grid" x1="82" y1="354.0" x2="902" y2="354.0"/>
<line class="axis" x1="82" y1="354" x2="902" y2="354"/>
<line class="axis" x1="82" y1="54" x2="82" y2="354"/>
<polygon points="82.0,354.0 82.0,304.0 156.5,270.7 231.1,287.3 305.6,212.3 380.2,162.3 454.7,187.3 529.3,212.3 603.8,195.7 678.4,237.3 752.9,179.0 827.5,137.3 902.0,104.0 902.0,354.0" fill="#E3DACC" opacity="0.75"/>
<polyline points="82.0,304.0 156.5,270.7 231.1,287.3 305.6,212.3 380.2,162.3 454.7,187.3 529.3,212.3 603.8,195.7 678.4,237.3 752.9,179.0 827.5,137.3 902.0,104.0" fill="none" stroke="#4D8A8B" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="902.0" cy="104.0" r="6" fill="#D97757"/>
<text class="label" x="42" y="62">High</text>
<text class="label" x="42" y="354">Task success rate</text>
<text class="label" x="82" y="384">W4</text><text class="label" x="246" y="384">W5</text><text class="label" x="410" y="384">W6</text><text class="label" x="574" y="384">W7</text><text class="label" x="738" y="384">W8</text><text class="label" x="902" y="384">W1</text>
</svg>
<div class="note-grid">
<div class="note">
<h2>Use When</h2>
<p>Emphasize cumulative runtime and cost across planning, tool calls, code execution, browser work, and verification.</p>
</div>
<div class="note">
<h2>Signals</h2>
<ul>
<li>tool latency</li>
<li>runtime cost</li>
<li>verification bottleneck</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AI Agent - Model Cost Scatter</title>
<style>
:root {
--ivory: #FAF9F5;
--paper: #FFFFFF;
--slate: #141413;
--clay: #D97757;
--rust: #B04A3F;
--oat: #E3DACC;
--olive: #788C5D;
--teal: #4D8A8B;
--blue: #5277A3;
--gold: #C99A42;
--gray-100: #F0EEE6;
--gray-300: #D1CFC5;
--gray-500: #87867F;
--gray-700: #3D3D3A;
--serif: ui-serif, Georgia, "Times New Roman", serif;
--sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--ivory);
color: var(--slate);
font-family: var(--sans);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.page {
width: min(1120px, calc(100vw - 40px));
margin: 0 auto;
padding: 56px 0 96px;
}
header {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: end;
margin-bottom: 28px;
border-bottom: 1.5px solid var(--gray-300);
padding-bottom: 22px;
}
.eyebrow {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-500);
margin-bottom: 10px;
}
h1 {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(34px, 5vw, 56px);
line-height: 1.04;
letter-spacing: 0;
margin: 0;
}
.purpose {
max-width: 620px;
margin: 16px 0 0;
color: var(--gray-700);
font-size: 16px;
}
.stamp {
border: 1.5px solid var(--gray-300);
background: var(--paper);
border-radius: 8px;
padding: 10px 12px;
font-family: var(--mono);
font-size: 12px;
color: var(--gray-700);
white-space: nowrap;
}
.frame {
background: var(--paper);
border: 1.5px solid var(--gray-300);
border-radius: 8px;
padding: 22px;
}
.chart-head {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: start;
margin-bottom: 16px;
}
.chart-title {
font-family: var(--serif);
font-size: 26px;
line-height: 1.15;
margin: 0;
font-weight: 500;
}
.chart-meta {
font-family: var(--mono);
color: var(--gray-500);
font-size: 12px;
}
svg {
display: block;
width: 100%;
height: auto;
}
.note-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 18px;
margin-top: 22px;
}
.note {
border-top: 1.5px solid var(--gray-300);
padding-top: 16px;
color: var(--gray-700);
}
.note h2 {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-500);
margin: 0 0 8px;
}
.note p, .note ul { margin: 0; }
.note ul { padding-left: 18px; }
.axis { stroke: var(--gray-300); stroke-width: 1.5; }
.grid { stroke: var(--gray-100); stroke-width: 1.5; }
.label {
fill: var(--gray-500);
font: 12px var(--mono);
}
.small {
fill: var(--gray-700);
font: 13px var(--sans);
}
@media (max-width: 760px) {
.page { width: min(100vw - 28px, 1120px); padding-top: 32px; }
header, .note-grid { grid-template-columns: 1fr; }
.stamp { width: fit-content; }
.frame { padding: 16px; }
.chart-head { flex-direction: column; }
}
</style>
</head>
<body>
<main class="page">
<header>
<div>
<div class="eyebrow">AI Agent / scatter</div>
<h1>Model Cost Scatter</h1>
<p class="purpose">Position model and prompt variants by eval quality, latency, token cost, and production fit.</p>
</div>
<div class="stamp">standalone html</div>
</header>
<section id="chart-preview" class="frame" aria-label="Model Cost Scatter example">
<div class="chart-head">
<div>
<h2 class="chart-title">Model quality versus token cost frontier</h2>
<div class="chart-meta">model and prompt variants positioned by pass rate, latency, and cost per task</div>
</div>
<div class="chart-meta">ai-agent/model-cost-scatter</div>
</div>
<svg viewBox="0 0 960 430" role="img" aria-label="Chart preview">
<rect x="0" y="0" width="960" height="430" rx="8" fill="#FAF9F5"/>
<line class="grid" x1="82" y1="54.0" x2="902" y2="54.0"/>
<line class="grid" x1="82" y1="129.0" x2="902" y2="129.0"/>
<line class="grid" x1="82" y1="204.0" x2="902" y2="204.0"/>
<line class="grid" x1="82" y1="279.0" x2="902" y2="279.0"/>
<line class="grid" x1="82" y1="354.0" x2="902" y2="354.0"/>
<line class="axis" x1="82" y1="354" x2="902" y2="354"/>
<line class="axis" x1="82" y1="54" x2="82" y2="354"/>
<circle cx="792.0" cy="184.6" r="6.0" fill="#4D8A8B" opacity="0.78"/> <circle cx="882.0" cy="125.3" r="6.0" fill="#4D8A8B" opacity="0.78"/> <circle cx="272.0" cy="303.2" r="6.0" fill="#4D8A8B" opacity="0.78"/> <circle cx="362.0" cy="243.9" r="6.0" fill="#4D8A8B" opacity="0.78"/> <circle cx="452.0" cy="184.6" r="6.0" fill="#4D8A8B" opacity="0.78"/> <circle cx="542.0" cy="125.3" r="6.0" fill="#4D8A8B" opacity="0.78"/> <circle cx="632.0" cy="303.2" r="6.0" fill="#4D8A8B" opacity="0.78"/> <circle cx="722.0" cy="243.9" r="6.0" fill="#4D8A8B" opacity="0.78"/>
<text class="label" x="410" y="406">Planning</text>
<text class="label" x="24" y="210" transform="rotate(-90 24 210)">Task success rate</text>
</svg>
<div class="note-grid">
<div class="note">
<h2>Use When</h2>
<p>Position model and prompt variants by eval quality, latency, token cost, and production fit.</p>
</div>
<div class="note">
<h2>Signals</h2>
<ul>
<li>quality frontier</li>
<li>cost tradeoff</li>
<li>latency outlier</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AI Agent - Safety Stress Test</title>
<style>
:root {
--ivory: #FAF9F5;
--paper: #FFFFFF;
--slate: #141413;
--clay: #D97757;
--rust: #B04A3F;
--oat: #E3DACC;
--olive: #788C5D;
--teal: #4D8A8B;
--blue: #5277A3;
--gold: #C99A42;
--gray-100: #F0EEE6;
--gray-300: #D1CFC5;
--gray-500: #87867F;
--gray-700: #3D3D3A;
--serif: ui-serif, Georgia, "Times New Roman", serif;
--sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--ivory);
color: var(--slate);
font-family: var(--sans);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.page {
width: min(1120px, calc(100vw - 40px));
margin: 0 auto;
padding: 56px 0 96px;
}
header {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: end;
margin-bottom: 28px;
border-bottom: 1.5px solid var(--gray-300);
padding-bottom: 22px;
}
.eyebrow {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-500);
margin-bottom: 10px;
}
h1 {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(34px, 5vw, 56px);
line-height: 1.04;
letter-spacing: 0;
margin: 0;
}
.purpose {
max-width: 620px;
margin: 16px 0 0;
color: var(--gray-700);
font-size: 16px;
}
.stamp {
border: 1.5px solid var(--gray-300);
background: var(--paper);
border-radius: 8px;
padding: 10px 12px;
font-family: var(--mono);
font-size: 12px;
color: var(--gray-700);
white-space: nowrap;
}
.frame {
background: var(--paper);
border: 1.5px solid var(--gray-300);
border-radius: 8px;
padding: 22px;
}
.chart-head {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: start;
margin-bottom: 16px;
}
.chart-title {
font-family: var(--serif);
font-size: 26px;
line-height: 1.15;
margin: 0;
font-weight: 500;
}
.chart-meta {
font-family: var(--mono);
color: var(--gray-500);
font-size: 12px;
}
svg {
display: block;
width: 100%;
height: auto;
}
.note-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 18px;
margin-top: 22px;
}
.note {
border-top: 1.5px solid var(--gray-300);
padding-top: 16px;
color: var(--gray-700);
}
.note h2 {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-500);
margin: 0 0 8px;
}
.note p, .note ul { margin: 0; }
.note ul { padding-left: 18px; }
.axis { stroke: var(--gray-300); stroke-width: 1.5; }
.grid { stroke: var(--gray-100); stroke-width: 1.5; }
.label {
fill: var(--gray-500);
font: 12px var(--mono);
}
.small {
fill: var(--gray-700);
font: 13px var(--sans);
}
@media (max-width: 760px) {
.page { width: min(100vw - 28px, 1120px); padding-top: 32px; }
header, .note-grid { grid-template-columns: 1fr; }
.stamp { width: fit-content; }
.frame { padding: 16px; }
.chart-head { flex-direction: column; }
}
</style>
</head>
<body>
<main class="page">
<header>
<div>
<div class="eyebrow">AI Agent / stress</div>
<h1>Safety Stress Test</h1>
<p class="purpose">Compare failure rates under normal, adversarial, long-context, stale-context, and tool-error scenarios.</p>
</div>
<div class="stamp">standalone html</div>
</header>
<section id="chart-preview" class="frame" aria-label="Safety Stress Test example">
<div class="chart-head">
<div>
<h2 class="chart-title">Agent safety and robustness stress test</h2>
<div class="chart-meta">failure exposure under normal, adversarial, long-context, stale-context, and tool-error scenarios</div>
</div>
<div class="chart-meta">ai-agent/safety-stress-test</div>
</div>
<svg viewBox="0 0 960 430" role="img" aria-label="Chart preview">
<rect x="0" y="0" width="960" height="430" rx="8" fill="#FAF9F5"/>
<line class="grid" x1="82" y1="54.0" x2="862" y2="54.0"/>
<line class="grid" x1="82" y1="129.0" x2="862" y2="129.0"/>
<line class="grid" x1="82" y1="204.0" x2="862" y2="204.0"/>
<line class="grid" x1="82" y1="279.0" x2="862" y2="279.0"/>
<line class="grid" x1="82" y1="354.0" x2="862" y2="354.0"/>
<line class="axis" x1="82" y1="354" x2="862" y2="354"/>
<line class="axis" x1="82" y1="54" x2="82" y2="354"/>
<rect x="140" y="229" width="86" height="113" rx="5" fill="#4D8A8B"/><text class="label" x="140" y="374">Shock</text>
<rect x="280" y="230" width="86" height="112" rx="5" fill="#788C5D"/><text class="label" x="280" y="374">Stress</text>
<rect x="420" y="236" width="86" height="106" rx="5" fill="#C99A42"/><text class="label" x="420" y="374">Base</text>
<rect x="560" y="236" width="86" height="106" rx="5" fill="#D97757"/><text class="label" x="560" y="374">Upside</text>
<rect x="700" y="238" width="86" height="104" rx="5" fill="#B04A3F"/><text class="label" x="700" y="374">Delay</text>
</svg>
<div class="note-grid">
<div class="note">
<h2>Use When</h2>
<p>Compare failure rates under normal, adversarial, long-context, stale-context, and tool-error scenarios.</p>
</div>
<div class="note">
<h2>Signals</h2>
<ul>
<li>adversarial gap</li>
<li>tool-error recovery</li>
<li>long-context risk</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AI Agent - Task Success Line</title>
<style>
:root {
--ivory: #FAF9F5;
--paper: #FFFFFF;
--slate: #141413;
--clay: #D97757;
--rust: #B04A3F;
--oat: #E3DACC;
--olive: #788C5D;
--teal: #4D8A8B;
--blue: #5277A3;
--gold: #C99A42;
--gray-100: #F0EEE6;
--gray-300: #D1CFC5;
--gray-500: #87867F;
--gray-700: #3D3D3A;
--serif: ui-serif, Georgia, "Times New Roman", serif;
--sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--ivory);
color: var(--slate);
font-family: var(--sans);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.page {
width: min(1120px, calc(100vw - 40px));
margin: 0 auto;
padding: 56px 0 96px;
}
header {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: end;
margin-bottom: 28px;
border-bottom: 1.5px solid var(--gray-300);
padding-bottom: 22px;
}
.eyebrow {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-500);
margin-bottom: 10px;
}
h1 {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(34px, 5vw, 56px);
line-height: 1.04;
letter-spacing: 0;
margin: 0;
}
.purpose {
max-width: 620px;
margin: 16px 0 0;
color: var(--gray-700);
font-size: 16px;
}
.stamp {
border: 1.5px solid var(--gray-300);
background: var(--paper);
border-radius: 8px;
padding: 10px 12px;
font-family: var(--mono);
font-size: 12px;
color: var(--gray-700);
white-space: nowrap;
}
.frame {
background: var(--paper);
border: 1.5px solid var(--gray-300);
border-radius: 8px;
padding: 22px;
}
.chart-head {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: start;
margin-bottom: 16px;
}
.chart-title {
font-family: var(--serif);
font-size: 26px;
line-height: 1.15;
margin: 0;
font-weight: 500;
}
.chart-meta {
font-family: var(--mono);
color: var(--gray-500);
font-size: 12px;
}
svg {
display: block;
width: 100%;
height: auto;
}
.note-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 18px;
margin-top: 22px;
}
.note {
border-top: 1.5px solid var(--gray-300);
padding-top: 16px;
color: var(--gray-700);
}
.note h2 {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-500);
margin: 0 0 8px;
}
.note p, .note ul { margin: 0; }
.note ul { padding-left: 18px; }
.axis { stroke: var(--gray-300); stroke-width: 1.5; }
.grid { stroke: var(--gray-100); stroke-width: 1.5; }
.label {
fill: var(--gray-500);
font: 12px var(--mono);
}
.small {
fill: var(--gray-700);
font: 13px var(--sans);
}
@media (max-width: 760px) {
.page { width: min(100vw - 28px, 1120px); padding-top: 32px; }
header, .note-grid { grid-template-columns: 1fr; }
.stamp { width: fit-content; }
.frame { padding: 16px; }
.chart-head { flex-direction: column; }
}
</style>
</head>
<body>
<main class="page">
<header>
<div>
<div class="eyebrow">AI Agent / line</div>
<h1>Task Success Line</h1>
<p class="purpose">Track agent task success rate across eval suites, product releases, and prompt or model changes.</p>
</div>
<div class="stamp">standalone html</div>
</header>
<section id="chart-preview" class="frame" aria-label="Task Success Line example">
<div class="chart-head">
<div>
<h2 class="chart-title">Agent task success across release evals</h2>
<div class="chart-meta">pass rate trend across eval suites, prompt revisions, model upgrades, and product releases</div>
</div>
<div class="chart-meta">ai-agent/task-success-line</div>
</div>
<svg viewBox="0 0 960 430" role="img" aria-label="Chart preview">
<rect x="0" y="0" width="960" height="430" rx="8" fill="#FAF9F5"/>
<line class="grid" x1="82" y1="54.0" x2="902" y2="54.0"/>
<line class="grid" x1="82" y1="129.0" x2="902" y2="129.0"/>
<line class="grid" x1="82" y1="204.0" x2="902" y2="204.0"/>
<line class="grid" x1="82" y1="279.0" x2="902" y2="279.0"/>
<line class="grid" x1="82" y1="354.0" x2="902" y2="354.0"/>
<line class="axis" x1="82" y1="354" x2="902" y2="354"/>
<line class="axis" x1="82" y1="54" x2="82" y2="354"/>
<polyline points="82.0,258.3 156.5,296.6 231.1,315.7 305.6,264.6 380.2,200.8 454.7,143.4 529.3,130.6 603.8,117.8 678.4,92.3 752.9,105.1 827.5,92.3 902.0,92.3" fill="none" stroke="#4D8A8B" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="902.0" cy="92.3" r="6" fill="#D97757"/>
<text class="label" x="42" y="62">High</text>
<text class="label" x="42" y="354">Task success rate</text>
<text class="label" x="82" y="384">W4</text><text class="label" x="246" y="384">W5</text><text class="label" x="410" y="384">W6</text><text class="label" x="574" y="384">W7</text><text class="label" x="738" y="384">W8</text><text class="label" x="902" y="384">W1</text>
</svg>
<div class="note-grid">
<div class="note">
<h2>Use When</h2>
<p>Track agent task success rate across eval suites, product releases, and prompt or model changes.</p>
</div>
<div class="note">
<h2>Signals</h2>
<ul>
<li>eval trend</li>
<li>release regression</li>
<li>model impact</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AI Agent - Token Waterfall</title>
<style>
:root {
--ivory: #FAF9F5;
--paper: #FFFFFF;
--slate: #141413;
--clay: #D97757;
--rust: #B04A3F;
--oat: #E3DACC;
--olive: #788C5D;
--teal: #4D8A8B;
--blue: #5277A3;
--gold: #C99A42;
--gray-100: #F0EEE6;
--gray-300: #D1CFC5;
--gray-500: #87867F;
--gray-700: #3D3D3A;
--serif: ui-serif, Georgia, "Times New Roman", serif;
--sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--ivory);
color: var(--slate);
font-family: var(--sans);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.page {
width: min(1120px, calc(100vw - 40px));
margin: 0 auto;
padding: 56px 0 96px;
}
header {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: end;
margin-bottom: 28px;
border-bottom: 1.5px solid var(--gray-300);
padding-bottom: 22px;
}
.eyebrow {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-500);
margin-bottom: 10px;
}
h1 {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(34px, 5vw, 56px);
line-height: 1.04;
letter-spacing: 0;
margin: 0;
}
.purpose {
max-width: 620px;
margin: 16px 0 0;
color: var(--gray-700);
font-size: 16px;
}
.stamp {
border: 1.5px solid var(--gray-300);
background: var(--paper);
border-radius: 8px;
padding: 10px 12px;
font-family: var(--mono);
font-size: 12px;
color: var(--gray-700);
white-space: nowrap;
}
.frame {
background: var(--paper);
border: 1.5px solid var(--gray-300);
border-radius: 8px;
padding: 22px;
}
.chart-head {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: start;
margin-bottom: 16px;
}
.chart-title {
font-family: var(--serif);
font-size: 26px;
line-height: 1.15;
margin: 0;
font-weight: 500;
}
.chart-meta {
font-family: var(--mono);
color: var(--gray-500);
font-size: 12px;
}
svg {
display: block;
width: 100%;
height: auto;
}
.note-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 18px;
margin-top: 22px;
}
.note {
border-top: 1.5px solid var(--gray-300);
padding-top: 16px;
color: var(--gray-700);
}
.note h2 {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-500);
margin: 0 0 8px;
}
.note p, .note ul { margin: 0; }
.note ul { padding-left: 18px; }
.axis { stroke: var(--gray-300); stroke-width: 1.5; }
.grid { stroke: var(--gray-100); stroke-width: 1.5; }
.label {
fill: var(--gray-500);
font: 12px var(--mono);
}
.small {
fill: var(--gray-700);
font: 13px var(--sans);
}
@media (max-width: 760px) {
.page { width: min(100vw - 28px, 1120px); padding-top: 32px; }
header, .note-grid { grid-template-columns: 1fr; }
.stamp { width: fit-content; }
.frame { padding: 16px; }
.chart-head { flex-direction: column; }
}
</style>
</head>
<body>
<main class="page">
<header>
<div>
<div class="eyebrow">AI Agent / waterfall</div>
<h1>Token Waterfall</h1>
<p class="purpose">Explain token use from system context, retrieved docs, reasoning, tool output, scratch state, and final answer.</p>
</div>
<div class="stamp">standalone html</div>
</header>
<section id="chart-preview" class="frame" aria-label="Token Waterfall example">
<div class="chart-head">
<div>
<h2 class="chart-title">Token budget bridge across agent context</h2>
<div class="chart-meta">token use from instructions, retrieved docs, reasoning, tool output, state, and answer</div>
</div>
<div class="chart-meta">ai-agent/token-waterfall</div>
</div>
<svg viewBox="0 0 960 430" role="img" aria-label="Chart preview">
<rect x="0" y="0" width="960" height="430" rx="8" fill="#FAF9F5"/>
<line class="grid" x1="82" y1="54.0" x2="872" y2="54.0"/>
<line class="grid" x1="82" y1="129.0" x2="872" y2="129.0"/>
<line class="grid" x1="82" y1="204.0" x2="872" y2="204.0"/>
<line class="grid" x1="82" y1="279.0" x2="872" y2="279.0"/>
<line class="grid" x1="82" y1="354.0" x2="872" y2="354.0"/>
<line class="axis" x1="82" y1="354" x2="872" y2="354"/>
<line class="axis" x1="82" y1="54" x2="82" y2="354"/>
<rect x="100" y="119.2" width="76" height="220.8" rx="5" fill="#4D8A8B"/><text class="label" x="100" y="374">Baseline</text>
<rect x="230" y="119.2" width="76" height="48.0" rx="5" fill="#B04A3F"/><text class="label" x="230" y="374">Gain</text>
<rect x="360" y="167.2" width="76" height="33.6" rx="5" fill="#B04A3F"/><text class="label" x="360" y="374">Cost</text>
<rect x="490" y="150.4" width="76" height="50.4" rx="5" fill="#788C5D"/><text class="label" x="490" y="374">Delay</text>
<rect x="620" y="150.4" width="76" height="26.4" rx="5" fill="#B04A3F"/><text class="label" x="620" y="374">Recovery</text>
<rect x="750" y="167.2" width="76" height="172.8" rx="5" fill="#4D8A8B"/><text class="label" x="750" y="374">Net</text>
</svg>
<div class="note-grid">
<div class="note">
<h2>Use When</h2>
<p>Explain token use from system context, retrieved docs, reasoning, tool output, scratch state, and final answer.</p>
</div>
<div class="note">
<h2>Signals</h2>
<ul>
<li>context driver</li>
<li>tool-output pressure</li>
<li>summary opportunity</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AI Agent - Tool Use Sankey</title>
<style>
:root {
--ivory: #FAF9F5;
--paper: #FFFFFF;
--slate: #141413;
--clay: #D97757;
--rust: #B04A3F;
--oat: #E3DACC;
--olive: #788C5D;
--teal: #4D8A8B;
--blue: #5277A3;
--gold: #C99A42;
--gray-100: #F0EEE6;
--gray-300: #D1CFC5;
--gray-500: #87867F;
--gray-700: #3D3D3A;
--serif: ui-serif, Georgia, "Times New Roman", serif;
--sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--ivory);
color: var(--slate);
font-family: var(--sans);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.page {
width: min(1120px, calc(100vw - 40px));
margin: 0 auto;
padding: 56px 0 96px;
}
header {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: end;
margin-bottom: 28px;
border-bottom: 1.5px solid var(--gray-300);
padding-bottom: 22px;
}
.eyebrow {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-500);
margin-bottom: 10px;
}
h1 {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(34px, 5vw, 56px);
line-height: 1.04;
letter-spacing: 0;
margin: 0;
}
.purpose {
max-width: 620px;
margin: 16px 0 0;
color: var(--gray-700);
font-size: 16px;
}
.stamp {
border: 1.5px solid var(--gray-300);
background: var(--paper);
border-radius: 8px;
padding: 10px 12px;
font-family: var(--mono);
font-size: 12px;
color: var(--gray-700);
white-space: nowrap;
}
.frame {
background: var(--paper);
border: 1.5px solid var(--gray-300);
border-radius: 8px;
padding: 22px;
}
.chart-head {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: start;
margin-bottom: 16px;
}
.chart-title {
font-family: var(--serif);
font-size: 26px;
line-height: 1.15;
margin: 0;
font-weight: 500;
}
.chart-meta {
font-family: var(--mono);
color: var(--gray-500);
font-size: 12px;
}
svg {
display: block;
width: 100%;
height: auto;
}
.note-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 18px;
margin-top: 22px;
}
.note {
border-top: 1.5px solid var(--gray-300);
padding-top: 16px;
color: var(--gray-700);
}
.note h2 {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-500);
margin: 0 0 8px;
}
.note p, .note ul { margin: 0; }
.note ul { padding-left: 18px; }
.axis { stroke: var(--gray-300); stroke-width: 1.5; }
.grid { stroke: var(--gray-100); stroke-width: 1.5; }
.label {
fill: var(--gray-500);
font: 12px var(--mono);
}
.small {
fill: var(--gray-700);
font: 13px var(--sans);
}
@media (max-width: 760px) {
.page { width: min(100vw - 28px, 1120px); padding-top: 32px; }
header, .note-grid { grid-template-columns: 1fr; }
.stamp { width: fit-content; }
.frame { padding: 16px; }
.chart-head { flex-direction: column; }
}
</style>
</head>
<body>
<main class="page">
<header>
<div>
<div class="eyebrow">AI Agent / sankey</div>
<h1>Tool Use Sankey</h1>
<p class="purpose">Show how agent work moves from planning into search, code edits, browser checks, tests, and final verification.</p>
</div>
<div class="stamp">standalone html</div>
</header>
<section id="chart-preview" class="frame" aria-label="Tool Use Sankey example">
<div class="chart-head">
<div>
<h2 class="chart-title">Agent tool path from planning to verification</h2>
<div class="chart-meta">workflow movement between planning, search, code, browser, tests, and verification tools</div>
</div>
<div class="chart-meta">ai-agent/tool-use-sankey</div>
</div>
<svg viewBox="0 0 960 390" role="img" aria-label="Chart preview">
<rect x="0" y="0" width="960" height="390" rx="8" fill="#FAF9F5"/>
<path d="M190,112 C300,112 310,166 430,166" fill="none" stroke="#4D8A8B" stroke-width="28" opacity="0.55"/>
<path d="M190,246 C300,246 310,166 430,166" fill="none" stroke="#788C5D" stroke-width="28" opacity="0.55"/>
<path d="M640,166 C750,166 660,92 780,92" fill="none" stroke="#D97757" stroke-width="28" opacity="0.55"/>
<path d="M640,166 C750,166 660,196 780,196" fill="none" stroke="#C99A42" stroke-width="28" opacity="0.55"/>
<path d="M640,166 C750,166 660,296 780,296" fill="none" stroke="#5277A3" stroke-width="28" opacity="0.55"/>
<rect x="80" y="82" width="126" height="60" rx="8" fill="#FFFFFF" stroke="#D1CFC5" stroke-width="1.5"/><text class="small" x="94" y="118">Planning</text>
<rect x="80" y="216" width="126" height="60" rx="8" fill="#FFFFFF" stroke="#D1CFC5" stroke-width="1.5"/><text class="small" x="94" y="252">Search</text>
<rect x="420" y="136" width="126" height="60" rx="8" fill="#FFFFFF" stroke="#D1CFC5" stroke-width="1.5"/><text class="small" x="434" y="172">Code</text>
<rect x="780" y="62" width="126" height="60" rx="8" fill="#FFFFFF" stroke="#D1CFC5" stroke-width="1.5"/><text class="small" x="794" y="98">Model</text>
<rect x="780" y="166" width="126" height="60" rx="8" fill="#FFFFFF" stroke="#D1CFC5" stroke-width="1.5"/><text class="small" x="794" y="202">Tools</text>
<rect x="780" y="266" width="126" height="60" rx="8" fill="#FFFFFF" stroke="#D1CFC5" stroke-width="1.5"/><text class="small" x="794" y="302">Latency</text>
</svg>
<div class="note-grid">
<div class="note">
<h2>Use When</h2>
<p>Show how agent work moves from planning into search, code edits, browser checks, tests, and final verification.</p>
</div>
<div class="note">
<h2>Signals</h2>
<ul>
<li>tool mix</li>
<li>verification loop</li>
<li>browser dependency</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Biotech Adverse Event Incidence</title><style>
:root{--ivory:#FAF9F5;--paper:#fff;--slate:#141413;--rust:#B04A3F;--clay:#D97757;--gold:#C99A42;--teal:#4D8A8B;--olive:#788C5D;--gray-100:#F0EEE6;--gray-300:#D1CFC5;--gray-500:#87867F;--gray-700:#3D3D3A;--serif:ui-serif,Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Monaco,Consolas,monospace}*{box-sizing:border-box}body{margin:0;background:var(--ivory);color:var(--slate);font-family:var(--sans);line-height:1.55}.page{width:min(1120px,calc(100vw - 40px));margin:0 auto;padding:56px 0 96px}header{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:28px;border-bottom:1.5px solid var(--gray-300);padding-bottom:22px}.eyebrow,.chart-meta,.label{font-family:var(--mono);color:var(--gray-500);font-size:12px}.eyebrow{letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5vw,56px);line-height:1.04;margin:0}.purpose{max-width:650px;margin:16px 0 0;color:var(--gray-700);font-size:16px}.stamp{border:1.5px solid var(--gray-300);background:var(--paper);border-radius:8px;padding:10px 12px;font-family:var(--mono);font-size:12px;color:var(--gray-700);white-space:nowrap}.frame{background:var(--paper);border:1.5px solid var(--gray-300);border-radius:8px;padding:22px}.chart-head{display:flex;justify-content:space-between;gap:16px;align-items:start;margin-bottom:16px}.chart-title{font-family:var(--serif);font-size:26px;line-height:1.15;margin:0;font-weight:500}svg{display:block;width:100%;height:auto}.axis{stroke:var(--gray-300);stroke-width:1.5}.note-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-top:22px}.note{border-top:1.5px solid var(--gray-300);padding-top:16px;color:var(--gray-700)}.note h2{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-500);margin:0 0 8px}.note p,.note ul{margin:0}.note ul{padding-left:18px}@media(max-width:760px){.page{width:min(100vw - 28px,1120px);padding-top:32px}header,.note-grid{grid-template-columns:1fr}.stamp{width:fit-content}.chart-head{flex-direction:column}.frame{padding:16px}}</style></head><body><main class="page"><header><div><div class="eyebrow">Visual HTML Gen UI / Biotech</div><h1>Adverse Event Incidence</h1><p class="purpose">Compare safety events by dose arm and severity so trial teams can see tolerability patterns before review meetings.</p></div><div class="stamp">Standalone HTML + SVG</div></header><section id="chart-preview" class="frame" aria-label="Adverse Event Incidence example"><div class="chart-head"><div><h2 class="chart-title">Treatment-emergent adverse events by dose</h2><div class="chart-meta">patient incidence across grade 1-2, grade 3, and serious adverse event bands</div></div><div class="chart-meta">biotech/adverse-event-incidence</div></div><svg viewBox="0 0 960 430" role="img" aria-label="Stacked bar chart of adverse event incidence by dose"><rect width="960" height="430" rx="8" fill="#FAF9F5"/><line class="axis" x1="90" y1="350" x2="860" y2="350"/><rect x="160" y="250" width="92" height="100" fill="#4D8A8B"/><rect x="160" y="214" width="92" height="36" fill="#C99A42"/><rect x="160" y="194" width="92" height="20" fill="#B04A3F"/><rect x="330" y="218" width="92" height="132" fill="#4D8A8B"/><rect x="330" y="166" width="92" height="52" fill="#C99A42"/><rect x="330" y="132" width="92" height="34" fill="#B04A3F"/><rect x="500" y="192" width="92" height="158" fill="#4D8A8B"/><rect x="500" y="122" width="92" height="70" fill="#C99A42"/><rect x="500" y="82" width="92" height="40" fill="#B04A3F"/><rect x="670" y="240" width="92" height="110" fill="#4D8A8B"/><rect x="670" y="184" width="92" height="56" fill="#C99A42"/><rect x="670" y="148" width="92" height="36" fill="#B04A3F"/><text class="label" x="164" y="382">Placebo</text><text class="label" x="342" y="382">Low</text><text class="label" x="510" y="382">Mid</text><text class="label" x="680" y="382">High</text><rect x="612" y="48" width="14" height="14" fill="#4D8A8B"/><text class="label" x="634" y="60">G1-2</text><rect x="690" y="48" width="14" height="14" fill="#C99A42"/><text class="label" x="712" y="60">G3</text><rect x="752" y="48" width="14" height="14" fill="#B04A3F"/><text class="label" x="774" y="60">SAE</text></svg><div class="note-grid"><div class="note"><h2>Use When</h2><p>Use this during dose review to compare tolerability and decide whether mitigation, monitoring, or dose adjustment is needed.</p></div><div class="note"><h2>Signals</h2><ul><li>adverse events</li><li>dose arms</li><li>safety signal</li></ul></div></div></section></main></body></html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Biotech - Biomarker Line</title>
<style>
:root {
--ivory: #FAF9F5;
--paper: #FFFFFF;
--slate: #141413;
--clay: #D97757;
--rust: #B04A3F;
--oat: #E3DACC;
--olive: #788C5D;
--teal: #4D8A8B;
--blue: #5277A3;
--gold: #C99A42;
--gray-100: #F0EEE6;
--gray-300: #D1CFC5;
--gray-500: #87867F;
--gray-700: #3D3D3A;
--serif: ui-serif, Georgia, "Times New Roman", serif;
--sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--ivory);
color: var(--slate);
font-family: var(--sans);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.page {
width: min(1120px, calc(100vw - 40px));
margin: 0 auto;
padding: 56px 0 96px;
}
header {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: end;
margin-bottom: 28px;
border-bottom: 1.5px solid var(--gray-300);
padding-bottom: 22px;
}
.eyebrow {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-500);
margin-bottom: 10px;
}
h1 {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(34px, 5vw, 56px);
line-height: 1.04;
letter-spacing: 0;
margin: 0;
}
.purpose {
max-width: 620px;
margin: 16px 0 0;
color: var(--gray-700);
font-size: 16px;
}
.stamp {
border: 1.5px solid var(--gray-300);
background: var(--paper);
border-radius: 8px;
padding: 10px 12px;
font-family: var(--mono);
font-size: 12px;
color: var(--gray-700);
white-space: nowrap;
}
.frame {
background: var(--paper);
border: 1.5px solid var(--gray-300);
border-radius: 8px;
padding: 22px;
}
.chart-head {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: start;
margin-bottom: 16px;
}
.chart-title {
font-family: var(--serif);
font-size: 26px;
line-height: 1.15;
margin: 0;
font-weight: 500;
}
.chart-meta {
font-family: var(--mono);
color: var(--gray-500);
font-size: 12px;
}
svg {
display: block;
width: 100%;
height: auto;
}
.note-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 18px;
margin-top: 22px;
}
.note {
border-top: 1.5px solid var(--gray-300);
padding-top: 16px;
color: var(--gray-700);
}
.note h2 {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-500);
margin: 0 0 8px;
}
.note p, .note ul { margin: 0; }
.note ul { padding-left: 18px; }
.axis { stroke: var(--gray-300); stroke-width: 1.5; }
.grid { stroke: var(--gray-100); stroke-width: 1.5; }
.label {
fill: var(--gray-500);
font: 12px var(--mono);
}
.small {
fill: var(--gray-700);
font: 13px var(--sans);
}
@media (max-width: 760px) {
.page { width: min(100vw - 28px, 1120px); padding-top: 32px; }
header, .note-grid { grid-template-columns: 1fr; }
.stamp { width: fit-content; }
.frame { padding: 16px; }
.chart-head { flex-direction: column; }
}
</style>
</head>
<body>
<main class="page">
<header>
<div>
<div class="eyebrow">Biotech / line</div>
<h1>Biomarker Line</h1>
<p class="purpose">Track biomarker, assay, or pharmacodynamic response by visit, dose arm, and responder threshold.</p>
</div>
<div class="stamp">standalone html</div>
</header>
<section id="chart-preview" class="frame" aria-label="Biomarker Line example">
<div class="chart-head">
<div>
<h2 class="chart-title">Biomarker response by visit and dose arm</h2>
<div class="chart-meta">visit-level biomarker response, dose arm, responder threshold, and assay variability</div>
</div>
<div class="chart-meta">biotech/biomarker-line</div>
</div>
<svg viewBox="0 0 960 430" role="img" aria-label="Chart preview">
<rect x="0" y="0" width="960" height="430" rx="8" fill="#FAF9F5"/>
<line class="grid" x1="82" y1="54.0" x2="902" y2="54.0"/>
<line class="grid" x1="82" y1="129.0" x2="902" y2="129.0"/>
<line class="grid" x1="82" y1="204.0" x2="902" y2="204.0"/>
<line class="grid" x1="82" y1="279.0" x2="902" y2="279.0"/>
<line class="grid" x1="82" y1="354.0" x2="902" y2="354.0"/>
<line class="axis" x1="82" y1="354" x2="902" y2="354"/>
<line class="axis" x1="82" y1="54" x2="82" y2="354"/>
<polyline points="82.0,244.9 156.5,272.2 231.1,272.2 305.6,204.0 380.2,244.9 454.7,204.0 529.3,204.0 603.8,163.1 678.4,244.9 752.9,176.7 827.5,149.5 902.0,135.8" fill="none" stroke="#4D8A8B" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="902.0" cy="135.8" r="6" fill="#D97757"/>
<text class="label" x="42" y="62">High</text>
<text class="label" x="42" y="354">Biomarker response</text>
<text class="label" x="82" y="384">W5</text><text class="label" x="246" y="384">W6</text><text class="label" x="410" y="384">W7</text><text class="label" x="574" y="384">W8</text><text class="label" x="738" y="384">W1</text><text class="label" x="902" y="384">W2</text>
</svg>
<div class="note-grid">
<div class="note">
<h2>Use When</h2>
<p>Track biomarker, assay, or pharmacodynamic response by visit, dose arm, and responder threshold.</p>
</div>
<div class="note">
<h2>Signals</h2>
<ul>
<li>biomarker response</li>
<li>threshold</li>
<li>dose arm</li>
</ul>
</div>
</div>
</section>
</main>
</body>
</html>