Publish Pathmode intent readiness demo

README.md

@@ -1,11 +1,45 @@
 ---
 title: Intent Preflight
-emoji: 🏃
-colorFrom: purple
-colorTo: pink
+emoji: 🧭
+colorFrom: green
+colorTo: gray
 sdk: static
+app_file: index.html
 pinned: false
 short_description: Find the decisions your coding agent would have to guess.
+tags:
+  - coding-agents
+  - intent-engineering
+  - developer-tools
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Intent Preflight by Pathmode
+
+**What will your coding agent have to guess?** Paste a brief, ticket, Markdown IntentSpec, or JSON spec and check six dimensions of implementation readiness. Compare a weak checkout brief with a stronger version, inspect what the checker read, edit it, and download the exact input.
+
+This static Space runs entirely in your browser. It has no inference API, analytics, storage, or upload endpoint. A Content Security Policy blocks outbound connections. Reloading the page clears edits.
+
+## How it works
+
+The build imports Pathmode's existing web preflight parser (`lib/specProseExtract.ts`), MCP readiness engine (`packages/mcp-server/src/readiness.ts`), synthetic demo fixtures, and canonical IntentSpec serializer. The six checks cover title, objective, outcomes, constraints, edge cases, and verification. Recorded unresolved product choices are reported separately.
+
+“Needs review” means the English-language heuristics could not confirm extracted text; it does not establish that the text is wrong. Confirmations and waivers are reported as self-asserted, not authenticated here. A passing check does not prove product value, implementation quality, or authorization to build. The examples are synthetic demonstrations, not a performance benchmark.
+
+Downloads preserve the original input, including any existing metadata. They do not approve, rewrite, or update a readiness stamp in that input. Re-run preflight through the MCP server before implementation.
+
+## Continue with Pathmode
+
+- [Set up the MCP server](https://github.com/pathmodeio/mcp-server#readme)
+- [IntentSpec example dataset](https://huggingface.co/datasets/pathmode/intentspec-examples)
+- [Pathmode](https://pathmode.io)
+
+## Build from the Pathmode repository
+
+```sh
+node apps/huggingface-preflight/build.mjs
+npx tsc -p apps/huggingface-preflight/tsconfig.json --noEmit
+npx vitest run apps/huggingface-preflight/ lib/preflightReadinessParity.test.ts lib/intentMdParseParity.test.ts
+python3 -m http.server 7860 --directory apps/huggingface-preflight/dist
+```
+
+Upload only the contents of `apps/huggingface-preflight/dist/` into a Static Hugging Face Space. Do not upload the application repository, environment files, or unrelated assets. Rebuild and rerun parity tests when shared readiness logic changes.

index.html

@@ -1,19 +1,32 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="Find the decisions your coding agent would otherwise have to guess. Check your spec with Pathmode’s six deterministic readiness gates.">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; style-src 'self'; connect-src 'none'; img-src 'self' data:; base-uri 'none'; form-action 'none'">
+  <title>Intent Preflight · Pathmode</title>
+  <link rel="stylesheet" href="./style.css">
+  <script src="./app.js" defer></script>
+</head>
+<body>
+  <header><a class="brand" href="https://pathmode.io" target="_blank" rel="noopener noreferrer"><span class="brand-mark" aria-hidden="true">↗</span> pathmode</a><span class="header-note">A small check before a big build.</span><a href="https://github.com/pathmodeio/mcp-server" target="_blank" rel="noopener noreferrer">Get the MCP server ↗</a></header>
+  <main>
+    <section class="intro"><p class="eyebrow">INTENT PREFLIGHT</p><h1>What will your agent<br><span>have to guess?</span></h1><p class="lead">Find the gaps in your spec before they become decisions in your code.</p><p class="privacy"><span aria-hidden="true">◉</span> Runs in your browser · No uploads · No model calls</p></section>
+    <div class="workbench">
+      <section class="input-panel" aria-labelledby="spec-heading">
+        <div class="panel-top"><h2 id="spec-heading">01 <span>The intent</span></h2><span class="small">Markdown, JSON, or a ticket</span></div>
+        <div class="tabs" role="group" aria-label="Choose a spec"><button id="draft" aria-pressed="true">Weak example</button><button id="stronger" aria-pressed="false">Stronger example</button><button id="own" aria-pressed="false">Your spec</button></div>
+        <p id="example-note" class="example-note">A synthetic checkout brief. Plenty of direction. Very few boundaries.</p>
+        <label class="sr-only" for="spec">Spec to check</label><textarea id="spec" spellcheck="false" maxlength="50000" placeholder="Paste an intent.md, a JSON spec, or a ticket here. Nothing leaves this browser."></textarea>
+        <div class="input-actions"><button id="check" class="primary">Check readiness <span aria-hidden="true">↗</span></button><button id="download" class="secondary">Download spec ↓</button></div>
+        <p id="edit-note" class="small">Edit the example, then check it again.</p>
+      </section>
+      <section class="result-panel" aria-labelledby="results-heading"><div class="panel-top"><h2 id="results-heading">02 <span>The preflight</span></h2><span class="small">Six deterministic checks</span></div><div id="results" aria-live="polite" aria-atomic="true"></div></section>
+    </div>
+    <section class="next-step"><div><p class="eyebrow">TAKE IT INTO YOUR WORKFLOW</p><h2>Keep the intent next to the code.</h2><p>Use Pathmode’s MCP server to refine an intent with your agent,<br class="desktop"> save it as intent.md, and check it before implementation.</p></div><a class="primary link-button" href="https://github.com/pathmodeio/mcp-server#readme" target="_blank" rel="noopener noreferrer">Set up Pathmode MCP ↗</a></section>
+    <details class="method"><summary>What this check can—and cannot—tell you</summary><p>This is the same deterministic readiness engine used by Pathmode’s MCP server, paired with the existing web preflight parser. It looks for a specific title, a concrete objective, observable outcomes, hard constraints, edge cases, and verification. It also reports unresolved product choices recorded in the spec.</p><p>The checks use English-language heuristics. “Needs review” means text was found but the checker could not confirm it. It does not mean the text is wrong. Passing is not evidence that the product decision is correct, that the software works, or that implementation is authorized. Confirmations and waivers from pasted files are self-reported, not authenticated here.</p><p>Examples are synthetic illustrations, not a benchmark. This app does not store your spec, send it to a model, or upload it. Downloads preserve your input exactly; a pasted ticket is not silently converted into an approved spec.</p></details>
+  </main>
+  <footer><span>Product intent, before implementation.</span><a href="https://huggingface.co/datasets/pathmode/intentspec-examples" target="_blank" rel="noopener noreferrer">Explore the example dataset ↗</a></footer>
+</body>
 </html>

style.css

@@ -1,28 +1 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}
+:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#202a28;background:#fafbf9;font-synthesis:none;font-size:15px}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:4px}button,textarea{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #388a8c;outline-offset:4px}header,main,footer{max-width:1240px;margin:auto}header{display:flex;align-items:center;gap:28px;padding:27px 34px;border-bottom:1px solid #e2e7e2;font-size:13px}header>a:last-child{margin-left:auto}.brand{font-size:23px;font-weight:720;letter-spacing:-1px;text-decoration:none;display:flex;align-items:center;gap:10px}.brand-mark{background:#e5efea;color:#267578;width:31px;height:34px;display:grid;place-items:center;border-radius:6px}.header-note{color:#78827d}.intro{padding:62px 34px 35px}.eyebrow{font-size:11px;font-weight:750;letter-spacing:1.8px;color:#527d77;margin:0 0 15px}h1{font-weight:550;font-size:clamp(38px,5vw,66px);letter-spacing:-2.8px;line-height:1.08;margin:0 0 20px}h1 span{color:#398486}.lead{font-size:17px;color:#606b65;line-height:1.6;margin:0 0 17px}.privacy{font-size:12px;color:#6e7b73}.privacy span{color:#3a8a8c;margin-right:5px}.workbench{margin:0 34px;display:grid;grid-template-columns:1fr 1fr;border:1px solid #dce3dd;border-radius:12px;overflow:hidden;background:white;box-shadow:0 10px 30px #243c2a05}.input-panel,.result-panel{min-width:0;padding:24px}.input-panel{border-right:1px solid #dce3dd;background:#fcfcfa}.panel-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-top h2{font-size:12px;font-weight:500;color:#9aa39d;margin:0;white-space:nowrap}.panel-top h2 span{color:#38473e;font-size:14px;font-weight:650;margin-left:9px}.small{font-size:11px;color:#778178;line-height:1.5}.tabs{display:flex;gap:4px;margin-top:23px;padding:4px;background:#edf0eb;border-radius:7px}.tabs button{border:0;border-radius:5px;background:none;color:#68736b;padding:9px 12px;font-size:12px;flex:1;white-space:nowrap}.tabs button[aria-pressed=true]{background:white;color:#254d44;box-shadow:0 1px 4px #00000010;font-weight:650}.example-note{font-size:12px;line-height:1.6;color:#6a756d;min-height:39px;margin:15px 0 10px}textarea{width:100%;height:370px;resize:vertical;border:1px solid #e1e6df;border-radius:7px;background:white;color:#344c42;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.8;padding:18px;tab-size:2;outline-color:#3a8a8c}.input-actions{display:flex;gap:10px;margin-top:15px;flex-wrap:wrap}.primary{border:1px solid #28696a;background:#307b7c;color:white;border-radius:6px;padding:11px 17px;font-size:12px;font-weight:600}.primary:hover{background:#25696a}.primary span{margin-left:13px}.secondary{border:1px solid #d9e1d8;color:#59695e;background:white;border-radius:6px;font-size:12px;padding:11px 14px}.result-summary{padding:23px 0 18px;border-bottom:1px solid #edf0eb}.result-summary h3{font-size:23px;font-weight:550;letter-spacing:-.7px;margin:0 0 8px}.result-summary p{font-size:12px;color:#6c776f;line-height:1.6;margin:5px 0}.score{color:#398486}.gate{padding:13px 0;border-bottom:1px solid #edf0eb;display:grid;grid-template-columns:23px 1fr;gap:8px}.gate-icon{color:#a3763a;padding-top:1px;font-size:15px}.gate.pass .gate-icon{color:#398486}.gate h4{margin:0;font-size:12px;font-weight:650;display:flex;justify-content:space-between;gap:8px}.badge{font-size:10px;font-weight:500;color:#8b692f;background:#faf2df;border-radius:4px;padding:3px 6px}.pass .badge{background:#edf5ef;color:#3c795e}.gate p{font-size:11px;line-height:1.65;color:#738077;margin:6px 0 0}.gate details{font-size:11px;color:#6d7971;margin-top:8px}.gate blockquote{margin:8px 0;border-left:2px solid #dde8df;padding-left:10px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:150px;overflow:auto}.warning{background:#faf3e5;padding:13px;border-radius:6px;font-size:12px;line-height:1.6;margin:15px 0;overflow-wrap:anywhere}.empty{padding:60px 10px;color:#778178;font-size:14px;line-height:1.7}.next-step{margin:35px 34px 0;padding:29px 0;display:flex;align-items:center;justify-content:space-between;gap:25px;border-bottom:1px solid #dfe5de}.next-step h2{font-size:24px;font-weight:550;letter-spacing:-.7px;margin:0 0 10px}.next-step p:not(.eyebrow){font-size:13px;color:#6e7971;line-height:1.7;margin:0}.next-step .eyebrow{font-size:10px}.link-button{text-decoration:none;white-space:nowrap}.method{margin:25px 34px;color:#758077;font-size:12px;line-height:1.8;max-width:830px}summary{cursor:pointer}.method p{margin:10px 0}footer{padding:23px 34px 32px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#839086}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:760px){header{padding:20px}.header-note{display:none}header>a:last-child{font-size:11px}.intro{padding:38px 20px 24px}h1{letter-spacing:-1.7px}.lead{font-size:15px}.workbench{margin:0 16px;grid-template-columns:1fr}.input-panel{border-right:0;border-bottom:1px solid #dce3dd}.input-panel,.result-panel{padding:19px}textarea{height:300px}.panel-top>.small{font-size:10px}.next-step{margin:20px;align-items:flex-start;flex-direction:column}.method{margin:20px}footer{padding:20px;flex-direction:column;gap:12px}.desktop{display:none}}