@vitronai/alethia 0.8.1 → 0.8.3

package/README.md

@@ -164,6 +164,8 @@ To pin a specific runtime version (reproducible CI, bisection, deliberate stay-b
 
 Five literal prompts. Paste each into Claude / Cursor / Cline in order. The agent runs Alethia for you.
 
+The cockpit window opens automatically and paints each step live as the agent runs — green for pass, blue for type, red for EA1 block. (Since 0.8.3 the bridge defaults `highlights: true` for `alethia_tell` so a human watching sees the run; agents can pass `highlights: false` for max-speed CI runs, or set `ALETHIA_HIGHLIGHTS=0` in the spawn env.)
+
 ### 1. Start the bundled demo server
 
 Paste:
@@ -196,7 +198,7 @@ Paste:
 > *expect block: click Purge Audit Log*
 > *expect block: click Wire Funds"*
 
-**`expect block:` is unique to Alethia.** The step passes only when the **EA1 policy gate** — a framework-level safety layer no other E2E tool ships — refuses the action with reason code `DENY_WRITE_HIGH`. Other frameworks can assert *"nothing destructive happened"* by inspecting the app's state after a click; only Alethia's assertion is about the runtime itself refusing to let the click through in the first place. Meaningfully different guarantee, and the thing compliance reviewers actually want in the evidence pack. This run should report all three clicks blocked.
+**`expect block:` is unique to Alethia.** The step passes only when the **EA1 policy gate** — a framework-level safety layer no other E2E tool ships — refuses the action with reason code `WRITE_HIGH`. Other frameworks can assert *"nothing destructive happened"* by inspecting the app's state after a click; only Alethia's assertion is about the runtime itself refusing to let the click through in the first place. Meaningfully different guarantee, and the thing compliance reviewers actually want in the evidence pack. This run should report all three clicks blocked.
 
 Shortcut if you want Alethia to auto-discover destructive controls instead of naming them:
 
@@ -256,6 +258,7 @@ If you don't care about any of those (quick iteration, scratch testing), you can
 | `alethia_export_session` | Signed evidence pack of the whole session. |
 | `alethia_activate_kill_switch` / `alethia_reset_kill_switch` | Emergency halt and resume. |
 | `alethia_serve_demo` | Start the bundled localhost demo server. |
+| `alethia_show_cockpit` / `alethia_hide_cockpit` | Toggle the live oversight window mid-session. |
 
 Destructive actions (delete, purchase, transfer, liquidate, revoke, terminate, ...) are blocked by default under the hardened local-only profile. Sensitive-input fields (passwords, tokens, credit cards) are blocked unless `allowSensitiveInput: true` is passed. Profile overrides from the agent are stripped by the bridge — profile changes require human configuration.
 
@@ -305,7 +308,7 @@ alethia-mcp --debug          Run with debug logging on stderr
 | `ALETHIA_DEBUG` | (unset) | Set to `1` for debug logging on stderr |
 | `ALETHIA_HEADLESS` | (unset) | Set to `1` to hide the cockpit window. Default is visible. CI environments (`CI=1`, `GITHUB_ACTIONS`, etc.) auto-hide. |
 | `ALETHIA_VISIBLE` | (unset) | **Deprecated** — set to `0` as a legacy alias for `ALETHIA_HEADLESS=1`. Removed in a future release. |
-| `ALETHIA_HIGHLIGHTS` | (unset) | Set to `1` to overlay per-step highlights on the target |
+| `ALETHIA_HIGHLIGHTS` | (default on for `tell`) | Per-step highlights on the target. Default ON since 0.8.3 so a human watching the cockpit sees the run. Set to `0` to disable for headless / max-speed runs. Per-call `highlights:false` overrides this default. |
 | `ALETHIA_RUNTIME_VERSION` | (unset) | Pin the bridge to a specific runtime version (e.g. `0.4.0`). By default the bridge queries GitHub Releases for the current latest runtime and downloads that. Use this for reproducible CI, bisection, or deliberately staying on an older runtime. |
 | `ALETHIA_RUNTIME_DIR` | `~/.alethia/runtime` | Where the auto-installed runtime lives. Override for sandboxing or to stash multiple installs. |
 | `ALETHIA_BRIDGE_VERSION` | (unset) | Pin the bridge itself to a specific version (e.g. `0.8.0`). Skips the npm auto-update check. For reproducible CI or deliberate stay-behind. |
@@ -340,9 +343,9 @@ alethia-mcp --debug          Run with debug logging on stderr
 2. Confirm the runtime process is listening on `127.0.0.1:47432`.
 3. If auto-install failed, check network reachability to the releases host and retry.
 
-### "DENY_WRITE_HIGH" in the audit log
+### "WRITE_HIGH" / "EA1 POLICY BLOCK" in the audit log
 
-A destructive action was blocked by the default `controlled-web` profile. This is correct behavior. Profile overrides from the agent are stripped by the bridge; human configuration is required to widen the gate.
+A destructive action was blocked by the default `local-only` profile. This is correct behavior. Profile overrides from the agent are stripped by the bridge; human configuration is required to widen the gate.
 
 ### "SENSITIVE_INPUT_DENIED"
 

package/demo/admin-panel.html

@@ -5,42 +5,332 @@
   <title>Admin Panel — Classified</title>
   <style>
     * { box-sizing: border-box; margin: 0; padding: 0; }
-    body { font-family: -apple-system, sans-serif; background: #0a0e17; color: #e2e8f0; min-height: 100vh; padding: 1.5rem; }
-    .header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1e293b; padding-bottom: 1rem; margin-bottom: 1.5rem; }
-    h1 { font-size: 1.4rem; }
-    .classification { background: #991b1b; color: #fecaca; padding: 0.3rem 0.8rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
-    .user-info { color: #64748b; font-size: 0.85rem; }
-    .grid { display: grid; grid-template-columns: 250px 1fr; gap: 1.5rem; }
-    .sidebar { display: flex; flex-direction: column; gap: 0.5rem; }
-    .nav-item { padding: 0.6rem 0.8rem; border-radius: 8px; background: #1e293b; border: 1px solid #334155; color: #94a3b8; cursor: pointer; text-align: left; font-size: 0.9rem; }
-    .nav-item.active { background: #1e3a5f; border-color: #3b82f6; color: #e2e8f0; }
-    .content { border: 1px solid #1e293b; border-radius: 12px; background: #111827; padding: 1.5rem; }
-    .content h2 { margin-bottom: 1rem; font-size: 1.2rem; }
-    table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
-    th { text-align: left; padding: 0.6rem; color: #64748b; border-bottom: 1px solid #1e293b; font-weight: 600; }
-    td { padding: 0.6rem; border-bottom: 1px solid #0f172a; }
-    .status-active { color: #34d399; }
-    .status-suspended { color: #f87171; }
-    .status-pending { color: #fbbf24; }
-    .actions { display: flex; gap: 0.4rem; }
-    .actions button { padding: 0.3rem 0.6rem; border-radius: 6px; border: none; font-size: 0.8rem; cursor: pointer; }
-    .btn-view { background: #1e3a5f; color: #93c5fd; }
-    .btn-suspend { background: #7f1d1d; color: #fca5a5; }
-    .btn-delete { background: #991b1b; color: #fecaca; }
-    .btn-approve { background: #14532d; color: #86efac; }
-    .audit-log { margin-top: 1rem; font-family: monospace; font-size: 0.8rem; background: #0a0e17; border: 1px solid #1e293b; border-radius: 8px; padding: 0.8rem; max-height: 200px; overflow-y: auto; }
-    .audit-entry { padding: 0.2rem 0; color: #64748b; }
-    .audit-entry .timestamp { color: #475569; }
-    .audit-entry .action { color: #fbbf24; }
-    .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 100; align-items: center; justify-content: center; }
-    .modal.visible { display: flex; }
-    .modal-content { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 1.5rem; max-width: 400px; text-align: center; }
-    .modal-content h3 { color: #f87171; margin-bottom: 0.8rem; }
-    .modal-content p { color: #94a3b8; margin-bottom: 1rem; }
-    .modal-actions { display: flex; gap: 0.8rem; justify-content: center; }
-    .modal-actions button { padding: 0.5rem 1.2rem; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; }
-    .btn-cancel { background: #334155; color: #e2e8f0; }
-    .btn-confirm-delete { background: #991b1b; color: white; }
+    :root {
+      --bg: #08070d;
+      --bg-1: #110e1c;
+      --bg-2: #1a1428;
+      --edge: rgba(255,255,255,.06);
+      --edge-strong: rgba(255,255,255,.12);
+      --ink: #f5f0ff;
+      --ink-2: #d8d3e8;
+      --ink-muted: #a8a0c5;
+      --ink-faint: #6b6488;
+      --purple: #a78bfa;
+      --purple-bright: #c4b5fd;
+      --purple-deep: #5b21b6;
+      --pink: #f0abfc;
+      --indigo: #818cf8;
+      --emerald: #10b981;
+      --emerald-bright: #34d399;
+      --red: #ef4444;
+      --red-bright: #f87171;
+      --amber: #f59e0b;
+      --amber-bright: #fbbf24;
+      --teal: #14b8a6;
+    }
+    html { color-scheme: dark; }
+    body {
+      font-family: "SF Pro Display", -apple-system, system-ui, sans-serif;
+      background:
+        radial-gradient(ellipse 70% 40% at 10% -10%, rgba(167,139,250,.10), transparent 70%),
+        radial-gradient(ellipse 60% 40% at 90% 110%, rgba(240,171,252,.06), transparent 70%),
+        var(--bg);
+      background-attachment: fixed;
+      color: var(--ink-2);
+      min-height: 100vh;
+      padding: 1.5rem 1.75rem 2rem;
+      font-size: 13.5px;
+      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    /* Header */
+    .header {
+      display: flex; justify-content: space-between; align-items: center;
+      padding-bottom: 16px;
+      margin-bottom: 22px;
+      border-bottom: 1px solid var(--edge);
+    }
+    .header > div { display: flex; flex-direction: column; gap: 4px; }
+    h1 {
+      font-size: 19px; font-weight: 700;
+      color: var(--ink); letter-spacing: -.015em;
+      display: inline-flex; align-items: center; gap: 10px;
+    }
+    h1::before {
+      content: ""; width: 8px; height: 8px; border-radius: 999px;
+      background: var(--purple);
+      box-shadow: 0 0 12px rgba(167,139,250,.7);
+    }
+    .user-info {
+      color: var(--ink-faint);
+      font-size: 12px;
+      font-family: ui-monospace, "SF Mono", monospace;
+    }
+    .classification {
+      font-family: ui-monospace, "SF Mono", monospace;
+      background: linear-gradient(135deg, rgba(127,29,29,.85), rgba(127,29,29,.55));
+      color: #fecaca;
+      padding: 5px 10px;
+      border-radius: 4px;
+      font-size: 10.5px;
+      font-weight: 800;
+      letter-spacing: .12em;
+      text-transform: uppercase;
+      border: 1px solid rgba(252,165,165,.3);
+    }
+
+    /* Layout */
+    .grid {
+      display: grid;
+      grid-template-columns: 240px 1fr;
+      gap: 18px;
+      align-items: start;
+    }
+
+    /* Sidebar */
+    .sidebar {
+      display: flex; flex-direction: column;
+      gap: 4px;
+      padding: 8px;
+      border-radius: 12px;
+      background: linear-gradient(180deg, var(--bg-1), rgba(17,14,28,.5));
+      border: 1px solid var(--edge);
+      box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
+    }
+    .nav-item {
+      position: relative;
+      padding: 10px 14px 10px 18px;
+      border-radius: 8px;
+      background: transparent;
+      border: 1px solid transparent;
+      color: var(--ink-muted);
+      cursor: pointer;
+      text-align: left;
+      font: inherit;
+      font-size: 13px;
+      font-weight: 500;
+      transition: background .14s, color .14s, border-color .14s;
+    }
+    .nav-item::before {
+      content: "";
+      position: absolute;
+      left: 6px; top: 14px; bottom: 14px;
+      width: 2px;
+      border-radius: 2px;
+      background: transparent;
+      transition: background .14s;
+    }
+    .nav-item:hover {
+      background: rgba(255,255,255,.04);
+      color: var(--ink);
+    }
+    .nav-item.active {
+      background: rgba(167,139,250,.10);
+      color: var(--purple-bright);
+      font-weight: 600;
+    }
+    .nav-item.active::before {
+      background: var(--purple);
+      box-shadow: 0 0 8px rgba(167,139,250,.7);
+    }
+
+    /* Content panel */
+    .content {
+      border: 1px solid var(--edge);
+      border-radius: 14px;
+      background: linear-gradient(180deg, var(--bg-1), rgba(17,14,28,.4));
+      padding: 22px 24px;
+      box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
+    }
+    .content h2 {
+      font-size: 15px; font-weight: 700;
+      color: var(--ink);
+      margin-bottom: 16px;
+      letter-spacing: -.01em;
+      display: inline-flex; align-items: center; gap: 8px;
+    }
+    .content h2::before {
+      content: ""; width: 4px; height: 4px; border-radius: 999px;
+      background: var(--purple);
+      box-shadow: 0 0 6px var(--purple);
+    }
+
+    /* Table */
+    table { width: 100%; border-collapse: collapse; font-size: 13px; }
+    th {
+      text-align: left;
+      padding: 10px 12px;
+      color: var(--ink-faint);
+      border-bottom: 1px solid var(--edge);
+      font-weight: 600;
+      font-size: 10.5px;
+      text-transform: uppercase;
+      letter-spacing: .08em;
+    }
+    td {
+      padding: 11px 12px;
+      border-bottom: 1px solid rgba(255,255,255,.03);
+      color: var(--ink-2);
+      vertical-align: middle;
+    }
+    tbody tr { transition: background .12s; }
+    tbody tr:hover { background: rgba(167,139,250,.04); }
+    tbody tr:last-child td { border-bottom: none; }
+
+    /* Status pills */
+    .status-active, .status-suspended, .status-pending {
+      display: inline-block;
+      padding: 3px 10px;
+      border-radius: 999px;
+      font-size: 11px; font-weight: 600;
+      font-family: ui-monospace, "SF Mono", monospace;
+      letter-spacing: .02em;
+    }
+    .status-active {
+      color: var(--emerald-bright);
+      background: rgba(16,185,129,.10);
+      border: 1px solid rgba(16,185,129,.3);
+    }
+    .status-suspended {
+      color: var(--red-bright);
+      background: rgba(239,68,68,.10);
+      border: 1px solid rgba(239,68,68,.3);
+    }
+    .status-pending {
+      color: var(--amber-bright);
+      background: rgba(245,158,11,.10);
+      border: 1px solid rgba(245,158,11,.3);
+    }
+
+    /* Action buttons */
+    .actions { display: flex; gap: 6px; }
+    .actions button {
+      padding: 5px 11px;
+      border-radius: 6px;
+      border: 1px solid var(--edge);
+      background: rgba(255,255,255,.02);
+      color: var(--ink-2);
+      cursor: pointer;
+      font: inherit;
+      font-size: 11.5px;
+      font-weight: 600;
+      transition: background .12s, border-color .12s, color .12s, transform .08s;
+    }
+    .actions button:hover { background: rgba(255,255,255,.05); border-color: var(--edge-strong); }
+    .actions button:active { transform: translateY(1px); }
+    .btn-view {
+      color: var(--indigo);
+      border-color: rgba(129,140,248,.35);
+      background: rgba(129,140,248,.06);
+    }
+    .btn-view:hover { background: rgba(129,140,248,.14); border-color: var(--indigo); }
+    .btn-suspend {
+      color: var(--amber-bright);
+      border-color: rgba(245,158,11,.4);
+      background: rgba(245,158,11,.06);
+    }
+    .btn-suspend:hover { background: rgba(245,158,11,.14); border-color: var(--amber); }
+    .btn-delete {
+      color: var(--red-bright);
+      border-color: rgba(239,68,68,.4);
+      background: rgba(239,68,68,.06);
+    }
+    .btn-delete:hover { background: rgba(239,68,68,.14); border-color: var(--red); }
+    .btn-approve {
+      color: var(--emerald-bright);
+      border-color: rgba(16,185,129,.4);
+      background: rgba(16,185,129,.06);
+    }
+    .btn-approve:hover { background: rgba(16,185,129,.14); border-color: var(--emerald); }
+
+    /* Audit log */
+    .audit-log {
+      margin-top: 18px;
+      font-family: ui-monospace, "SF Mono", monospace;
+      font-size: 11.5px;
+      background: rgba(255,255,255,.02);
+      border: 1px solid var(--edge);
+      border-radius: 10px;
+      padding: 12px 14px;
+      max-height: 220px;
+      overflow-y: auto;
+    }
+    .audit-entry {
+      padding: 4px 0;
+      color: var(--ink-muted);
+      display: flex; gap: 10px;
+      border-bottom: 1px dashed rgba(255,255,255,.03);
+    }
+    .audit-entry:last-child { border-bottom: none; }
+    .audit-entry .timestamp { color: var(--ink-faint); white-space: nowrap; }
+    .audit-entry .action {
+      color: var(--purple-bright);
+      font-weight: 700;
+      letter-spacing: .04em;
+      min-width: 96px;
+      flex-shrink: 0;
+    }
+
+    /* Modal */
+    .modal {
+      display: none;
+      position: fixed; inset: 0;
+      background: rgba(8,7,13,.85);
+      backdrop-filter: blur(8px);
+      z-index: 100;
+      align-items: center; justify-content: center;
+    }
+    .modal.visible { display: flex; animation: modalFadeIn .2s ease-out; }
+    @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
+    .modal-content {
+      background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
+      border: 1px solid rgba(239,68,68,.45);
+      border-radius: 14px;
+      padding: 24px 26px;
+      max-width: 440px;
+      text-align: center;
+      box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
+    }
+    .modal-content h3 {
+      color: var(--red-bright);
+      margin-bottom: 10px;
+      font-size: 16px;
+      font-weight: 700;
+    }
+    .modal-content p {
+      color: var(--ink-2);
+      margin-bottom: 18px;
+      font-size: 13px;
+      line-height: 1.55;
+    }
+    .modal-actions { display: flex; gap: 10px; justify-content: center; }
+    .modal-actions button {
+      padding: 9px 18px;
+      border-radius: 8px;
+      border: 1px solid var(--edge);
+      cursor: pointer;
+      font: inherit;
+      font-size: 12.5px;
+      font-weight: 600;
+      transition: background .12s, border-color .12s, color .12s, transform .08s;
+    }
+    .modal-actions button:active { transform: translateY(1px); }
+    .btn-cancel {
+      background: rgba(255,255,255,.04);
+      color: var(--ink-2);
+      border-color: var(--edge-strong);
+    }
+    .btn-cancel:hover { background: rgba(255,255,255,.08); color: var(--ink); }
+    .btn-confirm-delete {
+      background: linear-gradient(180deg, var(--red-bright), var(--red));
+      color: #fff;
+      border-color: var(--red);
+      font-weight: 700;
+    }
+    .btn-confirm-delete:hover { filter: brightness(1.08); }
+
+    ::selection { background: rgba(167,139,250,.3); }
   </style>
 </head>
 <body>