SOP Sentinel

AI-assisted Standard Operating Procedure generation from video walkthroughs.

SOP Sentinel is a single-file HTML application that lets you load a video walkthrough, mark key moments as timestamped steps, and use Claude (or an N8N agentic pipeline) to automatically analyze each frame and produce a complete, field-ready SOP document — all without a backend or installation.

---

How It Works

1. Load a video of someone performing a procedure
2. Play through it and hit Capture Current at each key step, or type timestamps manually
3. The app seeks to each timestamp, captures the exact video frame, and sends it to Claude for analysis
4. Claude describes what is happening at that moment in imperative, active-voice SOP language
5. Add clarifying notes to any step and hit Re-evaluate to refine the description
6. Click Generate SOP to synthesize all steps into a complete procedure document
7. Export as Markdown or copy to clipboard

---

Features

Video & Frame Capture

• Supports MP4, WebM, MOV, and AVI via file picker or drag-and-drop
• When a timestamp is committed (Enter or click away), the video automatically seeks to that position and captures the exact frame using the Canvas API
• The captured frame is displayed as a thumbnail on the step card and sent to Claude as a vision input

AI Analysis

• Each step is analyzed individually using the captured frame plus contextual text (procedure overview, user notes, prior step summaries)
• Claude examines the screenshot directly — identifying UI elements, data, tools, physical states, or actions visible in the frame — and writes a precise step description
• Re-evaluate button inside each step's note field allows you to add clarification and have Claude revise its original description, incorporating your input

Two AI Modes

• Claude Direct — calls the Anthropic Messages API directly from the browser using your API key
• N8N Webhook — routes all AI calls through an N8N webhook endpoint, enabling use within an existing agentic pipeline with optional Bearer token authentication

Model Selection (Claude Direct mode)

• Claude Sonnet 4
• Claude Opus 4
• Claude Haiku 4.5
• Claude 3.5 Sonnet

Credential Security

• API keys are encrypted with AES-256-GCM using a device fingerprint-derived key (PBKDF2, 100,000 iterations) before being stored in localStorage
• Credentials are never transmitted anywhere except the chosen AI endpoint
• A Forget button immediately clears stored credentials

Output

• Step cards in the UI show the captured frame, AI description, user notes, and optional feedback
• Generate SOP synthesizes all steps into a coherent, flowing procedure document
• Export as a .md Markdown file or copy the full text to clipboard

---

Usage

Requirements

• A modern browser (Chrome, Edge, Firefox, or Safari)
• An Anthropic API key or an N8N webhook URL

Setup

1. Open sop-sentinel.html in any browser — no server, no dependencies, no installation
2. In the AI Connection panel, choose Claude Direct or N8N Webhook
3. Enter your API key (and select a model) or paste your N8N webhook URL
4. Click Save Credentials to encrypt and store them for future sessions

Building a Procedure

1. Load a video using the video panel (drag-and-drop or browse)
2. Describe the overall procedure in the "What is this procedure about?" field — this context improves AI accuracy across all steps
3. Play the video and click Capture Current at each key moment, or click + Add Manual and type a timestamp (e.g. 1:23 or 0:45)
4. Each step automatically seeks to that time, captures the frame, and triggers AI analysis
5. Optionally type in the "What is happening at this moment?" field on any step to add context, then click Re-evaluate to have the AI revise its description
6. Once all steps are analyzed, click Generate SOP to produce the full document

Exporting

• Export Markdown — downloads a .md file with the procedure title, date, and full text
• Copy to Clipboard — copies the raw SOP text for pasting into any document editor

---

Architecture

SOP Sentinel is a self-contained single HTML file with no build step, no npm packages, and no server-side components.

Concern	Implementation
Video playback	Native HTML5 <video> element
Frame capture	<canvas> — drawImage() at seek position
AI (direct)	Anthropic Messages API with vision (base64 image block)
AI (pipeline)	N8N webhook POST with system_prompt, user_message, frame fields
Credential storage	AES-256-GCM via Web Crypto API, stored in localStorage
Styling	CSS custom properties, no framework
Fonts	Playfair Display, Crimson Pro, Special Elite (Google Fonts)

N8N Payload Format

When using N8N Webhook mode, the app POSTs JSON to your webhook:

{
  "system_prompt": "...",
  "user_message": "...",
  "step": 1,
  "timestamp": "0:32",
  "frame": "data:image/jpeg;base64,..."
}

The app accepts any of the following fields in the response: output, summary, text, message, or the first string value found in the returned object.

---

Limitations & Notes

• Cross-origin video: Frame capture via canvas requires the video to be loaded from the same origin or a CORS-permissive source. Local files loaded via the file picker always work.
• No persistent step storage: Timestamps and analyses live in browser memory for the session. If you reload the page, you start fresh.
• Frame quality: Frames are captured as JPEG at 75% quality to keep API payload sizes reasonable.
• N8N vision: The frame field is included in N8N payloads but your N8N workflow must be configured to pass it to a vision-capable model if you want frame analysis in that mode.

---

File Structure

sop-sentinel.html   — the entire application (HTML + CSS + JS, self-contained)
README.md           — this file