STET / IN CONTEXT

Coding-Agent Visual Implementation Handoff

A diff alone can leave a reviewer wondering what changed. Stet marks the working security controls so a human can inspect the implementation and its limits.

Agent · Engineering · Human review

Hand off what you built

Delivery with evidence, not just a diff.

Prompt
Implement account security, then annotate what changed for me.
LIVE APPLICATION · TRY THE CONTROLS
F
FieldnotesAccount / Security
Local demo

A little more peace of mind.

Three implemented controls to inspect before accepting a handoff.

Use at least 12 characters.

No password is sent to a server.

Other sessions

Laptop · Brooklyn · Last active 2 hours ago

1 other demo session active.

Two-factor authentication

WHAT THIS MAKES EASIER

Inspect password requirements, session revocation and the setup step. Authentication, persistence and actual 2FA enrollment are follow-ups outside this local fixture.

Inspect plan, source & verification

Actual schema-valid React plan. Targets refer to source refs; this JSON is never executed by the drawing runtime. After installing @funsaized/stet, copy to annotation-plan.json and run ./node_modules/.bin/stet validate annotation-plan.json --json.

{
  "version": 1,
  "framework": "react",
  "intent": "Hand off three implemented account-security controls, with explicit local-demo limits.",
  "annotations": [
    {
      "id": "password",
      "primitive": "highlight",
      "targets": [
        {
          "strategy": "ref",
          "file": "website/src/showcase/Security.tsx",
          "locator": "requirements",
          "description": "Password requirements copy"
        }
      ],
      "options": {
        "seed": 51,
        "description": "Implemented: minimum twelve characters, displayed before submit.",
        "fill": "#e3b937"
      }
    },
    {
      "id": "session",
      "primitive": "circle",
      "targets": [
        {
          "strategy": "ref",
          "file": "website/src/showcase/Security.tsx",
          "locator": "revoke",
          "description": "Revoke demo session control"
        }
      ],
      "options": {
        "seed": 52,
        "description": "Implemented: revoke this demo session.",
        "stroke": "#426650"
      }
    },
    {
      "id": "two-factor",
      "primitive": "underline",
      "targets": [
        {
          "strategy": "ref",
          "file": "website/src/showcase/Security.tsx",
          "locator": "setup",
          "description": "Two-factor setup control"
        }
      ],
      "options": {
        "seed": 53,
        "description": "Implemented: reveal a local two-factor setup step. No server enrollment.",
        "stroke": "#416ba0"
      }
    }
  ]
}

Make this example your own

Inspect the plan and source above, then adapt the marks to your existing controls. Stet supplies emphasis; your application owns validation, progression, and behavior.

Attach annotations with React refs · Explore the six annotation primitives · Follow the coding-agent workflow

Explain Dangerous UI Actions · Visual UI Review & Form QA Annotations ·