Download proof/index.html from smlflg/Human-Agent-Interface: direct link, hf CLI and curl.
- Browser
- Download file 26.9 kB
-
https://huggingface.co/smlflg/Human-Agent-Interface/resolve/main/proof/index.html
- Command line
-
hf download hf://smlflg/Human-Agent-Interface/proof/index.html
-
curl -L -o index.html https://huggingface.co/smlflg/Human-Agent-Interface/resolve/main/proof/index.html
26.9 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta | |
| name="description" | |
| content="Proof that Human Agent Interface comes from real agent practice: building systems, finding breakpoints, and taking control back." | |
| > | |
| <title>Proof | Human Agent Interface</title> | |
| <style> | |
| :root { | |
| color-scheme: dark; | |
| --ink: #f7f1df; | |
| --muted: #b7ad97; | |
| --quiet: #776f60; | |
| --void: #080806; | |
| --charcoal: #11100d; | |
| --panel: rgba(247, 241, 223, 0.065); | |
| --panel-strong: rgba(247, 241, 223, 0.12); | |
| --line: rgba(247, 241, 223, 0.17); | |
| --line-strong: rgba(247, 241, 223, 0.31); | |
| --signal: #a7ff4f; | |
| --copper: #ff9f5f; | |
| --cyan: #83dbc8; | |
| --red: #ff665c; | |
| --max: 1180px; | |
| --pad: clamp(18px, 4vw, 56px); | |
| --display: Georgia, "Times New Roman", serif; | |
| --body: "Aptos", "Segoe UI", "Helvetica Neue", sans-serif; | |
| --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| background: var(--void); | |
| } | |
| body { | |
| margin: 0; | |
| min-width: 320px; | |
| color: var(--ink); | |
| background: | |
| linear-gradient(180deg, rgba(167, 255, 79, 0.045), transparent 22rem), | |
| linear-gradient(120deg, rgba(255, 159, 95, 0.055), transparent 34rem), | |
| linear-gradient(180deg, #080806 0%, #11100d 47%, #070806 100%); | |
| font-family: var(--body); | |
| line-height: 1.5; | |
| overflow-x: hidden; | |
| } | |
| body::before { | |
| content: ""; | |
| position: fixed; | |
| inset: 0; | |
| z-index: 20; | |
| pointer-events: none; | |
| opacity: 0.25; | |
| background-image: | |
| linear-gradient(rgba(247, 241, 223, 0.04) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(247, 241, 223, 0.03) 1px, transparent 1px); | |
| background-size: 72px 72px; | |
| mask-image: linear-gradient(180deg, black, transparent 78%); | |
| } | |
| a { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| p, | |
| h1, | |
| h2, | |
| h3 { | |
| margin: 0; | |
| } | |
| .site-shell { | |
| position: relative; | |
| isolation: isolate; | |
| } | |
| .topbar { | |
| position: fixed; | |
| inset: 0 0 auto; | |
| z-index: 40; | |
| display: flex; | |
| justify-content: center; | |
| padding: 14px var(--pad) 0; | |
| pointer-events: none; | |
| } | |
| .topbar-inner { | |
| width: min(var(--max), 100%); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 18px; | |
| padding: 12px 14px; | |
| border: 1px solid rgba(247, 241, 223, 0.13); | |
| background: rgba(8, 8, 6, 0.72); | |
| backdrop-filter: blur(18px); | |
| box-shadow: 0 18px 70px rgba(0, 0, 0, 0.3); | |
| pointer-events: auto; | |
| } | |
| .brand { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| min-width: 0; | |
| color: var(--muted); | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .brand-mark { | |
| width: 30px; | |
| height: 30px; | |
| display: grid; | |
| place-items: center; | |
| flex: 0 0 auto; | |
| border: 1px solid var(--line-strong); | |
| color: var(--signal); | |
| font-size: 12px; | |
| } | |
| .nav { | |
| display: flex; | |
| align-items: center; | |
| gap: clamp(12px, 2vw, 24px); | |
| color: var(--muted); | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| } | |
| .nav a { | |
| opacity: 0.82; | |
| transition: color 160ms ease, opacity 160ms ease; | |
| } | |
| .nav a:hover, | |
| .nav a:focus-visible { | |
| color: var(--ink); | |
| opacity: 1; | |
| } | |
| .hero { | |
| min-height: 96svh; | |
| display: grid; | |
| align-items: end; | |
| padding: 126px var(--pad) 72px; | |
| border-bottom: 1px solid var(--line); | |
| background: | |
| linear-gradient(90deg, rgba(247, 241, 223, 0.075), transparent 1px), | |
| linear-gradient(180deg, rgba(247, 241, 223, 0.04), transparent 1px); | |
| background-size: 84px 84px; | |
| } | |
| .hero-inner { | |
| width: min(var(--max), 100%); | |
| min-width: 0; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: minmax(0, 0.92fr) minmax(300px, 0.48fr); | |
| gap: clamp(32px, 6vw, 88px); | |
| align-items: end; | |
| } | |
| .eyebrow, | |
| .kicker, | |
| .label { | |
| color: var(--copper); | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .eyebrow { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 18px; | |
| } | |
| .eyebrow::before { | |
| content: ""; | |
| width: 42px; | |
| height: 1px; | |
| background: var(--copper); | |
| } | |
| h1 { | |
| max-width: 920px; | |
| font-family: var(--display); | |
| font-weight: 500; | |
| font-size: clamp(3.15rem, 7.4vw, 7.2rem); | |
| line-height: 0.93; | |
| letter-spacing: 0; | |
| overflow-wrap: break-word; | |
| text-wrap: balance; | |
| } | |
| .hero-lede { | |
| max-width: 800px; | |
| min-width: 0; | |
| margin-top: 28px; | |
| color: var(--muted); | |
| font-size: clamp(1.1rem, 2.1vw, 1.45rem); | |
| line-height: 1.45; | |
| } | |
| .hero-actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| margin-top: 32px; | |
| } | |
| .button { | |
| min-height: 48px; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0 18px; | |
| border: 1px solid var(--line-strong); | |
| background: rgba(247, 241, 223, 0.045); | |
| color: var(--ink); | |
| font-weight: 700; | |
| transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; | |
| } | |
| .button:hover, | |
| .button:focus-visible { | |
| transform: translateY(-2px); | |
| border-color: rgba(167, 255, 79, 0.68); | |
| background: rgba(167, 255, 79, 0.1); | |
| } | |
| .button.primary { | |
| border-color: rgba(167, 255, 79, 0.56); | |
| background: rgba(167, 255, 79, 0.13); | |
| } | |
| .proof-panel { | |
| min-width: 0; | |
| padding: 24px; | |
| border: 1px solid var(--line); | |
| background: rgba(8, 8, 6, 0.7); | |
| box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32); | |
| } | |
| .proof-panel h2 { | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--signal); | |
| } | |
| .proof-panel p { | |
| margin-top: 14px; | |
| color: var(--muted); | |
| font-size: 0.98rem; | |
| } | |
| .proof-panel strong { | |
| color: var(--ink); | |
| font-weight: 800; | |
| } | |
| .proof-list { | |
| display: grid; | |
| gap: 12px; | |
| margin-top: 22px; | |
| padding-top: 22px; | |
| border-top: 1px solid var(--line); | |
| } | |
| .proof-list span { | |
| display: grid; | |
| grid-template-columns: 8px minmax(0, 1fr); | |
| gap: 12px; | |
| color: var(--ink); | |
| font-size: 0.95rem; | |
| } | |
| .proof-list span::before { | |
| content: ""; | |
| width: 8px; | |
| height: 8px; | |
| margin-top: 8px; | |
| flex: 0 0 auto; | |
| background: var(--signal); | |
| } | |
| section { | |
| padding: clamp(72px, 10vw, 128px) var(--pad); | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .section-inner { | |
| width: min(var(--max), 100%); | |
| min-width: 0; | |
| margin: 0 auto; | |
| } | |
| .section-head { | |
| display: grid; | |
| grid-template-columns: minmax(0, 0.9fr) minmax(260px, 0.46fr); | |
| gap: clamp(24px, 5vw, 72px); | |
| align-items: end; | |
| margin-bottom: clamp(32px, 6vw, 72px); | |
| } | |
| .section-title { | |
| max-width: 840px; | |
| margin-top: 14px; | |
| font-family: var(--display); | |
| font-weight: 500; | |
| font-size: clamp(2.2rem, 5.2vw, 4.9rem); | |
| line-height: 0.98; | |
| text-wrap: balance; | |
| } | |
| .section-copy { | |
| color: var(--muted); | |
| font-size: clamp(1rem, 1.5vw, 1.12rem); | |
| } | |
| .boundary-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 16px; | |
| } | |
| .boundary { | |
| min-height: 100%; | |
| padding: 24px; | |
| border: 1px solid var(--line); | |
| background: var(--panel); | |
| } | |
| .boundary.warn { | |
| border-color: rgba(255, 102, 92, 0.32); | |
| background: rgba(255, 102, 92, 0.055); | |
| } | |
| .boundary h3 { | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .boundary p { | |
| margin-top: 14px; | |
| color: var(--muted); | |
| } | |
| .boundary strong { | |
| color: var(--ink); | |
| } | |
| .case-list { | |
| display: grid; | |
| gap: 42px; | |
| } | |
| .case-file { | |
| display: grid; | |
| grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.72fr); | |
| gap: clamp(24px, 5vw, 62px); | |
| align-items: center; | |
| padding: clamp(22px, 4vw, 38px); | |
| border: 1px solid var(--line); | |
| background: | |
| linear-gradient(135deg, rgba(247, 241, 223, 0.08), rgba(247, 241, 223, 0.025)), | |
| rgba(8, 8, 6, 0.48); | |
| } | |
| .case-file:nth-child(even) { | |
| grid-template-columns: minmax(320px, 0.72fr) minmax(0, 0.9fr); | |
| } | |
| .case-file:nth-child(even) .case-media { | |
| order: -1; | |
| } | |
| .case-copy { | |
| min-width: 0; | |
| } | |
| .case-number { | |
| display: inline-flex; | |
| margin-bottom: 18px; | |
| color: var(--cyan); | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .case-file h3 { | |
| max-width: 720px; | |
| font-family: var(--display); | |
| font-weight: 500; | |
| font-size: clamp(2rem, 4vw, 3.8rem); | |
| line-height: 1; | |
| text-wrap: balance; | |
| } | |
| .case-file p { | |
| margin-top: 18px; | |
| color: var(--muted); | |
| font-size: 1.04rem; | |
| } | |
| .case-proof { | |
| display: grid; | |
| gap: 10px; | |
| margin-top: 24px; | |
| padding-top: 20px; | |
| border-top: 1px solid var(--line); | |
| } | |
| .case-proof span { | |
| color: var(--quiet); | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .case-proof strong { | |
| color: var(--ink); | |
| font-weight: 800; | |
| } | |
| .case-media { | |
| min-width: 0; | |
| } | |
| .case-media img { | |
| display: block; | |
| width: 100%; | |
| aspect-ratio: 16 / 10; | |
| object-fit: cover; | |
| border: 1px solid var(--line-strong); | |
| background: #050504; | |
| box-shadow: 0 24px 72px rgba(0, 0, 0, 0.36); | |
| } | |
| .method-strip { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 1px; | |
| border: 1px solid var(--line); | |
| background: var(--line); | |
| } | |
| .method-step { | |
| min-height: 180px; | |
| padding: 22px; | |
| background: #0d0d0a; | |
| } | |
| .method-step span { | |
| color: var(--signal); | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .method-step h3 { | |
| margin-top: 28px; | |
| font-size: 1.1rem; | |
| } | |
| .method-step p { | |
| margin-top: 10px; | |
| color: var(--muted); | |
| font-size: 0.95rem; | |
| } | |
| .transfer { | |
| background: | |
| linear-gradient(90deg, rgba(167, 255, 79, 0.08), transparent), | |
| #0b0c08; | |
| } | |
| .transfer-grid { | |
| display: grid; | |
| grid-template-columns: minmax(0, 0.72fr) minmax(300px, 0.5fr); | |
| gap: clamp(28px, 6vw, 86px); | |
| align-items: center; | |
| } | |
| .transfer h2 { | |
| font-family: var(--display); | |
| font-weight: 500; | |
| font-size: clamp(2.35rem, 5.8vw, 5.4rem); | |
| line-height: 0.98; | |
| text-wrap: balance; | |
| } | |
| .transfer p { | |
| margin-top: 22px; | |
| color: var(--muted); | |
| font-size: clamp(1.04rem, 1.7vw, 1.22rem); | |
| } | |
| .transfer-box { | |
| padding: 26px; | |
| border: 1px solid rgba(167, 255, 79, 0.34); | |
| background: rgba(167, 255, 79, 0.08); | |
| } | |
| .transfer-box p { | |
| margin: 0; | |
| color: var(--ink); | |
| font-size: clamp(1.3rem, 2.4vw, 2rem); | |
| line-height: 1.2; | |
| font-family: var(--display); | |
| } | |
| .transfer-box small { | |
| display: block; | |
| margin-top: 18px; | |
| color: var(--muted); | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .technical-deep-link { | |
| display: grid; | |
| grid-template-columns: minmax(0, 0.9fr) auto; | |
| gap: 24px; | |
| align-items: center; | |
| margin-top: 42px; | |
| padding: 22px; | |
| border: 1px solid rgba(131, 219, 200, 0.34); | |
| background: rgba(131, 219, 200, 0.06); | |
| } | |
| .technical-deep-link h3 { | |
| color: var(--cyan); | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .technical-deep-link p { | |
| margin-top: 10px; | |
| color: var(--muted); | |
| } | |
| footer { | |
| padding: 28px var(--pad); | |
| color: var(--quiet); | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| } | |
| .footer-inner { | |
| width: min(var(--max), 100%); | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 18px; | |
| flex-wrap: wrap; | |
| } | |
| @media (max-width: 920px) { | |
| .hero-inner, | |
| .section-head, | |
| .transfer-grid, | |
| .case-file, | |
| .case-file:nth-child(even), | |
| .technical-deep-link { | |
| grid-template-columns: 1fr; | |
| } | |
| .case-file:nth-child(even) .case-media { | |
| order: initial; | |
| } | |
| .boundary-grid, | |
| .method-strip { | |
| grid-template-columns: 1fr; | |
| } | |
| .topbar { | |
| position: absolute; | |
| } | |
| } | |
| @media (max-width: 720px) { | |
| .topbar, | |
| .hero, | |
| section { | |
| padding-left: 20px; | |
| padding-right: 20px; | |
| } | |
| .topbar-inner { | |
| width: calc(100vw - 40px); | |
| min-width: 0; | |
| max-width: calc(100vw - 40px); | |
| align-items: flex-start; | |
| flex-direction: column; | |
| } | |
| .nav { | |
| min-width: 0; | |
| width: 100%; | |
| overflow-x: auto; | |
| padding-bottom: 4px; | |
| } | |
| .hero { | |
| min-height: auto; | |
| padding-top: 150px; | |
| } | |
| .hero-inner, | |
| .section-inner { | |
| width: calc(100vw - 40px); | |
| max-width: calc(100vw - 40px); | |
| } | |
| .proof-panel, | |
| .boundary, | |
| .case-file, | |
| .transfer-box, | |
| .technical-deep-link { | |
| padding: 20px; | |
| } | |
| h1 { | |
| font-size: clamp(2.55rem, 11vw, 3rem); | |
| line-height: 1.04; | |
| text-wrap: normal; | |
| } | |
| .section-title, | |
| .transfer h2, | |
| .case-file h3 { | |
| text-wrap: normal; | |
| } | |
| .hero-lede, | |
| .proof-panel p, | |
| .proof-list span, | |
| .section-copy, | |
| .case-file p, | |
| .transfer p { | |
| overflow-wrap: anywhere; | |
| } | |
| .hero-lede { | |
| font-size: 1.02rem; | |
| } | |
| .proof-panel p, | |
| .proof-list span { | |
| font-size: 0.92rem; | |
| } | |
| .button { | |
| width: 100%; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| *, | |
| *::before, | |
| *::after { | |
| animation-duration: 0.001ms ; | |
| animation-iteration-count: 1 ; | |
| scroll-behavior: auto ; | |
| transition-duration: 0.001ms ; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="site-shell"> | |
| <header class="topbar" aria-label="Site navigation"> | |
| <div class="topbar-inner"> | |
| <a class="brand" href="../index.html" aria-label="Human Agent Interface home"> | |
| <span class="brand-mark">HAI</span> | |
| <span>Human Agent Interface</span> | |
| </a> | |
| <nav class="nav" aria-label="Site navigation"> | |
| <a href="../what_it_is/">Method</a> | |
| <a href="../proof/">Proof</a> | |
| <a href="../samuel/">Samuel</a> | |
| <a href="../product/">Offer</a> | |
| <a href="#contact">Contact</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <main id="top"> | |
| <section class="hero" aria-labelledby="hero-title"> | |
| <div class="hero-inner"> | |
| <div> | |
| <p class="eyebrow">Proof of practice</p> | |
| <h1 id="hero-title">HAI comes from real agent practice.</h1> | |
| <p class="hero-lede"> | |
| Not from a theory of agents. From building systems, watching them break, and learning how humans can take control back. | |
| </p> | |
| <div class="hero-actions"> | |
| <a class="button primary" href="#case-files">See the case files</a> | |
| <a class="button" href="../product/">Turn this into a setup</a> | |
| </div> | |
| </div> | |
| <aside class="proof-panel" aria-label="Proof claim"> | |
| <h2>What this page must prove</h2> | |
| <p> | |
| <strong>Samuel is really deep in agentic work.</strong> He has operated local agent systems, hit their failure modes, built control surfaces around them, and turned those lessons into HAI. | |
| </p> | |
| <div class="proof-list"> | |
| <span>100+ local artifacts made inspectable.</span> | |
| <span>Hundreds of local agent sessions analyzed.</span> | |
| <span>Failure modes converted into gates and working rules.</span> | |
| </div> | |
| </aside> | |
| </div> | |
| </section> | |
| <section aria-labelledby="boundary-title"> | |
| <div class="section-inner"> | |
| <div class="section-head"> | |
| <div> | |
| <p class="kicker">Evidence boundary</p> | |
| <h2 class="section-title" id="boundary-title">Internal proof is useful only when it stays honest.</h2> | |
| </div> | |
| <p class="section-copy"> | |
| The claim here is deliberately narrow. This page proves lived practice and method formation. It does not pretend to be customer ROI data. | |
| </p> | |
| </div> | |
| <div class="boundary-grid"> | |
| <article class="boundary"> | |
| <h3>What is proven enough to say</h3> | |
| <p> | |
| Samuel has used real agentic systems for his own work, exposed breakdowns such as scope drift, wrong assumptions, weak verification, and overload, then converted those breakdowns into HAI controls. | |
| </p> | |
| </article> | |
| <article class="boundary warn"> | |
| <h3>What is not claimed yet</h3> | |
| <p> | |
| This is not external customer proof, not a universal model benchmark, and not a promise that every workflow needs the same system. The transferable claim is the method: make agent work visible, gated, owned, and verifiable. | |
| </p> | |
| </article> | |
| </div> | |
| <aside class="technical-deep-link" aria-label="Technical proof deep dive"> | |
| <div> | |
| <h3>For technical buyers</h3> | |
| <p> | |
| AgentArena, First Real Harness Evaluation, and Sidecar-NG show the deeper validation layer: runs, gates, traces, eval failures, and claim boundaries. | |
| </p> | |
| </div> | |
| <a class="button" href="technical/">Dig deeper: technical proof</a> | |
| </aside> | |
| </div> | |
| </section> | |
| <section id="case-files" aria-labelledby="cases-title"> | |
| <div class="section-inner"> | |
| <div class="section-head"> | |
| <div> | |
| <p class="kicker">Four case files</p> | |
| <h2 class="section-title" id="cases-title">The proof is a chain: visibility, control, method, transfer.</h2> | |
| </div> | |
| <p class="section-copy"> | |
| Each case answers the same question in sequence: can Samuel see the problem, bound the agent role, and then produce transfer through his own decisions? | |
| </p> | |
| </div> | |
| <div class="case-list"> | |
| <article class="case-file"> | |
| <div class="case-copy"> | |
| <span class="case-number">Case file 01 / Visibility</span> | |
| <h3>When the work became too much, it became inspectable.</h3> | |
| <p> | |
| PortfolioTimeline turned a dense local build trail into a public-safe evidence surface. The point is not volume. The point is that agentic output can be sorted, inspected, and explained instead of living as private chaos. | |
| </p> | |
| <div class="case-proof"> | |
| <span>Evidence artifact</span> | |
| <strong>PortfolioTimeline screenshot and local artifact registry.</strong> | |
| </div> | |
| <p><a href="../samuel/timeline/">Open the public PortfolioTimeline.</a></p> | |
| </div> | |
| <div class="case-media"> | |
| <img src="assets/portfolio-timeline--index.png" alt="PortfolioTimeline screenshot showing an AI builder timeline"> | |
| </div> | |
| </article> | |
| <article class="case-file"> | |
| <div class="case-copy"> | |
| <span class="case-number">Case file 02 / Control</span> | |
| <h3>When agents drifted, the answer was not more agents.</h3> | |
| <p> | |
| Sidecar and the Tripwire Map are control work: read-before-edit rules, ambiguity gates, verification gates, commit approval, resource limits, and owner decisions. That is the core HAI lesson: the human needs operating boundaries, not just automation. | |
| </p> | |
| <div class="case-proof"> | |
| <span>Evidence artifact</span> | |
| <strong>Sidecar visual explainer plus technical Tripwire Map appendix.</strong> | |
| </div> | |
| </div> | |
| <div class="case-media"> | |
| <img src="assets/diagrams--sidecar-v7-visual-explainer.png" alt="Sidecar visual explainer screenshot"> | |
| </div> | |
| </article> | |
| <article class="case-file"> | |
| <div class="case-copy"> | |
| <span class="case-number">Case file 03 / Method</span> | |
| <h3>When experience was noisy, it became evidence work.</h3> | |
| <p> | |
| MetaMetaMeta and the Claude Insights timeline separate observations from evidence, task-local claims from transfer claims, and product proof from method proof. That is why HAI does not have to overclaim to be useful. | |
| </p> | |
| <div class="case-proof"> | |
| <span>Evidence artifact</span> | |
| <strong>Claude Insights profile and MetaMetaMeta evidence contract.</strong> | |
| </div> | |
| </div> | |
| <div class="case-media"> | |
| <img src="assets/claude-insights-timeline--samuel-agentic-profile-v2.png" alt="Claude Insights agentic profile screenshot"> | |
| </div> | |
| </article> | |
| <article class="case-file"> | |
| <div class="case-copy"> | |
| <span class="case-number">Case file 04 / Study transfer</span> | |
| <h3>Samuel used bounded agents to restore his own study control.</h3> | |
| <p> | |
| In the ADS study proof, he kept the decision loop with the human while using agents as bounded tooling for structure and interactive workflows. | |
| The visible artifacts are the study pages themselves and the transfer traces they expose. | |
| </p> | |
| <div class="case-proof"> | |
| <span>Evidence artifact</span> | |
| <strong>Public ADS learning suite as human-owned proof.</strong> | |
| </div> | |
| <p><a href="ads/">Open the ADS study proof.</a></p> | |
| </div> | |
| <div class="case-media"> | |
| <img src="assets/portfolio-timeline--index.png" alt="ADS study proof preview"> | |
| </div> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <section aria-labelledby="method-title"> | |
| <div class="section-inner"> | |
| <div class="section-head"> | |
| <div> | |
| <p class="kicker">The working method</p> | |
| <h2 class="section-title" id="method-title">A controllable agent workflow needs a small reality contact.</h2> | |
| </div> | |
| <p class="section-copy"> | |
| The deepest lesson from the local system is simple: do not begin with an architecture. Begin with one observable step. | |
| </p> | |
| </div> | |
| <div class="method-strip" aria-label="HAI proof method"> | |
| <article class="method-step"> | |
| <span>01</span> | |
| <h3>Purpose sentence</h3> | |
| <p>What must become easier, faster, safer, or clearer for the human?</p> | |
| </article> | |
| <article class="method-step"> | |
| <span>02</span> | |
| <h3>Smallest observable artifact</h3> | |
| <p>A file, log, screenshot, test, response, run, or decision that can be checked.</p> | |
| </article> | |
| <article class="method-step"> | |
| <span>03</span> | |
| <h3>PASS / FAIL / UNCLEAR</h3> | |
| <p>No vague progress. Either the artifact supports the next step, breaks it, or needs better measurement.</p> | |
| </article> | |
| <article class="method-step"> | |
| <span>04</span> | |
| <h3>One next step</h3> | |
| <p>No dashboard, swarm, refactor, or framework until a real artifact demands it.</p> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="transfer" id="contact" aria-labelledby="contact-title"> | |
| <div class="section-inner transfer-grid"> | |
| <div> | |
| <p class="kicker">What this means for a client</p> | |
| <h2 id="contact-title">Your AI work may not need more agents. It may need control.</h2> | |
| <p> | |
| Bring one workflow where context gets lost, agents overproduce, checks are weak, ownership is unclear, or the system feels too hard to trust. HAI turns that into a bounded setup: visible steps, gates, owner decisions, and verification. | |
| </p> | |
| <div class="hero-actions"> | |
| <a | |
| class="button primary" | |
| href="mailto:samuel@human-agent-interface.com?subject=Agentic%20workflow%20control%20proof&body=Hi%20Samuel%2C%0D%0A%0D%0AI%20have%20one%20agentic%20workflow%20that%20feels%20out%20of%20control.%0D%0A%0D%0AWhere%20it%20breaks%3A%0D%0A%0D%0AWhat%20I%20want%20to%20trust%20again%3A%0D%0A%0D%0APreferred%20time%20windows%3A" | |
| >Bring one workflow</a> | |
| <a class="button" href="../tripwire-map/">Technical appendix</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer> | |
| <div class="footer-inner"> | |
| <span>Human Agent Interface Proof</span> | |
| <span>Build systems / find breakpoints / take control back</span> | |
| </div> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> | |