Launch interactive ProjectLens product experience

.gitignore

@@ -53,6 +53,7 @@ work/
 Processing/precedent_rag/.cache/
 
 # Local-only notes, agent prompts/logs and research (never published)
+.impeccable/
 CLAUDE-*.md
 .impeccable.md
 DONE.md

DESIGN.md

@@ -1,11 +1,131 @@
-# Change assurance interface
+---
+name: ProjectLens
+description: Clear schedule evidence before a human decision
+colors:
+  primary: "#0857e8"
+  primary-hover: "#0645bd"
+  white: "#fff"
+  ground: "#fafbfc"
+  panel: "#f3f6fa"
+  ink: "#0b1933"
+  muted: "#4c5b70"
+  selection: "#e8f0ff"
+  line: "#d5dce6"
+  attention: "#805300"
+  attention-ground: "#fff6de"
+typography:
+  display:
+    fontFamily: '"Encode Sans", sans-serif'
+    fontSize: "61px"
+    fontWeight: 700
+    lineHeight: 1.02
+    letterSpacing: "-.035em"
+  title:
+    fontFamily: '"Encode Sans", sans-serif'
+    fontSize: "29px"
+    fontWeight: 600
+    lineHeight: 1.25
+    letterSpacing: "-.025em"
+  body:
+    fontFamily: '"Encode Sans", sans-serif'
+    fontSize: "15px"
+    fontWeight: 400
+    lineHeight: 1.6
+  label:
+    fontFamily: '"Encode Sans", sans-serif'
+    fontSize: "13px"
+    fontWeight: 500
+    lineHeight: 1.4
+rounded:
+  control: "7px"
+  field: "6px"
+  panel: "12px"
+  example: "9px"
+  status: "5px"
+spacing:
+  small: "12px"
+  medium: "16px"
+  gutter: "24px"
+  panel: "28px"
+  roomy: "32px"
+components:
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.white}"
+    rounded: "{rounded.control}"
+    padding: "12px 28px"
+  button-primary-hover:
+    backgroundColor: "{colors.primary-hover}"
+  evidence-panel:
+    backgroundColor: "{colors.panel}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.panel}"
+    padding: "24px"
+  status:
+    backgroundColor: "{colors.attention-ground}"
+    textColor: "{colors.attention}"
+    rounded: "{rounded.status}"
+    padding: "6px 10px"
+---
 
-Operate mode. Preserve ProjectLens's warm paper (#f1ecdf), near-black ink (#071a1b), off-white (#fffdf6), rust (#a94d35) and pale blue (#8eb0bd). Rust identifies unresolved evidence; green is reserved for the limited outcome of fixed checks. No causation, entitlement or approval claim follows from colour.
+## Overview
 
-The review uses Libre Franklin: title 24px, body 14px, compact evidence 13px, metadata at least 12px. Archivo Black stays on the landing page. JetBrains Mono identifies source activity codes. Use 8/16/24/32px spacing, 1px borders, flat rectangular surfaces and no decorative gradients or shadows.
+**Creative North Star: "Evidence in plain view"**
 
-The top navigation remains Reviews, Decisions and Follow-up, with aria-current. The active review hides the landing pitch. Findings and source evidence share a two-column desk; a selected finding has a labelled pressed state. Mobile uses one pane and a Back to findings control which returns focus. The primary action records a human decision; questions and optional public context are secondary.
+ProjectLens makes schedule evidence readable before a person records a decision. Cool white surfaces, blue-grey text and cobalt actions frame one continuous evidence workspace. The landing explains the value through a real-engine synthetic comparison; the review and walkthrough use the same visual language at task scale.
 
-Keep raw source facts and the original narrative visible. Untouched supplemental records are not reviewed; using one never makes it an authoritative precedent. Owner and rationale are required. Conditional approvals require condition, owner and due date. Errors persist with recovery guidance. A deliberate device draft includes XER contents and form fields; saving and deletion are explicit. No automatic upload or localhost probing.
+This contract covers docs/change-assurance.html, its product-landing.css/js layer, and the normal review, decision, follow-up and guided walkthrough surfaces reached there. GMPP and separate detailed schedule/board pages retain their existing identities. It replaces the former cream/rust guidance for this scoped experience only.
 
