User Manual · Version 0.2.0

Sevenda
Complete Guide

Complete guide to the Chrome extension that records browser sessions and generates BPMN 2.0 diagrams and GTM analysis using AI.

18 sections·Chrome Extension MV3
Table of contents
01 — Introduction

What Sevenda does

Automatically captures browser events and transforms them into AI outputs — without touching the target application code.

🧩
Automatic BPMN 2.0
Generates standard process diagrams from real sessions. Refinable in natural language.
📊
GTM/GA4 Insights
Tracking analysis, gap identification, exportable tag plan in JSON for your marketing team.
📄
AI Documentation
Generate enterprise Word documents from technical-functional analysis to Analytics Report.
🔗
Integrations
Create Jira issues with attached BPMN. Export to Camunda Modeler. Share with your team.
Who it's for
ProfilePrimary use caseRecommended mode
Business AnalystAS-IS process documentation, BPMN generation🧩 BPMN
Tester / QABug reproduction, test flow mapping🧩 BPMN
DeveloperApplication flow debugging, API analysis🧩 BPMN
Digital MarketerGTM/GA4 tracking analysis, gap identification📊 Insights
Web AnalystTag plan, analytics implementation verification📊 Insights
02 — Installation

Installing Sevenda

Install from an unpacked folder in under 2 minutes.

1
Open extensions page
Navigate to chrome://extensions/ in your browser.
2
Enable Developer mode
Toggle in the top right — it should turn green.
3
Load unpacked extension
Click the button and select the root folder of the Sevenda project.
4
Icon in the toolbar
The ≋ icon appears in the Chrome toolbar. Installation complete.
✓ Ready
chrome://extensions/
Extensions● Developer mode active
≋
Sevenda 0.2.0
Records browser sessions and generates BPMN 2.0
●
💡
After installation, configure the Anthropic API key in Settings. Without a key, AI generation is unavailable.
04 — Guided Onboarding

Three steps on first launch

On first use, Sevenda guides the user through a 3-step journey. It does not repeat on subsequent openings.

👋
Step 1 — Welcome
Presents the three main features in non-technical language. Click Get Started → to proceed.
First launch only
🎯
Step 2 — Choose Mode
Select 🧩 BPMN (green) or 📊 Insights (purple) via descriptive cards. Continue button enables after selection.
BPMNInsights
🛠
Step 3 — DevTools Guide
Shows 3 numbered steps to open the panel. A contextual tip explains the characteristics of the chosen mode.
F12 → Sevenda tab
05 — Operating Modes

BPMN or Insights — two distinct audiences

The selected mode adapts filters, UI, and AI outputs for the active user profile.

🧩 BPMN Mode
Analysts · Testers · Developers
  • ✓All filters active (NAV, UI, NET, ERR, DOM)
  • ✓Complete NET with latencies and status codes
  • ✓Jira, Camunda and 📄 Analysis buttons visible
  • ✓XML and Diagram tabs in BPMN panel
  • ✓Context bar: BPMN button only
  • ○No static asset NET filter (not needed)
NAVUINETERRDOM
📊 Insights Mode
Digital Marketer · Web Analyst
  • ✓NAV, UI, partial NET, ERR active
  • ✓NET filtered: excludes CSS, JS, fonts, images
  • ✓📄 Report button in Insights footer
  • ✓Only 📊 Insights tab in BPMN panel
  • ✓Context bar: Insights button only
  • ✗DOM and SYS excluded (noise for marketer)
NAVUINET filteredERRDOM
ℹ
Changing mode from the popup updates the DevTools panel UI in real time via chrome.storage.onChanged — no extension reload required.
06 — The DevTools Panel

The heart of Sevenda

The panel lives inside Chrome's DevTools. Open with F12 → Sevenda tab.

Sevenda — DevTools Panel
⏺ Start Recording
■ Stop
× Clear
Live
Sessions
Last: fl-mp6tp... Events: 42
⚙ Settings
│ EVENT STREAM — real time
NAVUINETERRDOM
Search events...
09:18:40.399NAVpushState → /dashboard/login
09:18:40.487UIclick input[type=email]
09:18:41.120NETPOST api/auth/login → 200 (142ms)
Describe what you are testing...
Generate →
BPMN
📊 Insights
ElementFunction
⏺ Start RecordingStarts event capture on the current tab
■ StopStops recording and saves the session to IndexedDB
× ClearClears the visual log without deleting saved data
Live / SessionsSwitches between the real-time log and the saved sessions list
Events: NEvent counter for the current session
⚙ SettingsQuick modal to configure the Anthropic API key
JiraCreates a Jira issue with BPMN attached (visible after generation)
CamundaExports .bpmn file for Camunda Modeler (BPMN mode only)
07 — Recording

