Knowledge base for tl-agent-cost-calculator.html. Covers architecture, all panels, every config field, API endpoints, documented limitations, and the proxy activation checklist.
The Agent Pipeline Planner is a pure client-side cost calculator and ROI estimator for MSP AI automation pipelines. It helps answer three questions before spending a dollar: how many AI agents does this pipeline require, what will it cost per month at the expected volume, and is the time savings worth it relative to the cost.
It is a sub-page of the MSP AI Resource Hub, a multi-page platform where this file renders inside a parent shell that injects the nav. The file loads ../nav.js via a deferred script tag. No nav markup is duplicated in this file.
Design System
Ground-truth theme is dashboard-IVR-triage-console.html. All fonts, color tokens, component patterns (topbar, term-bar, stat-row, pipeline indicator, dispatch bar, footer) are sourced from that file without deviation. Font stack is Orbitron (headings), Share Tech Mono (mono labels), and Rajdhani (body).
| Function | Status | Notes |
|---|---|---|
| calc() — cost engine | Live | Pure JavaScript math. Fires on every input event. No external dependency. |
| exportJSON() | Live | Blob download. Client-side only. Always works. |
| exportPDF() | Live | jsPDF from cdnjs.cloudflare.com. Requires internet. Fails gracefully with an alert if CDN is unreachable. |
| saveConfig() | Live | localStorage only. Falls back to alert if storage is blocked. |
| shareLink() | Live | URL base64 encode via btoa. Falls back to prompt() if clipboard API is denied. |
| loadDashboard() / refreshAll() | Demo | Proxy branch is wired but isLive=false. Activates when proxy is live. Currently calls calc() as the demo fallback. |
| startAutoRefresh(30000) | Demo | Running on 30s interval calling refreshAll(). In demo mode this just recalculates from current inputs — no server call. |
| Anthropic pricing sync | Limitation | No live pricing endpoint exists. Prices are hard-coded in MODELS{}. Must be updated manually. |
| Copilot seat count auto-pull | Limitation | M365 Graph requires OAuth. Remains a manual input field. |
| CW Manage / Autotask data | Not applicable | This tool does not pull ticket or usage data from PSA. It is a planning estimator only. |
| nav.js parent injection | Via parent | Loaded via script tag from parent directory. No nav markup is duplicated in this file. Activates when served from the Hub parent shell. |
The tool is a single-file HTML application. All logic lives in one <script> block at the bottom of the file. There is no build step, no bundler, and no server-side rendering.
Data Flow
Every input field fires an oninput event that calls calc(). The calc function reads all input values, computes token costs per stage, sums to a monthly total, computes ROI, and directly writes all result values to the DOM. No state management library is used. The stageModels object holds the current model selection per stage and is mutated by pickStageModel().
Proxy-Ready Wiring Pattern
The file follows the same proxy-ready pattern used across the console suite. Three functions provide the integration seam:
State Persistence
Configuration is saved to localStorage as a JSON blob under the key ca_config. State is also encodeable to a base64 URL parameter (?s=) for shareable links. On init, URL state takes precedence over localStorage.
Token Cost Model
Token count per run starts at a 3,000-token base (approximately 1K system prompt plus 2K context), then each selected capability adds its own token overhead. Input tokens are 65% of the total, output tokens are 35%. Token caching halves the input cost when enabled. Each stage uses its assigned model's per-million-token rates from the MODELS object. Haiku 3.5 rates: $0.80 input / $4.00 output per MTok. Sonnet 4: $3.00 / $15.00. Opus 4: $15.00 / $75.00.
Displays the integer agent count computed by calc(). 1 = Copilot only. 2 = Copilot builder plus Claude reasoner. 3 = full parallel stack. Color accent: cyan. Updated live on every input change.
Total monthly pipeline executions: (user-driven runs/day + additional runs/day) × working days. Floor of 1 to prevent $0 display on zero-run configurations. Color accent: yellow.
Rounded dollar total of all API costs plus Copilot seats plus framework fee. Shown as a whole dollar integer. Color accent: purple.
Value of time saved minus pipeline cost. Only populated when hrsSaved is greater than zero. Shows — until the ROI section is filled in. Color accent: green.
Five preset pipelines are available: Ticket Summarizer, Network Triage, Monthly Report, Backup Handler, and All (full pipeline). A sixth "Reset" button returns all inputs to defaults.
| Preset | Runs/Day | Stages Used | Key Capabilities |
|---|---|---|---|
| Ticket Summarizer | 50 | Idea, Test | Code gen, External API |
| Network Triage | 2 user + 5 auto | Idea, Design, Test, Review | API, QA, HITL, Routing, Retry, Risk, Report |
| Monthly Report | 0 user + 1 auto | Idea, Review | Code gen, Structured report |
| Backup Handler | 0 user + 10 auto | Idea, Test, Review | API, QA, HITL, Routing, Retry |
| All | 100 + 20 auto | All 7 stages | All 10 capabilities |
Clicking a preset button opens the Peek Panel — a preview card that shows estimated cost, time recovered, value of time, and net saving for that preset without modifying current inputs. The header saving widget also updates to show the peeked scenario. Clicking "Load this example" applies all preset values to the form and closes the peek. Clicking the same preset button again closes the peek without loading.
Ten capability checkboxes determine two things: the recommended agent count and the estimated token overhead per run. Each checkbox carries two data attributes that drive the calculation.
| Capability | data-agents | data-toks | Agent Impact |
|---|---|---|---|
| Code generation | 0 | 1500 | None — Copilot handles this |
| External API / data fetch | 0 | 2000 | None — Copilot handles this |
| Logic review / QA | 1 | 3500 | Triggers 2-agent recommendation |
| Human-in-the-loop gate | 1 | 2500 | Triggers 2-agent recommendation |
| Conditional routing | 1 | 3000 | Triggers 2-agent recommendation |
| Auto-retry on failure | 1 | 2000 | Triggers 2-agent recommendation |
| Risk / anomaly assessment | 1 | 4000 | Triggers 2-agent recommendation |
| Parallel agent tasks | 2 | 5000 | Triggers 3-agent recommendation |
| Structured report output | 1 | 3000 | Triggers 2-agent recommendation |
| Long-running / resume | 1 | 1500 | Triggers 2-agent recommendation |
| Field | Default | Description |
|---|---|---|
| Number of end users | 100 | Primary driver. Changing this auto-sets Copilot seats and user-driven runs/day via syncUsers(). |
| Copilot Business seats | 100 | Auto-set to end users. $19/user/month. Editable — only engineers building agents need a seat. |
| User-driven runs / day | 100 | Auto-set to end users. Editable. Represents pipeline executions triggered by users. |
| Additional runs / day | 0 | Scheduled or event-triggered runs not tied to a user. Nightly jobs, monitoring alerts, webhooks. |
| Token caching | Off | Anthropic Prompt Cache. Halves input token cost. Checkbox. |
| Success rate | 80% | Percentage of pipeline runs that complete successfully. Scales the hours-saved ROI calculation. |
| Working days / month | 22 | Business days pipeline runs. 22 = standard M-F. Adjust to 30 if weekends are included. |
| Avg steps per run | 5 | How many pipeline stages fire on a typical run. Used for context display only — not in cost formula. |
Seven pipeline stages each have an independent model assignment. The cost for each stage is computed separately and summed. Stages set to "Copilot only" or "Not used" contribute $0 to the API cost.
| Stage | Default Model | Available Options |
|---|---|---|
| Idea / Planning | Sonnet 4 | Sonnet 4, Haiku 3.5, Opus 4, Copilot only |
| Scoping / Planning | Sonnet 4 | Sonnet 4, Haiku 3.5, Opus 4, Copilot only |
| Visual / Design Dept | Not used | Not used, GPT-4o Vision, DALL-E 3, Claude Vision |
| Build | Copilot only | Copilot only, Haiku 3.5, Sonnet 4, Opus 4 |
| Test / Validate | Haiku 3.5 | Haiku 3.5, Sonnet 4, Opus 4, Copilot only |
| Pending Review | Sonnet 4 | Sonnet 4, Haiku 3.5, Opus 4, Copilot only |
| Live / Deploy | Copilot only | Copilot only, Haiku 3.5, Sonnet 4, Opus 4 |
| Option | Monthly Fee | Notes |
|---|---|---|
| LangChain | $0 | Open source. Default selection. No platform cost. |
| LangSmith / LangGraph | $39 | Includes tracing, debugging, and the LangGraph parallel execution engine. Recommended when parallel tasks capability is selected. |
| Custom / No framework | $0 | Direct API calls. User manages state manually. |
The results panel is position:sticky and remains visible while scrolling through the left-column inputs. All values update live via setVal(), which also fires a brief CSS flash animation on change.
Integer agent count with a text sub-label explaining the configuration. Below it, colored pills show the agent roles: Copilot (always), Claude reasoner (2+ agents), Specialist (3 agents).
Total computed runs with a breakdown sub-label showing the day breakdown and user count.
Input and output token estimates in separate display values, colored cyan and yellow respectively. Sub-label shows capability count and whether caching is active.
Four line items: Claude API input, Claude API output, Copilot seats, framework platform. Total line at bottom in yellow.
Per-stage breakdown table showing stage name, assigned model, and monthly cost. Stages with no model show — in place of a dollar value.
Contextual recommendation message. Green for 1 agent (Copilot sufficient). Yellow for 2 agents (lists the triggering capabilities by name). Purple border for 3 agents (recommends LangGraph). Default state prompts user to select capabilities.
| Field | Default | Description |
|---|---|---|
| Setup hours | 40 | One-time engineering hours to build and deploy the pipeline. |
| Setup rate ($/hr) | $100 | Hourly rate for the setup work. Setup cost = setup hours × rate. |
| Hours saved / run | 0.5 | Human time eliminated per pipeline execution. Step 0.25 increments. Drives the value of time calculation. |
| Eng. rate ($/hr) | $75 | Fully loaded cost of the engineer whose time is being replaced. |
Derived values shown below the inputs: Time saved/month (hrsSaved × totalRuns × successRate), Value of time saved (time × engRate), Monthly net saving (value minus costTotal). Break-even row appears below the card when setup cost is greater than zero, showing months to recoup setup cost at the current net saving rate. Turns red with "Never at current rates" if ROI is negative.
| Button | Function | Output | Status |
|---|---|---|---|
| JSON | exportJSON() | MSP-AI-Agent-Pipeline-YYYY-MM-DD.json | Live |
| Export PDF | exportPDF() | MSP-AI-Agent-Pipeline-Estimate-YYYY-MM-DD.pdf | Live — CDN required |
| Save Config | saveConfig() | localStorage key: ca_config | Live |
| Copy Share Link | shareLink() | URL + ?s= base64 param | Live |
The PDF export produces a 3-page portrait A4 document using jsPDF and jspdf-autotable loaded from cdnjs.cloudflare.com. Page 1 is a cover with the net saving hero stat and 4-tile summary. Page 2 is configuration table, cost breakdown, and ROI estimate. Page 3 is the capability checklist and per-stage model assignment table. The dark color palette is applied directly in the PDF — the document is not a screenshot.
| Action | Endpoint | Method | Status |
|---|---|---|---|
| calc() cost engine | None — pure JS math | N/A | Client-side |
| exportPDF() | https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js | GET (CDN load) | External CDN |
| exportPDF() — autotable | https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.2/jspdf.plugin.autotable.min.js | GET (CDN load) | External CDN |
| Google Fonts | https://fonts.googleapis.com/css2?family=Orbitron...Rajdhani... | GET | External CDN |
| saveConfig() | localStorage — key: ca_config | Browser API | Client-side |
| shareLink() | Clipboard API + URL params | Browser API | Client-side |
| Anthropic pricing sync (future) | /api/proxy/anthropic/pricing | GET | Activates when proxy is live |
| nav.js parent injection | ../nav.js (relative to parent shell) | Script tag / deferred | Via parent shell |
Anthropic does not provide a public pricing API. Model costs in MODELS{} are hard-coded constants. The proxy branch in loadDashboard() is the seam where a custom pricing sync endpoint would be wired. Until that endpoint is built and proxied, the MODELS object must be updated manually when Anthropic changes pricing. Current rates were verified at the time of the last audit.
ConnectWise Manage does not expose a native CSAT or satisfaction score endpoint in its REST API. This is not applicable to this tool (which is a planner, not a reporting dashboard), but is documented here for completeness consistent with other tools in the suite.
Pulling the licensed Copilot Business seat count from Microsoft 365 requires an authenticated Graph API call with a delegated or application license read permission. OAuth flow is not implemented in this tool. The copilotSeats field remains a manual input that auto-populates from the end users field as a convenience default.
The jsPDF and jspdf-autotable libraries are loaded from cdnjs.cloudflare.com at page load. If the page is served in an air-gapped environment, the PDF button will alert the user and abort. The libraries can be self-hosted by updating the two script src tags to local paths.
This file is a sub-page component. It loads ../nav.js via a deferred script tag. Opening the file standalone (not from the Hub parent directory) will cause a 404 for nav.js. This is expected behavior — the nav will silently fail to load without breaking the calculator functionality.
The "Avg steps per run" input is displayed in the runs sub-label for context but does not multiply the per-stage API costs. Each stage is costed independently at its model rate for the full monthly run volume. This is intentional — not all stages fire on every run, and the per-stage model assignment already captures which stages are active.
The following steps activate the live data path in loadDashboard() and refreshAll(). All other functionality is already live.
- Audit completed — all actions confirmed client-side or flagged. No broken endpoint calls.
- Orphan div after body open tag removed.
- themeBtn DOM element added — was missing, caused silent null crash.
- fxGroup .card wrapper div properly closed.
- IVR ground-truth theme applied — fonts, tokens, and component patterns match.
- loadDashboard() / refreshAll() / startAutoRefresh(30000) wired.
- Build a proxy endpoint that returns current Anthropic model pricing as JSON.
- Set isLive = true in loadDashboard() and refreshAll().
- Uncomment the fetch() block in loadDashboard() and map response fields to MODELS{}.
- Verify updateProxyStatus(true) shows green LIVE badge in proxy bar.
- Test shareLink() with proxy-enriched state to confirm pricing is captured in the URL param.
- If M365 Copilot seat auto-pull is required: implement OAuth app registration, request LicenseDetails.Read.All permission, and wire a proxy endpoint to replace the copilotSeats default logic.
- If the tool is to be served standalone (not from parent Hub shell): self-host jsPDF, jspdf-autotable, and Google Fonts, and update the src/href tags accordingly.