-Focus uses a 3px blue outline, controls have visible hover and disabled states, and navigation transfers focus. Motion only scrolls to revealed work and respects reduced motion. Do not add app heroes, metric cards, invented confidence scores, decorative icons or sidebars.
+**Key Characteristics:**
+- Precise sans typography and restrained cobalt emphasis.
+- Continuous evidence workspace with calm tonal panels.
+- Explicit human actions and bounded explanatory motion.
+
+## Colors
+
+Primary cobalt identifies actions, active navigation, selection and keyboard focus. The deeper primary is its hover state. Neutral ink carries claims and values; muted text carries supporting explanation. White and ground establish the canvas; panel and selection distinguish grouping and active evidence. Line separates content. Attention and its pale ground label unresolved review work, including the ready state: no green approval signal is implied.
+
+**The Evidence Rule.** Colour communicates interface state, never proof or permission to approve.
+
+## Typography
+
+Encode Sans is self-hosted in docs/assets/fonts at weights 400, 500, 600 and 700; the bundled OFL governs distribution. Display type is reserved for the landing headline. Review headings use the title scale; evidence copy uses compact body type, with metadata generally 12–13px. The landing introduction and claim/observation comparison use larger reading type. Source codes retain the JetBrains Mono/monospace stack. Dates and quantitative comparisons use tabular numerals.
+
+## Layout
+
+The shared maximum content width is 1380px. The header uses max(5vw, 24px) gutters, changing to 18px on phones. The approved landing uses a centered headline and actions above a wide comparison workspace. Its left selector is 280px on large screens and 210px at tablet width. Review findings and source evidence form a two-column desk; phone layouts use a single pane and an explicit return to findings.
+
+At 1101–1535px, selected landing dimensions scale through the existing --pl-u factor, with compact labels bounded at 12px. At 761–1100px, comparison type and selector width compress. At 760px and below, selectors become three horizontal tabs; dates sit side by side above their connection, and claim, observation and question stack. Review navigation occupies its own full-width header row. Forms, decision choices and register rows stack. Do not infer a universal spacing grid: use the recorded spacing tokens and existing component-specific measurements.
+
+## Elevation & Depth
+
+This layer uses flat white and blue-grey surfaces, thin separators and tonal selection rather than decorative gradients or added shadows. Preserve functional inherited overlays. The inactive toast must be hidden with visibility, opacity and pointer-event rules; only its visible status state may occupy visual attention.
+
+## Shapes
+
+Moderately rounded controls and fields sit within larger rounded evidence and decision panels. The comparison frame uses its own slightly tighter radius. Borders are thin and cool; structure remains rectangular rather than pill-shaped.
+
+## Components
+
+- **Actions:** cobalt primary buttons, white text, restrained background hover; secondary actions use white or transparent backgrounds and blue text. Keyboard focus uses a 3px cobalt outline with 4px offset. Disabled buttons retain their disabled behaviour and reduced opacity.
+- **Navigation:** native header links preserve real destinations. Active review links use cobalt text and a bottom rule with aria-current. Landing navigation switches to Reviews, Decisions and Follow-up within the operating journey.
+- **Evidence selectors:** selected state uses pale blue, cobalt text and a labelled selected/pressed state. Findings retain title, explanation and source context.
+- **Evidence panels:** tonal backgrounds contain dates, facts, quoted narrative, source files and a separately labelled review question. File names can wrap.
+- **Inputs and decisions:** white fields on tonal panels, visible labels and thin borders. Owner and rationale remain required; conditional decisions retain condition, owner and due date. Persistent errors include recovery guidance.
+- **Preview and walkthrough:** the clearly labelled synthetic preview reads the real comparison engine. Factual questions are fixed independently of narrative matching. Replay explicitly draws the finish relationship over 700ms; evidence changes use bounded 180ms transitions. No looping motion. Reduced motion removes animation and replay while retaining facts and relationships. Walkthrough records remain disposable and isolated from ordinary decisions.
+
+**The Human Decision Rule.** Interface hierarchy leads from fact to source to question before presenting the action that records a person's decision.
+
+## Do's and Don'ts
+
+- Do keep observations, narrative claims, factual questions and human decisions visually distinct.
+- Do preserve source facts and both narrative versions when text changes.
+- Do use the shared cool palette and self-hosted type across landing, review and walkthrough.
+- Do retain meaningful static dates and state when reduced motion is requested.
+- Don't use colour as evidence of causation, entitlement or approval.
+- Don't let narrative wording remove independent factual review questions.
+- Don't add fabricated metrics, customer proof or decorative feature-card marketing.
+- Don't extend this identity to separate routes without an explicit redesign.
+
+
+Implementation authority: docs/product-landing.css and docs/product-landing.js; product truth: PRODUCT.md; approved composition: .impeccable/surfaces/docs-change-assurance-html.md. Finished captures are ../../outputs/projectlens-{product,review,decision}-{desktop,phone}.png. The finish verdict at ../product-finish-verdict.txt resolves desktop clarity and the two phone fixes; it is not a full security or accessibility certification. Local full pytest collection lacked pandas; CI remains the stated verification boundary.