Capture a session

Sevenda automatically captures all events without any changes to the target application.

1
Navigate to the target page
Open the page you want to analyze in the current tab.
2
Open the Sevenda panel
F12 → Sevenda tab in DevTools.
3
Add context (optional)
Describe the process in the field at the bottom. Significantly improves BPMN quality.
"Checkout flow — from cart to payment"
4
Start recording
Click ⏺ Start Recording. The REC timer appears in the top right.
5
Stop when done
Click ■ Stop. The session is saved automatically.
✓ Session saved to IndexedDB
Captured event types
NAV
Page navigations, SPA pushState, hashChange, redirects
UI
Element clicks, form submits, user input with selector and text
NET
Fetch/XHR calls with URL, method, status code and duration in ms
ERR
JavaScript errors with message and full stack trace
DOM
Significant DOM mutations — modals, overlays, UI state changes (BPMN only)
⚠
Automatic keepalive sends a ping to the service worker every 20s during recording to prevent Chrome from terminating it after inactivity periods.
08 — Event Stream

The real-time event log

Filter, search and inspect every event with a click to view complete details.

🔍
Type filters
Colored chips (NAV · UI · NET · ERR · DOM) enable/disable event categories. Click to toggle. Grey = disabled.
NAVUINETERRDOM
🔎
Text search
The search field filters events in real time by message text. Case-insensitive. Works during active recording.
📋
Event detail
Every row is clickable. Expands to show all details in key-value format: full URL, headers, payload, response time, stack trace.
09 — BPMN Generation

From log to diagram

Claude Sonnet transforms the event sequence into a BPMN 2.0 standard-compliant diagram.

1
Record the session
Or load a historical session via Replay.
2
Add context (optional)
Describe the process in the field at the bottom to guide AI interpretation.
3
Click BPMN
The BPMN panel opens automatically with the generated diagram.
4
Wait for the cooldown
The 📄 Analysis button shows an adaptive countdown — calculated from remaining tokens communicated by the Anthropic API. Prevents rate limiting.
📄 Analysis (38s) → ... → 📄 Analysis
💡
On error — a persistent toast with ↺ Retry stays visible on the panel. Click to relaunch without going back to the context bar.
ℹ
90-second timeout — generation stops with a clear message. Progressive messages appear at 30s, 75s and 120s in the log.
⚠
Rate limit 30k token/min — the adaptive cooldown automatically manages compliance. Don't click Analysis before the countdown ends.
10 — BPMN Panel

Views and available tools

The BPMN panel offers three tabs with contextual tools for each view.

📄
XML Tab
Shows the raw BPMN 2.0 XML generated by Claude.
⎘ Copy — copy XML to clipboard
⬇ Paste XML — import from clipboard
🗂
Diagram Tab
Renders BPMN graphically via bpmn-js. Interactive: pan and zoom with mouse.
↓ SVG — export the diagram
📄 Analysis — generate Word document
📊
Insights Tab
Visible after Insights generation. Shows suggested GTM events and tracking gaps.
⬇ Export Tag Plan JSON
📄 Report — generate Analytics Report
11 — Iterative Feedback

Refine the BPMN in natural language

Modify the diagram without regenerating from scratch. The conversation keeps the last 6 interactions.

BPMN Feedback Chat
👤 "Add an exclusive gateway after the Login task"
✦ Gateway added. The flow now branches toward "Home Dashboard" or "Authentication Error" based on the login outcome.
👤 "Rename the 'Submit' task to 'Confirm Order'"
✦ Task renamed correctly in the diagram.
Send
12 — Insights Generation

Automatic GTM/GA4 analysis

Identifies tracking gaps, missing events and produces an implementation-ready tag plan.

Automatically detected tracking tools
Google Tag ManagerGTM-K7X9P2 ✓
Google Analytics 4Not detected
Facebook PixelPartial
Hotjar · Clarity · SegmentMonitored
Suggested GTM event example
add_to_cartHIGH
TRIGGER
Click on button[data-action="add-to-cart"]
DATALAYER.PUSH()
{
  "event": "add_to_cart",
  "item_id": "{{DL - product_id}}"
}
1
Select Insights mode from popup
The panel adapts by hiding elements not needed for marketing analysis.
2
Record the session
The NET filter automatically excludes static assets (CSS, JS, fonts, images).
3
Click 📊 Insights
Max 60 deduplicated events sent to Claude with optimized prompt (<10k tokens).
4
Export the Tag Plan
⬇ Export Tag Plan JSON · ⎘ Copy JSON · 📄 Report Word
Automatic per-session caching
13 — Documentation

Two documents, two audiences

Generate professional enterprise Word documents with one click.

