{
  "video": "keyboard-focus-and-legacy-scrim.mp4",
  "sha256": "f759a163efeb3b0956ca6ef7adcdcc38aed73d5dc07a8af75300fa6f7f648a76",
  "seconds": 55.833333,
  "beforeRevision": "0f1b6f62507f1ccdb4e63f61cf3dc48356a0d4fa",
  "afterRevision": "b062de2cc92281b398f8e86b0a061e7a87b52bad",
  "agentServer": "1.54.0",
  "recording": "Real control-openhands production builds; keyboard actions, screenshots, and generated CSS. No LLM call. Comparison cards retain actual captured colors.",
  "before": [
    {
      "phase": "before",
      "theme": "light-plus",
      "viewport": "desktop",
      "id": "add-backend-option-agent-server",
      "focusVisible": true,
      "color": "oklch(0.809 0.105 251.813)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "-2px",
      "background": [
        238,
        238,
        238
      ],
      "contrast": 1.562938209583341,
      "width": 1440,
      "insideViewport": true,
      "overflow": false,
      "capture": "before-light-plus-add-backend-option-agent-server-desktop-2.png"
    },
    {
      "phase": "before",
      "theme": "light-plus",
      "viewport": "desktop",
      "id": "add-backend-local-guidance-toggle",
      "focusVisible": true,
      "color": "oklch(0.809 0.105 251.813)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "2px",
      "background": [
        229,
        229,
        229
      ],
      "contrast": 1.4395344799646832,
      "width": 1440,
      "insideViewport": true,
      "overflow": false,
      "capture": "before-light-plus-add-backend-local-guidance-toggle-desktop-2.png"
    },
    {
      "phase": "before",
      "theme": "light-plus",
      "viewport": "phone",
      "id": "add-backend-option-agent-server",
      "focusVisible": true,
      "color": "oklch(0.809 0.105 251.813)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "-2px",
      "background": [
        238,
        238,
        238
      ],
      "contrast": 1.562938209583341,
      "width": 390,
      "insideViewport": true,
      "overflow": false,
      "capture": "before-light-plus-add-backend-option-agent-server-phone-2.png"
    },
    {
      "phase": "before",
      "theme": "light-plus",
      "viewport": "phone",
      "id": "add-backend-local-guidance-toggle",
      "focusVisible": true,
      "color": "oklch(0.809 0.105 251.813)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "2px",
      "background": [
        238,
        238,
        238
      ],
      "contrast": 1.562938209583341,
      "width": 390,
      "insideViewport": true,
      "overflow": false,
      "capture": "before-light-plus-add-backend-local-guidance-toggle-phone-2.png"
    },
    {
      "phase": "before",
      "theme": "solarized-light",
      "viewport": "desktop",
      "id": "add-backend-option-agent-server",
      "focusVisible": true,
      "color": "oklch(0.809 0.105 251.813)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "-2px",
      "background": [
        240,
        233,
        214
      ],
      "contrast": 1.4966012264436193,
      "width": 1440,
      "insideViewport": true,
      "overflow": false,
      "capture": "before-solarized-light-add-backend-option-agent-server-desktop-2.png"
    },
    {
      "phase": "before",
      "theme": "solarized-light",
      "viewport": "desktop",
      "id": "add-backend-local-guidance-toggle",
      "focusVisible": true,
      "color": "oklch(0.809 0.105 251.813)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "2px",
      "background": [
        230,
        223,
        204
      ],
      "contrast": 1.3636182532093144,
      "width": 1440,
      "insideViewport": true,
      "overflow": false,
      "capture": "before-solarized-light-add-backend-local-guidance-toggle-desktop-2.png"
    },
    {
      "phase": "before",
      "theme": "solarized-light",
      "viewport": "phone",
      "id": "add-backend-option-agent-server",
      "focusVisible": true,
      "color": "oklch(0.809 0.105 251.813)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "-2px",
      "background": [
        240,
        233,
        214
      ],
      "contrast": 1.4966012264436193,
      "width": 390,
      "insideViewport": true,
      "overflow": false,
      "capture": "before-solarized-light-add-backend-option-agent-server-phone-2.png"
    },
    {
      "phase": "before",
      "theme": "solarized-light",
      "viewport": "phone",
      "id": "add-backend-local-guidance-toggle",
      "focusVisible": true,
      "color": "oklch(0.809 0.105 251.813)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "2px",
      "background": [
        240,
        233,
        214
      ],
      "contrast": 1.4966012264436193,
      "width": 390,
      "insideViewport": true,
      "overflow": false,
      "capture": "before-solarized-light-add-backend-local-guidance-toggle-phone-2.png"
    },
    {
      "phase": "before",
      "theme": "openhands-deepsea",
      "viewport": "desktop",
      "id": "add-backend-option-agent-server",
      "focusVisible": true,
      "color": "oklch(0.809 0.105 251.813)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "-2px",
      "background": [
        44,
        49,
        63
      ],
      "contrast": 7.156523809334319,
      "width": 1440,
      "insideViewport": true,
      "overflow": false,
      "capture": "before-openhands-deepsea-add-backend-option-agent-server-desktop-2.png"
    },
    {
      "phase": "before",
      "theme": "openhands-deepsea",
      "viewport": "desktop",
      "id": "add-backend-local-guidance-toggle",
      "focusVisible": true,
      "color": "oklch(0.809 0.105 251.813)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "2px",
      "background": [
        75,
        84,
        104
      ],
      "contrast": 4.184979315155967,
      "width": 1440,
      "insideViewport": true,
      "overflow": false,
      "capture": "before-openhands-deepsea-add-backend-local-guidance-toggle-desktop-2.png"
    },
    {
      "phase": "before",
      "theme": "openhands-deepsea",
      "viewport": "phone",
      "id": "add-backend-option-agent-server",
      "focusVisible": true,
      "color": "oklch(0.809 0.105 251.813)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "-2px",
      "background": [
        44,
        49,
        63
      ],
      "contrast": 7.156523809334319,
      "width": 390,
      "insideViewport": true,
      "overflow": false,
      "capture": "before-openhands-deepsea-add-backend-option-agent-server-phone-2.png"
    },
    {
      "phase": "before",
      "theme": "openhands-deepsea",
      "viewport": "phone",
      "id": "add-backend-local-guidance-toggle",
      "focusVisible": true,
      "color": "oklch(0.809 0.105 251.813)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "2px",
      "background": [
        44,
        49,
        63
      ],
      "contrast": 7.156523809334319,
      "width": 390,
      "insideViewport": true,
      "overflow": false,
      "capture": "before-openhands-deepsea-add-backend-local-guidance-toggle-phone-2.png"
    },
    {
      "phase": "before",
      "theme": "openhands-neutral",
      "viewport": "desktop",
      "id": "add-backend-option-agent-server",
      "focusVisible": true,
      "color": "oklch(0.809 0.105 251.813)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "-2px",
      "background": [
        40,
        40,
        40
      ],
      "contrast": 8.130313437083434,
      "width": 1440,
      "insideViewport": true,
      "overflow": false,
      "capture": "before-openhands-neutral-add-backend-option-agent-server-desktop-2.png"
    },
    {
      "phase": "before",
      "theme": "openhands-neutral",
      "viewport": "desktop",
      "id": "add-backend-local-guidance-toggle",
      "focusVisible": true,
      "color": "oklch(0.809 0.105 251.813)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "2px",
      "background": [
        64,
        64,
        64
      ],
      "contrast": 5.717744385450572,
      "width": 1440,
      "insideViewport": true,
      "overflow": false,
      "capture": "before-openhands-neutral-add-backend-local-guidance-toggle-desktop-2.png"
    },
    {
      "phase": "before",
      "theme": "openhands-neutral",
      "viewport": "phone",
      "id": "add-backend-option-agent-server",
      "focusVisible": true,
      "color": "oklch(0.809 0.105 251.813)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "-2px",
      "background": [
        40,
        40,
        40
      ],
      "contrast": 8.130313437083434,
      "width": 390,
      "insideViewport": true,
      "overflow": false,
      "capture": "before-openhands-neutral-add-backend-option-agent-server-phone-2.png"
    },
    {
      "phase": "before",
      "theme": "openhands-neutral",
      "viewport": "phone",
      "id": "add-backend-local-guidance-toggle",
      "focusVisible": true,
      "color": "oklch(0.809 0.105 251.813)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "2px",
      "background": [
        40,
        40,
        40
      ],
      "contrast": 8.130313437083434,
      "width": 390,
      "insideViewport": true,
      "overflow": false,
      "capture": "before-openhands-neutral-add-backend-local-guidance-toggle-phone-2.png"
    },
    {
      "phase": "before",
      "theme": "openhands-neo",
      "viewport": "desktop",
      "id": "add-backend-option-agent-server",
      "focusVisible": true,
      "color": "oklch(0.809 0.105 251.813)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "-2px",
      "background": [
        40,
        40,
        40
      ],
      "contrast": 8.130313437083434,
      "width": 1440,
      "insideViewport": true,
      "overflow": false,
      "capture": "before-openhands-neo-add-backend-option-agent-server-desktop-2.png"
    },
    {
      "phase": "before",
      "theme": "openhands-neo",
      "viewport": "desktop",
      "id": "add-backend-local-guidance-toggle",
      "focusVisible": true,
      "color": "oklch(0.809 0.105 251.813)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "2px",
      "background": [
        64,
        64,
        64
      ],
      "contrast": 5.717744385450572,
      "width": 1440,
      "insideViewport": true,
      "overflow": false,
      "capture": "before-openhands-neo-add-backend-local-guidance-toggle-desktop-2.png"
    },
    {
      "phase": "before",
      "theme": "openhands-neo",
      "viewport": "phone",
      "id": "add-backend-option-agent-server",
      "focusVisible": true,
      "color": "oklch(0.809 0.105 251.813)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "-2px",
      "background": [
        40,
        40,
        40
      ],
      "contrast": 8.130313437083434,
      "width": 390,
      "insideViewport": true,
      "overflow": false,
      "capture": "before-openhands-neo-add-backend-option-agent-server-phone-2.png"
    },
    {
      "phase": "before",
      "theme": "openhands-neo",
      "viewport": "phone",
      "id": "add-backend-local-guidance-toggle",
      "focusVisible": true,
      "color": "oklch(0.809 0.105 251.813)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "2px",
      "background": [
        40,
        40,
        40
      ],
      "contrast": 8.130313437083434,
      "width": 390,
      "insideViewport": true,
      "overflow": false,
      "capture": "before-openhands-neo-add-backend-local-guidance-toggle-phone-2.png"
    }
  ],
  "after": [
    {
      "phase": "after",
      "theme": "light-plus",
      "viewport": "desktop",
      "id": "add-backend-option-agent-server",
      "focusVisible": true,
      "color": "rgb(0, 122, 204)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "-2px",
      "background": [
        238,
        238,
        238
      ],
      "contrast": 3.8876422825666905,
      "width": 1440,
      "insideViewport": true,
      "overflow": false,
      "capture": "after-light-plus-add-backend-option-agent-server-desktop.png"
    },
    {
      "phase": "after",
      "theme": "light-plus",
      "viewport": "desktop",
      "id": "add-backend-local-guidance-toggle",
      "focusVisible": true,
      "color": "rgb(0, 122, 204)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "2px",
      "background": [
        229,
        229,
        229
      ],
      "contrast": 3.5806886524421717,
      "width": 1440,
      "insideViewport": true,
      "overflow": false,
      "capture": "after-light-plus-add-backend-local-guidance-toggle-desktop.png"
    },
    {
      "phase": "after",
      "theme": "light-plus",
      "viewport": "phone",
      "id": "add-backend-option-agent-server",
      "focusVisible": true,
      "color": "rgb(0, 122, 204)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "-2px",
      "background": [
        238,
        238,
        238
      ],
      "contrast": 3.8876422825666905,
      "width": 390,
      "insideViewport": true,
      "overflow": false,
      "capture": "after-light-plus-add-backend-option-agent-server-phone.png"
    },
    {
      "phase": "after",
      "theme": "light-plus",
      "viewport": "phone",
      "id": "add-backend-local-guidance-toggle",
      "focusVisible": true,
      "color": "rgb(0, 122, 204)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "2px",
      "background": [
        238,
        238,
        238
      ],
      "contrast": 3.8876422825666905,
      "width": 390,
      "insideViewport": true,
      "overflow": false,
      "capture": "after-light-plus-add-backend-local-guidance-toggle-phone.png"
    },
    {
      "phase": "after",
      "theme": "solarized-light",
      "viewport": "desktop",
      "id": "add-backend-option-agent-server",
      "focusVisible": true,
      "color": "rgb(34, 127, 190)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "-2px",
      "background": [
        240,
        233,
        214
      ],
      "contrast": 3.575517186842004,
      "width": 1440,
      "insideViewport": true,
      "overflow": false,
      "capture": "after-solarized-light-add-backend-option-agent-server-desktop.png"
    },
    {
      "phase": "after",
      "theme": "solarized-light",
      "viewport": "desktop",
      "id": "add-backend-local-guidance-toggle",
      "focusVisible": true,
      "color": "rgb(34, 127, 190)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "2px",
      "background": [
        230,
        223,
        204
      ],
      "contrast": 3.2578087031422416,
      "width": 1440,
      "insideViewport": true,
      "overflow": false,
      "capture": "after-solarized-light-add-backend-local-guidance-toggle-desktop.png"
    },
    {
      "phase": "after",
      "theme": "solarized-light",
      "viewport": "phone",
      "id": "add-backend-option-agent-server",
      "focusVisible": true,
      "color": "rgb(34, 127, 190)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "-2px",
      "background": [
        240,
        233,
        214
      ],
      "contrast": 3.575517186842004,
      "width": 390,
      "insideViewport": true,
      "overflow": false,
      "capture": "after-solarized-light-add-backend-option-agent-server-phone.png"
    },
    {
      "phase": "after",
      "theme": "solarized-light",
      "viewport": "phone",
      "id": "add-backend-local-guidance-toggle",
      "focusVisible": true,
      "color": "rgb(34, 127, 190)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "2px",
      "background": [
        240,
        233,
        214
      ],
      "contrast": 3.575517186842004,
      "width": 390,
      "insideViewport": true,
      "overflow": false,
      "capture": "after-solarized-light-add-backend-local-guidance-toggle-phone.png"
    },
    {
      "phase": "after",
      "theme": "openhands-deepsea",
      "viewport": "desktop",
      "id": "add-backend-option-agent-server",
      "focusVisible": true,
      "color": "rgb(255, 255, 255)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "-2px",
      "background": [
        44,
        49,
        63
      ],
      "contrast": 12.977415096477092,
      "width": 1440,
      "insideViewport": true,
      "overflow": false,
      "capture": "after-openhands-deepsea-add-backend-option-agent-server-desktop.png"
    },
    {
      "phase": "after",
      "theme": "openhands-deepsea",
      "viewport": "desktop",
      "id": "add-backend-local-guidance-toggle",
      "focusVisible": true,
      "color": "rgb(255, 255, 255)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "2px",
      "background": [
        75,
        84,
        104
      ],
      "contrast": 7.588909810110897,
      "width": 1440,
      "insideViewport": true,
      "overflow": false,
      "capture": "after-openhands-deepsea-add-backend-local-guidance-toggle-desktop.png"
    },
    {
      "phase": "after",
      "theme": "openhands-deepsea",
      "viewport": "phone",
      "id": "add-backend-option-agent-server",
      "focusVisible": true,
      "color": "rgb(255, 255, 255)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "-2px",
      "background": [
        44,
        49,
        63
      ],
      "contrast": 12.977415096477092,
      "width": 390,
      "insideViewport": true,
      "overflow": false,
      "capture": "after-openhands-deepsea-add-backend-option-agent-server-phone.png"
    },
    {
      "phase": "after",
      "theme": "openhands-deepsea",
      "viewport": "phone",
      "id": "add-backend-local-guidance-toggle",
      "focusVisible": true,
      "color": "rgb(255, 255, 255)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "2px",
      "background": [
        44,
        49,
        63
      ],
      "contrast": 12.977415096477092,
      "width": 390,
      "insideViewport": true,
      "overflow": false,
      "capture": "after-openhands-deepsea-add-backend-local-guidance-toggle-phone.png"
    },
    {
      "phase": "after",
      "theme": "openhands-neutral",
      "viewport": "desktop",
      "id": "add-backend-option-agent-server",
      "focusVisible": true,
      "color": "rgb(255, 255, 255)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "-2px",
      "background": [
        40,
        40,
        40
      ],
      "contrast": 14.743254567235402,
      "width": 1440,
      "insideViewport": true,
      "overflow": false,
      "capture": "after-openhands-neutral-add-backend-option-agent-server-desktop.png"
    },
    {
      "phase": "after",
      "theme": "openhands-neutral",
      "viewport": "desktop",
      "id": "add-backend-local-guidance-toggle",
      "focusVisible": true,
      "color": "rgb(255, 255, 255)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "2px",
      "background": [
        64,
        64,
        64
      ],
      "contrast": 10.368377760269818,
      "width": 1440,
      "insideViewport": true,
      "overflow": false,
      "capture": "after-openhands-neutral-add-backend-local-guidance-toggle-desktop.png"
    },
    {
      "phase": "after",
      "theme": "openhands-neutral",
      "viewport": "phone",
      "id": "add-backend-option-agent-server",
      "focusVisible": true,
      "color": "rgb(255, 255, 255)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "-2px",
      "background": [
        40,
        40,
        40
      ],
      "contrast": 14.743254567235402,
      "width": 390,
      "insideViewport": true,
      "overflow": false,
      "capture": "after-openhands-neutral-add-backend-option-agent-server-phone.png"
    },
    {
      "phase": "after",
      "theme": "openhands-neutral",
      "viewport": "phone",
      "id": "add-backend-local-guidance-toggle",
      "focusVisible": true,
      "color": "rgb(255, 255, 255)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "2px",
      "background": [
        40,
        40,
        40
      ],
      "contrast": 14.743254567235402,
      "width": 390,
      "insideViewport": true,
      "overflow": false,
      "capture": "after-openhands-neutral-add-backend-local-guidance-toggle-phone.png"
    },
    {
      "phase": "after",
      "theme": "openhands-neo",
      "viewport": "desktop",
      "id": "add-backend-option-agent-server",
      "focusVisible": true,
      "color": "rgb(255, 255, 255)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "-2px",
      "background": [
        40,
        40,
        40
      ],
      "contrast": 14.743254567235402,
      "width": 1440,
      "insideViewport": true,
      "overflow": false,
      "capture": "after-openhands-neo-add-backend-option-agent-server-desktop.png"
    },
    {
      "phase": "after",
      "theme": "openhands-neo",
      "viewport": "desktop",
      "id": "add-backend-local-guidance-toggle",
      "focusVisible": true,
      "color": "rgb(255, 255, 255)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "2px",
      "background": [
        64,
        64,
        64
      ],
      "contrast": 10.368377760269818,
      "width": 1440,
      "insideViewport": true,
      "overflow": false,
      "capture": "after-openhands-neo-add-backend-local-guidance-toggle-desktop.png"
    },
    {
      "phase": "after",
      "theme": "openhands-neo",
      "viewport": "phone",
      "id": "add-backend-option-agent-server",
      "focusVisible": true,
      "color": "rgb(255, 255, 255)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "-2px",
      "background": [
        40,
        40,
        40
      ],
      "contrast": 14.743254567235402,
      "width": 390,
      "insideViewport": true,
      "overflow": false,
      "capture": "after-openhands-neo-add-backend-option-agent-server-phone.png"
    },
    {
      "phase": "after",
      "theme": "openhands-neo",
      "viewport": "phone",
      "id": "add-backend-local-guidance-toggle",
      "focusVisible": true,
      "color": "rgb(255, 255, 255)",
      "outlineWidth": "2px",
      "outlineStyle": "solid",
      "outlineOffset": "2px",
      "background": [
        40,
        40,
        40
      ],
      "contrast": 14.743254567235402,
      "width": 390,
      "insideViewport": true,
      "overflow": false,
      "capture": "after-openhands-neo-add-backend-local-guidance-toggle-phone.png"
    }
  ],
  "legacyScrim": {
    "before": {
      "sourceClassName": "fixed inset-0 z-40 bg-black bg-opacity-50 md:hidden",
      "backgrounds": [
        "var(--color-black)"
      ]
    },
    "after": {
      "sourceClassName": "fixed inset-0 z-40 bg-black/50 md:hidden",
      "backgrounds": [
        "color-mix(in srgb, #000 50%, transparent)",
        "color-mix(in oklab, var(--color-black) 50%, transparent)"
      ]
    }
  },
  "legacyScope": "Exported SettingsMobileDrawer; current application uses SettingsMobileHub. This scene verifies the actual build contract, not a live navigation change.",
  "unitTests": 173,
  "hostFocusBrowserRegression": 1,
  "rawColorWarnings": {
    "before": 133,
    "after": 130
  },
  "music": "Original quiet ambience from the earlier series film at 70% of its existing quiet level."
}