PRODUCT.md

@@ -0,0 +1,50 @@
+# ProjectLens
+
+<!-- impeccable:product-schema 1 -->
+
+## Platform
+
+web
+
+## Users
+
+Project controls reviewers compare a project update with two Primavera P6 schedule exports, inspect changes and record a human decision. Portfolio visitors also need to understand the problem, try the real workflow and judge the engineering evidence. Practitioner demand and measured benefits remain unvalidated.
+
+## Product Purpose
+
+Make a schedule update's changes, supporting source evidence and outstanding review questions understandable before a person records a decision. The user confirmed that ProjectLens should open with a proper product landing page. It must explain the value before offering the working sample and the visitor's own-file journey.
+
+## Positioning
+
+A browser-local evidence-to-decision workflow: compare two XER exports, inspect their facts alongside the narrative, record a decision, export the record and track conditions. Do not claim that schedule comparison itself is novel, that the tool establishes causation or entitlement, or that it replaces Primavera P6 or professional judgement.
+
+## Operating Context
+
+The existing static product ships from docs/ on GitHub Pages. The synthetic Northstar pack demonstrates a 73-day scheduled finish movement. The guided walkthrough uses the real browser engine with disposable in-tab records. The ordinary route supports explicit local drafts, saved decisions, exports and conditions.
+
+## Capabilities and Constraints
+
+- Two XER files and an optional narrative feed deterministic browser checks. Files and decision records stay in the browser during the standard workflow.
+- Factual schedule changes must remain visible independently of narrative wording. Narrative checks are review prompts, not proof that an issue is resolved or that a pack is safe to approve.
+- Preserve submitted and revised narrative text as distinct evidence when the narrative changes.
+- A person supplies the decision, owner, rationale and any conditions. Context records are supplementary and require explicit human handling before inclusion.
+- An optional, separately configured local research service can retrieve public records and produce a citation-checked AI brief. Its tracing support is optional; no live evaluation result or deployed AI capability may be inferred from configuration alone.
+- Keep existing uploads, downloads, validation, browser storage, walkthrough isolation and decision/follow-up journeys working through the redesign.
+
+## Brand Commitments
+
+Keep the ProjectLens name. The user asks for Apple-level design care, taste and clear information hierarchy. The user explicitly rejects generic AI-generated website styling. Those references set a craft standard; they do not authorise copying another brand's identity.
+
+## Evidence on Hand
+
+The runnable product, source comparison engine, synthetic XER pairs, real-engine walkthrough, exported decision records, browser tests and existing before-and-after captures are available. Northstar facts include a 73-day finish movement, 10 materially changed activities, 3 constraint changes, 9 activities with reduced reported float and 5 added or removed predecessor signatures. These are demonstration facts, not customer outcomes.
+
+No verified customer logos, testimonials, time savings, independent accuracy claim or production adoption evidence are available. Do not fabricate them.
+
+## Product Principles
+
+1. Explain what changed, show its source, state why it warrants review and identify the next question.
+2. Keep observations, narrative claims, unresolved questions and human decisions distinct.
+3. Demonstrate real behaviour with clearly labelled synthetic inputs.
+4. State practical limits at the point where they affect interpretation.
+5. Make product value understandable to a visitor without hiding the evidence from a practitioner.

Processing/tests/browser_change_assurance.py

@@ -25,7 +25,7 @@ def run_desktop(browser):
     page.wait_for_load_state("networkidle")
 
     assert page.locator("[data-view-link]").count() == 3
-    assert page.get_by_role("heading", name="Check the change pack before you decide.").is_visible()
+    assert page.get_by_role("heading", name="The schedule changed. Did the update explain it?").is_visible()
     page.get_by_role("button", name="Try the Northstar example").click()
     page.locator("#readinessWorkspace").wait_for(state="visible")
     readiness_status = page.locator("#readinessStatus").inner_text()
@@ -165,7 +165,7 @@ def run_recovery(browser):
         return results;
     }""", [(ROOT / "docs/demo/northstar-previous.xer").read_text(), (ROOT / "docs/demo/northstar-current.xer").read_text()])
     assert all(rejected.values()), rejected
-    page.get_by_role("button", name="Use my own XER files").click()
+    page.get_by_role("button", name="Use your own XER files").click()
     page.locator("#assurancePrevious").set_input_files(ROOT / "docs/demo/northstar-previous.xer")
     page.locator("#assuranceCurrent").set_input_files(ROOT / "docs/demo/riverside-current.xer")
     page.get_by_role("button", name="Check decision readiness").click()