📄 Technical-Functional Analysis
Diagram tab → 📄 Analysis button
  • ✓Cover page with session metadata
  • ✓Narrative Executive Summary
  • ✓Operational timeline (table)
  • ✓Detailed analysis per BPMN task
  • ✓Anomaly analysis with impact
  • ✓Conclusions and recommendations
Claude API call6–8k tokens3min timeout
📄 Analytics Report
Insights view → 📄 Report button
  • ✓Current tracking status (GTM, GA4)
  • ✓Suggested GTM events with triggers
  • ✓Critical gaps with severity and fixes
  • ✓Prioritized action plan
  • ✓Instant generation
  • ○No Claude API call needed
No API callData already in memory< 1 second
14 — Session Management

Archive and replay

All sessions are saved to IndexedDB and available for replay and later analysis.

📋
Session list
Click Sessions in the toolbar to see the date-ordered list with ID, URL, event count and duration.
▶
Replay
Reload a historical session into the panel. Generate BPMN and Insights from past sessions exactly as from a live one.
🗑
Deletion
Click ✕ on an individual session to delete it. Settings includes "Delete all" to clear the entire archive.
15–16 — Integrations

Jira and Camunda

Bring the BPMN directly into your existing workflow.

🔷 Jira Integration
Top toolbar → Jira button
Configure in Settings: Base URL, Email, API Token, Project Key. On click opens a modal for title, description and issue type.
Automatic attachments:
  • ✓BPMN XML file
  • ✓Diagram SVG file
  • ✓Comment with session metadata
🟠 Camunda Export
Top toolbar → Camunda button
Exports the current BPMN as a .bpmn file compatible with Camunda Modeler. Ready for direct import into Camunda Platform.
  • ✓Automatic Camunda adaptations
  • ✓File name includes session ID
  • ○Only in 🧩 BPMN mode
17 — Settings

Settings page

Accessible from popup → Settings & AI Models or from the ⚙ modal in the panel.

SectionSettingDescription
AI & APIAnthropic API KeyFormat sk-ant-.... Saved in chrome.storage.sync. Show/hide with the eye icon.
AI & APIAI ModelDefault: claude-sonnet-4-6. Best quality/cost balance.
AI & APIOutput LanguageItalian or English. Applies to BPMN and text outputs.
AI & APIMax TokensClaude response token limit (default: 8192). Increase for complex BPMN.
AI & APITemperatureModel creativity 0–1. Default: 0.3 for structured outputs.
AI & APISystem PromptAdditional prompt prepended to standard instructions. Customize style and context.
CaptureActive SourcesChips NAV · UI · NET · ERR · DOM to enable/disable categories.
CaptureExcluded DomainsIgnore during recording. Supports wildcards *.example.com.
CaptureEvent LimitMax events sent to Claude (default: 500).
CaptureFlush IntervalFrequency of sending batches to the service worker (default: 2s).
CaptureRetention DaysDays sessions are kept in IndexedDB before automatic deletion.
InterfaceThemeDark · Light · Auto. Applies only to the Settings page.
InterfaceAuto ScrollLog stream scrolls automatically to the bottom during recording.
InterfaceTimestamp FormatHH:MM:SS or HH:MM:SS.mmm with milliseconds.
SessionsArchive managementView, export or delete sessions. Includes "Delete all".
AboutReset settingsRestores all values to defaults. Requires confirmation.
18 — FAQ

Frequently asked questions

The Sevenda panel does not appear in DevTools.
Verify the extension is active in chrome://extensions/. Reload the page and reopen DevTools. If it persists, click the refresh icon on the extensions page.
I get "No active recording" when clicking Stop.
The service worker was terminated by Chrome after inactivity (> 30s without events). Sevenda automatically attempts state recovery from IndexedDB. The automatic keepalive every 20s prevents this during active recording.
Generation exceeds the rate limit (30,000 tokens/minute).
The adaptive cooldown on the 📄 Analysis button automatically manages rate limit compliance — calculated from remaining tokens communicated by the API. Wait for the countdown to reach zero. Use ↺ Retry in the toast if the error still appears.
The BPMN diagram is not rendered.
Switch to the XML view to check the raw content. Use the feedback field to ask Claude to fix the XML. You can also paste a corrected XML using the ⬇ Paste XML button.
Insights don't show GTM events even though GTM is installed.
Verify GTM is active and the recording includes NET events to googletagmanager.com. Add context in the Session Context field specifying that you want to analyze GTM tracking.
Document generation takes more than 3 minutes.
Use the ↺ Retry button in the persistent toast. If frequent, wait a few minutes between BPMN generation and Analysis generation due to the rate limit.
How do I update the API key?
Popup → Settings & AI Models → AI & API section → enter the new key → Save settings.