Rangrez dashboard

.gitattributes

@@ -46,3 +46,11 @@ src/rangrez/scenes/shadowy.jpg filter=lfs diff=lfs merge=lfs -text
 src/rangrez/scenes/tilted_phone.jpg filter=lfs diff=lfs merge=lfs -text
 src/rangrez/scenes/vertical_strip.jpg filter=lfs diff=lfs merge=lfs -text
 src/rangrez/scenes/with_target.jpg filter=lfs diff=lfs merge=lfs -text
+src/rangrez/samples/kurta.jpg filter=lfs diff=lfs merge=lfs -text
+src/rangrez/samples/runs/teal-kurta/dip01_photo.jpg filter=lfs diff=lfs merge=lfs -text
+src/rangrez/samples/runs/teal-kurta/dip01_sam.jpg filter=lfs diff=lfs merge=lfs -text
+src/rangrez/samples/runs/teal-kurta/dip02_photo.jpg filter=lfs diff=lfs merge=lfs -text
+src/rangrez/samples/runs/teal-kurta/dip02_sam.jpg filter=lfs diff=lfs merge=lfs -text
+src/rangrez/samples/runs/teal-kurta/preview.jpg filter=lfs diff=lfs merge=lfs -text
+src/rangrez/samples/runs/teal-kurta/target.jpg filter=lfs diff=lfs merge=lfs -text
+src/rangrez/static/dyehouse.jpg filter=lfs diff=lfs merge=lfs -text

README.md

@@ -25,6 +25,10 @@ and you can read a target colour from your own photo ("match this kurta").
 Rangrez gives you a recipe to dye a matching cloth at home, in drops of blue, red and yellow
 household colour.
 
+With the passcode you can also paste the buyer's message (English or Hindi) for **Muse Spark** to
+read into an order, run the lab **hands-free by voice** in English or Hindi (Muse Voice Transcribe),
+and see the customer's garment in the approved shade (**Muse Image**, measured and corrected).
+
 One lab, shared by everyone viewing: if a campaign is running, you are watching it.
 
 Code, hardware, firmware and evaluation: https://github.com/TusharTechs/rangrez

src/rangrez/assisted.py

@@ -22,6 +22,15 @@ from .profiles import PROFILE
 from .rig import DYES, UNIT, Inventory, PumpPlan, Recipe, RigLimits, ShotResult, now
 
 STEP_ML = PROFILE.step_ml
+# A dip is only comparable with the final cloth after the dye has fixed and the loose dye is rinsed out.
+FIX_AND_RINSE = (["Wrap the wet strip in cling film and leave it 10 minutes so the dye fixes, then rinse it in cold "
+                  "water until the water runs clear, and once in warm soapy water."]
+                 if PROFILE.key == "reactive" else
+                 ["Rinse the strip once in cold water to take off loose colour (household colours are not wash-fast)."])
+# Shown before every dip: dye stains skin and lingers in kitchenware; reactive dye baths are alkaline.
+SAFETY = ["Wear gloves, and use a glass and dropper kept for dyeing only, never again for food or drink."] + (
+    ["Soda ash (washing soda) irritates skin and eyes: no splashing, rinse at once if it touches skin."]
+    if PROFILE.key == "reactive" else [])
 MAX_SIDE_PX = 1920  # SAM 3.1 accepts up to about 4 MP; phones shoot 12+
 
 
@@ -77,10 +86,12 @@ class AssistedRig:
             "water_ml": round(float(water), 1),
             "dip_seconds": int(recipe.dip_seconds),
             "steps": [
+                *SAFETY,
                 "Rinse the glass and the dropper or syringes.",
                 *[self._amount(d, v, c) for d, v, c in zip(DYES, ml, recipe.conc) if v >= STEP_ML / 2],
                 (f"Add 4 teaspoons (20 mL) of water and stir." if UNIT == "drops" else f"Add {water:.1f} mL of water and stir for 10 seconds."),
                 f"Dip a fresh white cotton strip for {int(recipe.dip_seconds)} seconds.",
+                *FIX_AND_RINSE,
                 "Squeeze it gently and dry it fully with the hair dryer (about 2 minutes).",
                 "Lay it on a sheet of white paper (or next to the colour card) in the same spot and light as before, and send the photo.",
                 "If you have the customer's cloth, lay it beside the strip: Rangrez then compares them side by side under the same light.",
@@ -90,7 +101,8 @@ class AssistedRig:
     @staticmethod
     def _amount(dye: str, ml: float, conc: float) -> str:
         if UNIT == "drops":
-            return f"Add {round(conc)} drops of {dye}."
+            n = round(conc)
+            return f"Add {n} drop{'' if n == 1 else 's'} of {dye}."
         return f"Add {ml:.1f} mL of {dye}."
 
     # -- rig protocol ----------------------------------------------------------

src/rangrez/campaign.py

@@ -192,10 +192,32 @@ class Campaign:
         self.shots.append(shot)
         self.emit("shot", index=shot.index, recipe=recipe.describe(), lab=m.lab.tolist(),
                   hex=lab_to_hex(m.lab), delta_e=de, flags=m.flags, rationale=rationale)
-        if m.ok and de <= self.tolerance:
+        matched = m.ok and de <= self.tolerance and self._confirmed(shot)
+        if matched:
             self.status = "matched"
-            self.emit("status", status=self.status, shot=shot.index, delta_e=de)
-        return self._shot_summary(shot) | {"matched": m.ok and de <= self.tolerance}
+            self.emit("status", status=self.status, shot=shot.index, delta_e=shot.delta_e)
+        return self._shot_summary(shot) | {"matched": matched}
+
+    def _confirmed(self, shot: Shot) -> bool:
+        """No single photo decides a pass: an automated rig photographs the strip again and both must agree."""
+        if hasattr(self.rig, "provide") or not hasattr(self.rig, "capture"):
+            return True  # a person sent this photo; asking for another would only slow them down
+        try:
+            m2 = measure(self.rig.capture(), self.segmenter, seed=100 + shot.index)
+        except RuntimeError as exc:
+            self.note(f"Confirmation photo failed ({exc}); not calling it a match on one photo.", who="lab")
+            return False
+        if not m2.ok:
+            self.note("Confirmation photo was rejected; not calling it a match on one photo.", who="lab")
+            return False
+        de2 = float(delta_e_2000(m2.lab, self.target_lab))
+        if de2 > self.tolerance:
+            self.note(f"Dip {shot.index} read dE00 {shot.delta_e:.2f}, but a second photo reads {de2:.2f}: "
+                      "not a match yet.", who="lab")
+            return False
+        shot.delta_e = (shot.delta_e + de2) / 2
+        self.note(f"Confirmed with a second photo: dE00 {shot.delta_e * 2 - de2:.2f} and {de2:.2f}.", who="lab")
+        return True
 
     def _side_by_side(self, m) -> None:
         """The customer's cloth lies beside the strip: compare them under the same light.

src/rangrez/colour.py

@@ -82,6 +82,22 @@ def lab_to_hex(lab: np.ndarray) -> str:
     return "#" + "".join(f"{int(v):02x}" for v in np.clip(rgb, 0, 255))
 
 
+def delta_e_cmc(reference, sample, l: float = 2.0, c: float = 1.0) -> float:
+    """CMC l:c colour difference of sample from reference (the textile industry's other standard; 2:1 for acceptability)."""
+    L1, a1, b1 = (float(v) for v in reference)
+    L2, a2, b2 = (float(v) for v in sample)
+    C1, C2 = np.hypot(a1, b1), np.hypot(a2, b2)
+    dL, dC = L1 - L2, C1 - C2
+    dH2 = max((a1 - a2) ** 2 + (b1 - b2) ** 2 - dC**2, 0.0)
+    H1 = np.degrees(np.arctan2(b1, a1)) % 360
+    F = np.sqrt(C1**4 / (C1**4 + 1900))
+    T = 0.56 + abs(0.2 * np.cos(np.radians(H1 + 168))) if 164 <= H1 <= 345 else 0.36 + abs(0.4 * np.cos(np.radians(H1 + 35)))
+    SL = 0.511 if L1 < 16 else 0.040975 * L1 / (1 + 0.01765 * L1)
+    SC = 0.0638 * C1 / (1 + 0.0131 * C1) + 0.638
+    SH = SC * (F * T + 1 - F)
+    return float(np.sqrt((dL / (l * SL)) ** 2 + (dC / (c * SC)) ** 2 + dH2 / SH**2))
+
+
 def delta_e_2000(lab1: np.ndarray, lab2: np.ndarray) -> np.ndarray:
     """CIEDE2000 colour difference (Sharma, Wu & Dalal 2005), kL = kC = kH = 1."""
     lab1 = np.asarray(lab1, dtype=float)

src/rangrez/esp32_emulator.py

@@ -58,13 +58,18 @@ class VirtualESP32:
         self.bath_ml = 0.0
         self.dye_ml = np.zeros(3)
         self.estop = False
+        self.button_pressed = False  # the physical e-stop button, separate from the latched flag
         self.light = False
+        self.compiled_ms_per_ml = list(self.limits["msPerMl"])
         self.log: list[dict] = []
         self._write_video()  # the camera shows the empty light box until the first dip
 
     # -- e-stop button ----------------------------------------------------------
     def press_estop(self) -> None:
-        self.estop = True
+        self.estop = self.button_pressed = True
+
+    def release_estop(self) -> None:
+        self.button_pressed = False
 
     def _wait(self, seconds: float) -> bool:
         end = time.monotonic() + seconds * self.time_scale
@@ -88,6 +93,8 @@ class VirtualESP32:
         if cmd == "ping":
             return {"fw": "rangrez-1", "estop": self.estop, "bath_ml": self.bath_ml}
         if cmd == "reset":
+            if self.button_pressed:
+                return self._reply(cmd, "e-stop still pressed: release it first")
             self.estop = False
             return self._reply(cmd)
         if cmd == "pump":
@@ -146,6 +153,8 @@ class VirtualESP32:
             pid, ms = int(doc.get("id", -1)), float(doc.get("ms_per_ml", 0))
             if not 0 <= pid <= 3 or not 100 <= ms <= 5000:
                 return self._reply(cmd, "bad calibration")
+            if abs(ms - self.compiled_ms_per_ml[pid]) > 0.20 * self.compiled_ms_per_ml[pid]:
+                return self._reply(cmd, "calibration more than 20% from the compiled value: reflash to change it")
             L["msPerMl"][pid] = ms
             return self._reply(cmd)
         return self._reply(cmd, "unknown command")

src/rangrez/glimmer.py

@@ -34,6 +34,20 @@ def prompt(lab) -> str:
     return f"Target L* {L:.1f}, a* {a:.1f}, b* {b:.1f} ({lab_to_hex(np.array([L, a, b]))}). First dip recipe?"
 
 
+def notebook_prompt(lab, neighbours) -> str:
+    """Glimmer v2: the target plus the most similar dips this lab has made (recipe -> measured colour)."""
+    lines = [prompt(lab).replace(" First dip recipe?", "")]
+    if neighbours:
+        lines.append("The lab's most similar past dips (recipe -> measured L*a*b*):")
+        for conc, nlab in neighbours:
+            recipe = ", ".join(f"{d} {float(c):g}" for d, c in zip(PROFILE.names, conc))
+            lines.append(f"- {recipe} -> {float(nlab[0]):.1f}, {float(nlab[1]):.1f}, {float(nlab[2]):.1f}")
+    else:
+        lines.append("The lab has no similar past dips yet.")
+    lines.append("First dip recipe?")
+    return "\n".join(lines)
+
+
 def answer(conc) -> str:
     return json.dumps({d: round(float(c), 2) for d, c in zip(PROFILE.names, conc)})
 

src/rangrez/order.py

@@ -0,0 +1,126 @@
+"""From the buyer's message to a production plan.
+
+Buyers send orders as chat messages ("need 500 kurtas in this teal, cotton poplin, by Friday,
+buyer very strict on shade"). Muse Spark reads the message into a structured order; the
+numbers that follow are plain arithmetic: how strict the shade must be sets the lab's pass
+tolerance, and the approved dip's recipe scales to the order's fabric, dye bath and chemicals.
+"""
+
+from __future__ import annotations
+
+import json
+import os
+import time
+
+from .profiles import PROFILE
+from .rig import DYES
+
+SPARK_MODEL = "muse-spark-1.3"
+TOLERANCE = {"strict": 1.0, "normal": 1.5, "relaxed": 2.0}  # CIEDE2000 pass threshold by how picky the buyer is
+KG_PER_PIECE = {"kurta": 0.30, "shirt": 0.25, "t-shirt": 0.18, "saree": 0.55, "dupatta": 0.15, "kurti": 0.25,
+                "towel": 0.40, "bedsheet": 0.70, "trouser": 0.45, "dress": 0.35}
+KG_PER_METRE = 0.14  # 110 GSM poplin, 1.1 m wide, plus cutting waste
+LIQUOR_RATIO = 10  # litres of dye bath per kg of cotton
+# Salt and soda ash rise with shade depth (% on weight of fabric): typical reactive-dye practice.
+SALT_SODA_BY_DEPTH = [(0.5, 30, 10), (2.0, 50, 15), (4.0, 70, 20), (float("inf"), 80, 20)]
+
+SCHEMA = {
+    "type": "object",
+    "properties": {
+        "garment": {"type": "string", "description": "what is being dyed, singular, e.g. kurta, saree, fabric"},
+        "quantity": {"type": "number"},
+        "quantity_unit": {"type": "string", "enum": ["pieces", "metres", "kg"]},
+        "fabric": {"type": "string"},
+        "deadline": {"type": "string", "description": "delivery date as YYYY-MM-DD, or empty if not given"},
+        "lab_dip_due": {"type": "string", "description": "when the buyer wants the lab dip, YYYY-MM-DD, or empty"},
+        "shade_strictness": {"type": "string", "enum": ["strict", "normal", "relaxed"]},
+        "notes": {"type": "string", "description": "anything else that matters for dyeing, short"},
+    },
+    "required": ["garment", "quantity", "quantity_unit", "fabric", "deadline", "lab_dip_due", "shade_strictness", "notes"],
+    "additionalProperties": False,
+}
+
+
+def parse_order(message: str, log=None) -> dict:
+    """Muse Spark reads a buyer's chat message into a structured order."""
+    from openai import OpenAI
+
+    from .vision import ApiCall
+
+    client = OpenAI(base_url="https://api.meta.ai/v1", api_key=os.environ["MODEL_API_KEY"], timeout=90, max_retries=1)
+    today = time.strftime("%A %Y-%m-%d")
+    started = time.monotonic()
+    try:
+        r = client.chat.completions.create(
+            model=SPARK_MODEL, reasoning_effort="low",
+            messages=[{"role": "system", "content": f"You read dye orders for a small cotton dye house. Today is {today}. "
+                                                    "Resolve relative dates. Use only what the message says."},
+                      {"role": "user", "content": message}],
+            response_format={"type": "json_schema", "json_schema": {"name": "order", "schema": SCHEMA, "strict": True}})
+        order = json.loads(r.choices[0].message.content)
+    except Exception as exc:
+        if log is not None:
+            log.add(ApiCall(SPARK_MODEL, "read the order", time.monotonic() - started, False, str(exc)[:200]))
+        raise RuntimeError(f"could not read the order: {exc}") from exc
+    if log is not None:
+        log.add(ApiCall(SPARK_MODEL, "read the order", time.monotonic() - started, True))
+    order["tolerance_de00"] = TOLERANCE.get(order.get("shade_strictness", "normal"), 1.5)
+    return order
+
+
+def fabric_kg(order: dict) -> float:
+    q, unit = float(order.get("quantity") or 0), order.get("quantity_unit", "pieces")
+    if unit == "kg":
+        return q
+    if unit == "metres":
+        return q * KG_PER_METRE
+    garment = order.get("garment", "").lower().rstrip("s")
+    return q * KG_PER_PIECE.get(garment, 0.30)
+
+
+def production_plan(order: dict, recipe_conc) -> dict | None:
+    """The approved dip's recipe, scaled to the order. Reactive dyes (g/L) only."""
+    if PROFILE.unit != "g/L":
+        return None
+    kg = fabric_kg(order)
+    litres = kg * LIQUOR_RATIO
+    depth = float(sum(recipe_conc)) * LIQUOR_RATIO / 10  # % on weight of fabric: g/L x L/kg / 10
+    salt, soda = next((s, a) for limit, s, a in SALT_SODA_BY_DEPTH if depth <= limit)
+    return {
+        "fabric_kg": round(kg, 1),
+        "bath_litres": round(litres),
+        "dye_g": {d: round(float(c) * litres) for d, c in zip(DYES, recipe_conc)},
+        "shade_depth_owf": round(depth, 2),
+        "salt_kg": round(salt * litres / 1000, 1),
+        "soda_ash_kg": round(soda * litres / 1000, 1),
+        "assumptions": f"{LIQUOR_RATIO}:1 liquor ratio; {KG_PER_PIECE.get(order.get('garment', '').lower().rstrip('s'), 0.30)} kg "
+                       f"per {order.get('garment', 'piece')}; a {depth:.1f}% shade, so salt {salt} g/L and soda ash {soda} g/L, "
+                       "typical for reactive dye at that depth. Indicative until calibrated with your own lab-to-bulk factor.",
+    }
+
+
+def draft_reply(message: str, facts: dict, log=None) -> str:
+    """The message back to the buyer, in their language, using only the lab's numbers."""
+    from openai import OpenAI
+
+    from .vision import ApiCall
+
+    client = OpenAI(base_url="https://api.meta.ai/v1", api_key=os.environ["MODEL_API_KEY"], timeout=90, max_retries=1)
+    started = time.monotonic()
+    try:
+        r = client.chat.completions.create(
+            model=SPARK_MODEL, reasoning_effort="low",
+            messages=[{"role": "system", "content": (
+                "You write the dye house's short chat reply to a buyer about their lab dip. Reply in the same language and "
+                "script the buyer used (Hindi in Devanagari if they wrote Hindi, Hinglish if they wrote Hinglish). Use only "
+                "the facts given; never invent numbers or promises. At most 70 words, warm and plain, no markdown. Say the "
+                "lab-dip report is attached; if a preview exists, say a photo of their garment in the shade is attached.")},
+                      {"role": "user", "content": f"Buyer's message:\n{message}\n\nFacts:\n{json.dumps(facts, ensure_ascii=False)}"}])
+        text = (r.choices[0].message.content or "").strip()
+    except Exception as exc:
+        if log is not None:
+            log.add(ApiCall(SPARK_MODEL, "reply to the buyer", time.monotonic() - started, False, str(exc)[:200]))
+        raise RuntimeError(f"could not draft the reply: {exc}") from exc
+    if log is not None:
+        log.add(ApiCall(SPARK_MODEL, "reply to the buyer", time.monotonic() - started, True))
+    return text

src/rangrez/replay.py

@@ -0,0 +1,66 @@
+"""Replay a recorded live run on the dashboard, for visitors without the live passcode.
+
+Every event in a recording happened for real: each SAM 3.1, Muse Wonder, Muse Spark, Muse Image
+or Muse Voice Transcribe call with its timing, each dip photo and SAM's masks, the notebook, the
+report. A replay sends those events again in order (a little faster), and the dashboard labels
+it as a recording with its date. Recordings shipped with the app live in samples/runs/.
+"""
+
+from __future__ import annotations
+
+import json
+import threading
+import time
+from pathlib import Path
+
+SAMPLES = Path(__file__).parent / "samples"
+
+
+def runs() -> list[dict]:
+    out = []
+    for d in sorted((SAMPLES / "runs").glob("*")):
+        meta = json.loads((d / "meta.json").read_text()) if (d / "meta.json").exists() else {}
+        out.append({"name": d.name, "title": meta.get("title", d.name), "started": meta.get("started", ""),
+                    "agent": meta.get("agent", ""), "rig": meta.get("rig", "")})
+    return out
+
+
+class Replay:
+    def __init__(self, name: str, publish, speed: float = 3.0, max_gap: float = 2.5) -> None:
+        self.dir = SAMPLES / "runs" / Path(name).name  # no path tricks: a run name only
+        if not (self.dir / "events.jsonl").exists():
+            raise FileNotFoundError(name)
+        self.meta = json.loads((self.dir / "meta.json").read_text()) if (self.dir / "meta.json").exists() else {}
+        self.events = [json.loads(line) for line in (self.dir / "events.jsonl").read_text().splitlines() if line.strip()]
+        self.publish, self.speed, self.max_gap = publish, speed, max_gap
+        self.stopped = False
+        self.thread = threading.Thread(target=self._run, daemon=True)
+
+    def start(self) -> None:
+        self.thread.start()
+
+    def stop(self) -> None:
+        self.stopped = True
+
+    @property
+    def running(self) -> bool:
+        return self.thread.is_alive()
+
+    def file(self, name: str) -> bytes | None:
+        p = self.dir / Path(name).name
+        return p.read_bytes() if p.exists() else None
+
+    def _run(self) -> None:
+        recorded = self.meta.get("started", "")
+        last = None
+        for e in self.events:
+            if self.stopped:
+                return
+            at = e.get("at")
+            if last is not None and at is not None:
+                time.sleep(min(max(at - last, 0) / self.speed, self.max_gap))
+            last = at if at is not None else last
+            e = {**e, "at": time.time(), "replay": True}
+            if e.get("kind") == "start":
+                e["recorded"] = recorded
+            self.publish(e)

src/rangrez/report.py

@@ -15,11 +15,12 @@ import time
 
 import numpy as np
 
-from .colour import delta_e_2000, lab_to_hex
+from .colour import delta_e_2000, delta_e_cmc, lab_to_hex
 from .profiles import PROFILE
 from .rig import DYES, UNIT
 
 LIQUOR_RATIO = 10  # litres of dye bath per kg of cotton (1:10), typical for exhaust dyeing
+UNCERTAINTY = {"card": 0.7, "paper": 1.2}  # median dE00 error on the 44-photo test bench (eval/accuracy.py)
 
 
 def difference(target, sample) -> dict:
@@ -50,17 +51,62 @@ def difference(target, sample) -> dict:
             "words": ", ".join(words) or "no visible difference"}
 
 
+def _impact_block(c) -> str:
+    """What this lab dip took, next to how lab dips usually go."""
+    if not c.shots:
+        return ""
+    stock_ml = sum(float(np.sum(s.recipe.as_array())) / PROFILE.stock_per_l * c.rig.limits.bath_ml for s in c.shots)
+    water_ml = len(c.shots) * c.rig.limits.bath_ml
+    minutes = (c.shots[-1].at - c.shots[0].at) / 60 if len(c.shots) > 1 else 0
+    took = f"{len(c.shots)} dip{'s' if len(c.shots) > 1 else ''}" + (f" over {minutes:.0f} minutes" if minutes >= 1 else "")
+    return f"""<h2>What it took</h2>
+<div class="grid">
+<div><div class="verdict" style="color:var(--ink)">{took}</div>
+<div class="meta">{stock_ml:.1f} mL of dye stock, about {water_ml / 1000:.2f} L of water and {len(c.shots)} cotton strip{'s' if len(c.shots) > 1 else ''}.</div></div>
+<div class="meta">How lab dips usually go: about 2 to 4 rounds, each several days of mill work plus courier and the buyer's review
+(one retailer allows up to five business days per review). Sources:
+<a href="https://ifactoryapp.com/industries/textile-manufacturing/textile-sample-development-cost-time-management">iFactory sample-development guide</a>,
+<a href="https://www.thekrogerco.com/wp-content/uploads/2017/08/ale_gmsg.pdf">a retailer's supplier guide</a>,
+<a href="https://cottonworks.com/en/topics/sourcing-manufacturing/dyeing/the-lab-dip-process">Cotton Incorporated</a>.</div>
+</div>"""
+
+
+def _order_block(order: dict, best) -> str:
+    from .order import production_plan
+
+    rows = "".join(f"<tr><td>{html.escape(k)}</td><td>{html.escape(str(v))}</td></tr>" for k, v in (
+        ("Garment", f"{order.get('quantity'):g} {order.get('quantity_unit')} of {order.get('garment')}"),
+        ("Fabric", order.get("fabric")), ("Lab dip due", order.get("lab_dip_due") or "not given"),
+        ("Delivery", order.get("deadline") or "not given"),
+        ("Shade", f"{order.get('shade_strictness')}: pass at ΔE00 ≤ {order.get('tolerance_de00')}"),
+        ("Notes", order.get("notes") or "")))
+    plan = production_plan(order, best.recipe.conc) if best else None
+    plan_html = ""
+    if plan:
+        dyes = "".join(f"<tr><td>{html.escape(d)}</td><td class='num'>{g:,} g</td></tr>" for d, g in plan["dye_g"].items())
+        plan_html = f"""<table><tr><th>For the order</th><th class="num"></th></tr>
+<tr><td>Cotton</td><td class="num">{plan["fabric_kg"]:,} kg</td></tr><tr><td>Dye bath</td><td class="num">{plan["bath_litres"]:,} L</td></tr>
+{dyes}<tr><td>Salt</td><td class="num">{plan["salt_kg"]:,} kg</td></tr><tr><td>Soda ash</td><td class="num">{plan["soda_ash_kg"]:,} kg</td></tr></table>
+<p class="meta">{html.escape(plan["assumptions"])}</p>"""
+    return f"""<h2>Order and production plan</h2>
+<p class="meta">Read from the buyer's message by Muse Spark; quantities are plain arithmetic on the approved dip's recipe.</p>
+<div class="grid"><div><table>{rows}</table></div><div>{plan_html}</div></div>"""
+
+
 def _img(jpeg: bytes, width: int) -> str:
     return f'<img src="data:image/jpeg;base64,{base64.b64encode(jpeg).decode()}" width="{width}" alt="">'
 
 
 def render(campaign, target_photo: bytes | None = None, agent: str = "", api_calls: int | None = None,
-           preview: dict | None = None) -> str:
+           preview: dict | None = None, order: dict | None = None) -> str:
     c = campaign
     best = c.best
     tol = c.tolerance
-    passed = best is not None and best.delta_e <= tol
     diff = difference(c.target_lab, best.measurement.lab) if best else None
+    paper = best is not None and any("white-paper balance" in f for f in best.measurement.flags)
+    u = UNCERTAINTY["paper" if paper else "card"]
+    passed = best is not None and best.delta_e <= tol
+    certain = best is not None and best.delta_e + u <= tol
     when = time.strftime("%d %b %Y, %H:%M")
     ref = f"RZ-{c.campaign_id[-8:].upper()}"
     rows = []
@@ -74,9 +120,17 @@ def render(campaign, target_photo: bytes | None = None, agent: str = "", api_cal
     if best is not None:
         bath = best.recipe.as_array() / PROFILE.stock_per_l * 1000  # mL of stock per litre of bath
         per_kg = bath * LIQUOR_RATIO
-        prod = "".join(f"<tr><td>{html.escape(n)}</td><td class='num'>{v:g} {UNIT}</td><td class='num'>{m:.0f} mL</td></tr>"
+        owf = (lambda v: f"<td class='num'>{v * LIQUOR_RATIO / 10:.2f}%</td>") if UNIT == "g/L" else (lambda v: "")
+        prod = "".join(f"<tr><td>{html.escape(n)}</td><td class='num'>{v:g} {UNIT}</td>{owf(v)}<td class='num'>{m:.0f} mL</td></tr>"
                        for n, v, m in zip(DYES, best.recipe.conc, per_kg))
-    verdict = ("PASS" if passed else "NOT YET") if best else "NO DIP"
+    verdict = ("PASS" if certain else "BORDERLINE" if passed else "NOT YET") if best else "NO DIP"
+    options = sorted((s for s in c.shots if s.measurement.ok), key=lambda s: s.delta_e)[:3]
+    option_rows = "".join(
+        f"<tr><td><b>{tag}</b> · dip {s.index}</td><td><span class='sw' style='background:{lab_to_hex(s.measurement.lab)}'></span>"
+        f"{lab_to_hex(s.measurement.lab)}</td><td class='num'>{s.delta_e:.2f}</td>"
+        f"<td class='num'>{delta_e_cmc(c.target_lab, s.measurement.lab):.2f}</td>"
+        f"<td>{' · '.join(f'{v:g}' for v in s.recipe.conc)}</td></tr>"
+        for tag, s in zip("ABC", options))
     flags = sorted({f for s in c.shots for f in s.measurement.flags})
     notes = "".join(f"<li>{html.escape(f)}</li>" for f in flags) or "<li>No measurement warnings.</li>"
     return f"""<!doctype html><html lang="en"><head><meta charset="utf-8">
@@ -103,16 +157,26 @@ img {{ border-radius: 6px; max-width: 100%; height: auto; }} .sign {{ display:fl
     <b>Target</b> {lab_to_hex(c.target_lab)} · L*a*b* {", ".join(f"{v:.1f}" for v in c.target_lab)}
     {("<div>" + _img(target_photo, 300) + "</div>") if target_photo else ""}</div>
   <div><div class="chip" style="background:{lab_to_hex(best.measurement.lab) if best else "#fff"}"></div>
-    <b>Submitted dip {best.index if best else ""}</b> {lab_to_hex(best.measurement.lab) if best else ""}
+    <b>Option A: dip {best.index if best else ""}</b> {lab_to_hex(best.measurement.lab) if best else ""}
     {("· L*a*b* " + ", ".join(f"{v:.1f}" for v in best.measurement.lab)) if best else ""}</div>
   <div><div class="verdict">{verdict}</div>
-    {f'<div>ΔE00 <b>{diff["dE00"]:.2f}</b> against a tolerance of {tol}</div><div>ΔL* {diff["dL"]:+.2f} · ΔC* {diff["dC"]:+.2f} · ΔH* {diff["dH"]:+.2f}</div><div>The dip is <b>{html.escape(diff["words"])}</b> than the target.</div>' if diff else ""}</div>
+    {f'<div>ΔE00 <b>{best.delta_e:.2f}</b> ± {u} against a tolerance of {tol} · CMC(2:1) {delta_e_cmc(c.target_lab, best.measurement.lab):.2f}</div><div>ΔL* {diff["dL"]:+.2f} · ΔC* {diff["dC"]:+.2f} · ΔH* {diff["dH"]:+.2f}</div><div>The dip is <b>{html.escape(diff["words"])}</b> than the target.</div>' if diff else ""}
+    <div class="meta">{"Within tolerance even allowing for the camera's measurement error." if certain else f"Within tolerance, but the camera's measurement error (±{u}) could take it over: confirm on a spectrophotometer." if passed else ""}</div></div>
 </div>
 
-{f'''<h2>Recipe</h2>
-<table><tr><th>Dye</th><th class="num">Bath concentration</th><th class="num">Stock for 1 kg cotton (1:{LIQUOR_RATIO})</th></tr>{prod}</table>
+{f'''<h2>Options for the buyer</h2>
+<table><tr><th>Option</th><th>Measured</th><th class="num">ΔE00</th><th class="num">CMC(2:1)</th><th>Recipe ({" · ".join(DYES)}, {UNIT})</th></tr>{option_rows}</table>
+<p class="meta">Dye houses usually send two or three dips; these are the closest. Substrate: {html.escape((order or {}).get("fabric") or "white cotton strip")}.
+Standard: {"the customer's photo" if target_photo else "the target colour given"} ({lab_to_hex(c.target_lab)}).</p>
+
+<h2>Recipe</h2>
+<table><tr><th>Dye</th><th class="num">Bath concentration</th>{"<th class='num'>% on weight of fabric (1:" + str(LIQUOR_RATIO) + ")</th>" if UNIT == "g/L" else ""}<th class="num">Stock for 1 kg cotton (1:{LIQUOR_RATIO})</th></tr>{prod}</table>
 <p class="meta">Dip {best.recipe.dip_seconds:.0f} s. Stock at {PROFILE.stock_per_l:g} {UNIT if UNIT != "drops" else "drops"} per litre. Scale-up assumes the same liquor ratio, temperature and fixation as the lab dip; confirm with a bulk trial.</p>''' if best else ""}
 
+{_impact_block(c)}
+
+{_order_block(order, best) if order else ""}
+
 {f"""<h2>Bulk preview</h2>
 <div class="grid"><div>{_img(preview["jpeg"], 420)}</div>
 <div class="meta">The customer's photo, recoloured by Muse Image to dip {preview["dip"]}'s shade. An image model is not a colour
@@ -126,7 +190,9 @@ garment's pixels; it now measures {preview["measured_hex"]}, ΔE00 {preview["de0
 <h2>How it was measured</h2>
 <ul class="meta">
 <li>Each dip is dried and photographed on white paper; SAM 3.1 segments the strip and the 24-patch colour card, and a colour-correction matrix turns pixels into CIELAB (D65). Uneven light is evened out using the paper.</li>
-<li>Colour difference is CIEDE2000; ΔL*, ΔC*, ΔH* are CIELAB components (positive: lighter, brighter, counter-clockwise in hue).</li>
+<li>Colour difference is CIEDE2000 (and CMC 2:1 alongside); ΔL*, ΔC*, ΔH* are CIELAB components (positive: lighter, brighter, counter-clockwise in hue).</li>
+<li>Measurement error: about ±{UNCERTAINTY["card"]} ΔE00 with the printed colour card and ±{UNCERTAINTY["paper"]} with white paper only (median error on Rangrez's 44-photo test bench, simulated photos). A phone camera sees one light: check metamerism in a light booth under D65 and TL84 before bulk.</li>
+<li>Rangrez is a pre-screen and correction tool that gets a dye house to a good lab dip in fewer rounds; final approval stays with the buyer's instrument or light booth.</li>
 <li>Campaign run by {html.escape(agent or "Rangrez")}{f", {api_calls} live Meta API calls" if api_calls is not None else ""}; {len(c.shots)} dips; status {html.escape(c.status)}.</li>
 {notes}
 </ul>

src/rangrez/samples/kurta.json

@@ -0,0 +1,22 @@
+{
+  "lab": [
+    57.64,
+    -15.84,
+    -12.65
+  ],
+  "hex": "#5893a0",
+  "calibration": "card",
+  "concept": "kurta",
+  "home_recipe": {
+    "drops": {
+      "blue": 22,
+      "red": 1,
+      "yellow": 8
+    },
+    "water_ml": 20,
+    "teaspoons": 4,
+    "predicted_de00": 0.3,
+    "reachable": true,
+    "closest_hex": "#59939f"
+  }
+}

src/rangrez/samples/order.txt

@@ -0,0 +1 @@
+Hi bhaiya, need 500 kurtas in exactly this teal, cotton poplin, delivery by Friday 14th. Buyer is very strict on shade. Can you send the lab dip by tomorrow?

src/rangrez/samples/runs/teal-kurta/events.jsonl

@@ -0,0 +1,56 @@
+{"kind": "api", "model": "sam-3.1", "purpose": "segment 'kurta'", "seconds": 2.67, "ok": true, "detail": "", "at": 1793621762.353266}
+{"kind": "api", "model": "sam-3.1", "purpose": "segment 'white paper'", "seconds": 2.63, "ok": true, "detail": "", "at": 1793621766.479362}
+{"kind": "api", "model": "sam-3.1", "purpose": "segment 'color checker card'", "seconds": 2.71, "ok": true, "detail": "", "at": 1793621770.985225}
+{"kind": "api", "model": "muse-spark-1.3", "purpose": "read the order", "seconds": 4.46, "ok": true, "detail": "", "at": 1793621775.833088}
+{"kind": "start", "target_lab": [57.64, -15.84, -12.65], "target_hex": "#5893a0", "tolerance": 1.0, "agent": "muse-wonder-1.0", "rig": "VirtualRig", "memory_dips": 29, "memory_campaigns": 15, "at": 1793621775.928276}
+{"kind": "api", "model": "muse-wonder-1.0", "purpose": "plan next step", "seconds": 2.43, "ok": true, "detail": "2068 tokens", "at": 1793621778.355718}
+{"kind": "thought", "at": 1793621778.3567061, "text": "Target #5893a0 (Lab 57.64, -15.84, -12.65), tolerance dE00 1.0 \u2014 starting with model suggestions for the first dip."}
+{"kind": "tool", "at": 1793621778.3570712, "name": "get_state", "args": {}}
+{"kind": "api", "model": "muse-wonder-1.0", "purpose": "plan next step", "seconds": 2.76, "ok": true, "detail": "1856 tokens", "at": 1793621781.1219652}
+{"kind": "tool", "at": 1793621781.12275, "name": "suggest_recipes", "args": {}}
+{"kind": "api", "model": "muse-wonder-1.0", "purpose": "plan next step", "seconds": 3.94, "ok": true, "detail": "2384 tokens", "at": 1793621785.1281128}
+{"kind": "thought", "at": 1793621785.128912, "text": "No glimmer offered. Lab_memory's remembered dip was dE00 7.6 away \u2014 outside the ~6 threshold \u2014 so I'll trust model_inverse for the far-from-target first dip: turquoise 3.616, fuchsia 1.173, lemon yellow 1.669."}
+{"kind": "tool", "at": 1793621785.129199, "name": "write_note", "args": {"text": "Shot 1: Hypothesis model_inverse gives close start despite lot error. No glimmer; lab_memory source dip dE00 7.6 (>~6) so not used. Changed: first dip turquoise 3.616, fuchsia 1.173, lemon yellow 1.669. Expect near target but residual lot/saturation error, then fit_model."}}
+{"kind": "note", "at": 1793621785.129335, "who": "agent", "text": "Shot 1: Hypothesis model_inverse gives close start despite lot error. No glimmer; lab_memory source dip dE00 7.6 (>~6) so not used. Changed: first dip turquoise 3.616, fuchsia 1.173, lemon yellow 1.669. Expect near target but residual lot/saturation error, then fit_model."}
+{"kind": "api", "model": "muse-wonder-1.0", "purpose": "plan next step", "seconds": 1.91, "ok": true, "detail": "2255 tokens", "at": 1793621787.042033}
+{"kind": "tool", "at": 1793621787.042832, "name": "run_shot", "args": {"recipe": {"turquoise": 3.616, "fuchsia": 1.173, "lemon yellow": 1.669}, "rationale": "First dip: use model_inverse per rule; lab_memory remembered dip was 7.6 dE00 away (>~6 threshold), no glimmer offered."}}
+{"kind": "dispense", "at": 1793621787.0433102, "recipe": "turquoise 3.62 g/L, fuchsia 1.17 g/L, lemon yellow 1.67 g/L, dip 90 s", "index": 1, "rationale": "First dip: use model_inverse per rule; lab_memory remembered dip was 7.6 dE00 away (>~6 threshold), no glimmer offered."}
+{"kind": "api", "model": "sam-3.1", "purpose": "segment 'color checker card'", "seconds": 2.02, "ok": true, "detail": "", "at": 1793621789.455463}
+{"kind": "api", "model": "sam-3.1", "purpose": "segment 'white paper'", "seconds": 0.97, "ok": true, "detail": "", "at": 1793621790.687516}
+{"kind": "api", "model": "sam-3.1", "purpose": "segment 'fabric'", "seconds": 2.01, "ok": true, "detail": "", "at": 1793621794.4337459}
+{"kind": "api", "model": "sam-3.1", "purpose": "segment 'fabric swatch'", "seconds": 2.15, "ok": true, "detail": "", "at": 1793621797.301422}
+{"kind": "shot", "at": 1793621797.9141939, "index": 1, "recipe": "turquoise 3.62 g/L, fuchsia 1.17 g/L, lemon yellow 1.67 g/L, dip 90 s", "lab": [58.823361050996795, -14.364486445012759, -10.185166255851286], "hex": "#63969f", "delta_e": 1.9690501181668465, "flags": ["NOTE: evened out uneven light (4.9x across the paper)"], "rationale": "First dip: use model_inverse per rule; lab_memory remembered dip was 7.6 dE00 away (>~6 threshold), no glimmer offered."}
+{"kind": "api", "model": "muse-wonder-1.0", "purpose": "plan next step", "seconds": 2.68, "ok": true, "detail": "2603 tokens", "at": 1793621800.592704}
+{"kind": "thought", "at": 1793621800.593299, "text": "First dip dE00 1.97 \u2014 measured 58.82, -14.36, -10.19 vs target 57.64, -15.84, -12.65: too light, less blue/green. Refitting model to this real lot before correcting."}
+{"kind": "tool", "at": 1793621800.593459, "name": "fit_model", "args": {}}
+{"kind": "model", "at": 1793621800.6247702, "gains_before": {"turquoise": 1.21, "fuchsia": 0.605, "lemon yellow": 0.916}, "gains_after": {"turquoise": 1.202, "fuchsia": 0.604, "lemon yellow": 0.916}, "model_fit_error_de00": 2.46, "shots_used": 30}
+{"kind": "api", "model": "muse-wonder-1.0", "purpose": "plan next step", "seconds": 1.92, "ok": true, "detail": "2620 tokens", "at": 1793621802.545054}
+{"kind": "tool", "at": 1793621802.545749, "name": "get_state", "args": {}}
+{"kind": "api", "model": "muse-wonder-1.0", "purpose": "plan next step", "seconds": 7.11, "ok": true, "detail": "3090 tokens", "at": 1793621809.6604218}
+{"kind": "tool", "at": 1793621809.661202, "name": "suggest_recipes", "args": {}}
+{"kind": "api", "model": "muse-wonder-1.0", "purpose": "plan next step", "seconds": 3.77, "ok": true, "detail": "3575 tokens", "at": 1793621813.4884312}
+{"kind": "thought", "at": 1793621813.4892669, "text": "Best dip is now dE00 1.97 (<6), so per instructions I'll prefer colourist_correction over model_inverse \u2014 it corrects the real dip's measured error."}
+{"kind": "tool", "at": 1793621813.489579, "name": "write_note", "args": {"text": "Shot 2: Hypothesis colourist correction from real dip captures lot error model misses. Changed: use colourist_correction turquoise 4.296, fuchsia 1.084, lemon yellow 1.632 (up turquoise vs shot1 to darken, add green/blue). Expect dE00 move from 1.97 toward <1.0."}}
+{"kind": "note", "at": 1793621813.489713, "who": "agent", "text": "Shot 2: Hypothesis colourist correction from real dip captures lot error model misses. Changed: use colourist_correction turquoise 4.296, fuchsia 1.084, lemon yellow 1.632 (up turquoise vs shot1 to darken, add green/blue). Expect dE00 move from 1.97 toward <1.0."}
+{"kind": "api", "model": "muse-wonder-1.0", "purpose": "plan next step", "seconds": 1.73, "ok": true, "detail": "3499 tokens", "at": 1793621815.2218208}
+{"kind": "tool", "at": 1793621815.222573, "name": "run_shot", "args": {"recipe": {"turquoise": 4.296, "fuchsia": 1.084, "lemon yellow": 1.632}, "rationale": "Best dip within 6 dE00 (1.97), prefer colourist_correction learned from real dip over model_inverse."}}
+{"kind": "dispense", "at": 1793621815.2230558, "recipe": "turquoise 4.30 g/L, fuchsia 1.08 g/L, lemon yellow 1.63 g/L, dip 90 s", "index": 2, "rationale": "Best dip within 6 dE00 (1.97), prefer colourist_correction learned from real dip over model_inverse."}
+{"kind": "api", "model": "sam-3.1", "purpose": "segment 'color checker card'", "seconds": 1.65, "ok": true, "detail": "", "at": 1793621817.065462}
+{"kind": "api", "model": "sam-3.1", "purpose": "segment 'white paper'", "seconds": 2.08, "ok": true, "detail": "", "at": 1793621819.398997}
+{"kind": "api", "model": "sam-3.1", "purpose": "segment 'fabric'", "seconds": 0.75, "ok": true, "detail": "", "at": 1793621821.878986}
+{"kind": "api", "model": "sam-3.1", "purpose": "segment 'fabric swatch'", "seconds": 1.85, "ok": true, "detail": "", "at": 1793621824.4457579}
+{"kind": "shot", "at": 1793621825.0547872, "index": 2, "recipe": "turquoise 4.30 g/L, fuchsia 1.08 g/L, lemon yellow 1.63 g/L, dip 90 s", "lab": [58.34909827704456, -14.93625994840475, -11.815768969991014], "hex": "#5e95a0", "delta_e": 0.9520448628209843, "flags": ["NOTE: evened out uneven light (4.9x across the paper)"], "rationale": "Best dip within 6 dE00 (1.97), prefer colourist_correction learned from real dip over model_inverse."}
+{"kind": "api", "model": "sam-3.1", "purpose": "segment 'color checker card'", "seconds": 1.27, "ok": true, "detail": "", "at": 1793621826.485831}
+{"kind": "api", "model": "sam-3.1", "purpose": "segment 'white paper'", "seconds": 0.88, "ok": true, "detail": "", "at": 1793621827.6305852}
+{"kind": "api", "model": "sam-3.1", "purpose": "segment 'fabric'", "seconds": 1.88, "ok": true, "detail": "", "at": 1793621831.265545}
+{"kind": "note", "at": 1793621831.979785, "who": "lab", "text": "Confirmed with a second photo: dE00 0.95 and 0.89."}
+{"kind": "status", "at": 1793621831.9799628, "status": "matched", "shot": 2, "delta_e": 0.9201863208202254}
+{"kind": "api", "model": "muse-image-1.0", "purpose": "bulk preview", "seconds": 20.32, "ok": true, "detail": "", "at": 1793621853.0177689}
+{"kind": "api", "model": "sam-3.1", "purpose": "segment 'kurta'", "seconds": 2.46, "ok": true, "detail": "", "at": 1793621855.67038}
+{"kind": "api", "model": "sam-3.1", "purpose": "segment 'fabric'", "seconds": 2.05, "ok": true, "detail": "", "at": 1793621857.717909}
+{"kind": "api", "model": "sam-3.1", "purpose": "segment 'white paper'", "seconds": 1.95, "ok": true, "detail": "", "at": 1793621863.6589718}
+{"kind": "api", "model": "sam-3.1", "purpose": "segment 'color checker card'", "seconds": 1.3, "ok": true, "detail": "", "at": 1793621866.73721}
+{"kind": "api", "model": "sam-3.1", "purpose": "segment 'kurta'", "seconds": 2.42, "ok": true, "detail": "", "at": 1793621869.760772}
+{"kind": "api", "model": "sam-3.1", "purpose": "segment 'white paper'", "seconds": 0.98, "ok": true, "detail": "", "at": 1793621872.9022121}
+{"kind": "api", "model": "sam-3.1", "purpose": "segment 'color checker card'", "seconds": 0.97, "ok": true, "detail": "", "at": 1793621875.646933}
+{"kind": "api", "model": "muse-spark-1.3", "purpose": "reply to the buyer", "seconds": 4.37, "ok": true, "detail": "", "at": 1793621880.415}

src/rangrez/samples/runs/teal-kurta/meta.json

@@ -0,0 +1,20 @@
+{
+  "rig": "VirtualRig",
+  "scene": "lamp_desk",
+  "dyes": [
+    "turquoise",
+    "fuchsia",
+    "lemon yellow"
+  ],
+  "unit": "g/L",
+  "agent": "muse-wonder-1.0",
+  "tolerance": 1.0,
+  "target_lab": [
+    57.64,
+    -15.84,
+    -12.65
+  ],
+  "target_hex": "#5893a0",
+  "started": "2026-11-02 17:46:15",
+  "title": "Teal kurta for a strict buyer: live SAM 3.1, Muse Spark, Muse Wonder, Muse Image"
+}

src/rangrez/samples/runs/teal-kurta/order.json

@@ -0,0 +1,14 @@
+{
+  "message": "Hi bhaiya, need 500 kurtas in exactly this teal, cotton poplin, delivery by Friday 14th. Buyer is very strict on shade. Can you send the lab dip by tomorrow?",
+  "order": {
+    "deadline": "2026-11-14",
+    "fabric": "cotton poplin",
+    "garment": "kurta",
+    "lab_dip_due": "2026-11-03",
+    "notes": "exact teal shade",
+    "quantity": 500,
+    "quantity_unit": "pieces",
+    "shade_strictness": "strict",
+    "tolerance_de00": 1.0
+  }
+}

src/rangrez/samples/runs/teal-kurta/reply.txt

@@ -0,0 +1 @@
+Hi bhaiya, aapke 500 kurtas cotton poplin wale exact teal ke liye lab-dip report attached hai, saath me usi shade me garment ki photo bhi attached hai. Shade approved hai tolerance me, Delta 0.92 hai limit 1.0 ke andar, target se slightly lighter slightly duller hai. Humne 2 dips banaye the.

src/rangrez/samples/runs/teal-kurta/state.json

@@ -0,0 +1,91 @@
+{
+  "target_lab": [
+    57.64,
+    -15.84,
+    -12.65
+  ],
+  "target_hex": "#5893a0",
+  "tolerance_de00": 1.0,
+  "shots_used": 2,
+  "shots_left": 8,
+  "best": {
+    "shot": 2,
+    "recipe": {
+      "turquoise": 4.296,
+      "fuchsia": 1.084,
+      "lemon yellow": 1.632
+    },
+    "measured_lab": [
+      58.35,
+      -14.94,
+      -11.82
+    ],
+    "lab_sd": [
+      0.13,
+      0.05,
+      0.06
+    ],
+    "delta_e00": 0.92,
+    "flags": [
+      "NOTE: evened out uneven light (4.9x across the paper)"
+    ]
+  },
+  "history": [
+    {
+      "shot": 1,
+      "recipe": {
+        "turquoise": 3.616,
+        "fuchsia": 1.173,
+        "lemon yellow": 1.669
+      },
+      "measured_lab": [
+        58.82,
+        -14.36,
+        -10.19
+      ],
+      "lab_sd": [
+        0.18,
+        0.05,
+        0.07
+      ],
+      "delta_e00": 1.97,
+      "flags": [
+        "NOTE: evened out uneven light (4.9x across the paper)"
+      ]
+    },
+    {
+      "shot": 2,
+      "recipe": {
+        "turquoise": 4.296,
+        "fuchsia": 1.084,
+        "lemon yellow": 1.632
+      },
+      "measured_lab": [
+        58.35,
+        -14.94,
+        -11.82
+      ],
+      "lab_sd": [
+        0.13,
+        0.05,
+        0.06
+      ],
+      "delta_e00": 0.92,
+      "flags": [
+        "NOTE: evened out uneven light (4.9x across the paper)"
+      ]
+    }
+  ],
+  "model_gains": {
+    "turquoise": 1.202,
+    "fuchsia": 0.604,
+    "lemon yellow": 0.916
+  },
+  "stock_ml": {
+    "turquoise": 242.1,
+    "fuchsia": 247.7,
+    "lemon yellow": 246.7
+  },
+  "dyer_notes": [],
+  "status": "matched"
+}

src/rangrez/samples/runs/teal-kurta/target.json

@@ -0,0 +1,22 @@
+{
+  "lab": [
+    57.64,
+    -15.84,
+    -12.65
+  ],
+  "hex": "#5893a0",
+  "calibration": "card",
+  "concept": "kurta",
+  "home_recipe": {
+    "drops": {
+      "blue": 22,
+      "red": 1,
+      "yellow": 8
+    },
+    "water_ml": 20,
+    "teaspoons": 4,
+    "predicted_de00": 0.3,
+    "reachable": true,
+    "closest_hex": "#59939f"
+  }
+}

src/rangrez/server.py

@@ -19,6 +19,7 @@ import numpy as np
 from dotenv import load_dotenv
 from fastapi import FastAPI, File, Form, HTTPException, Request, UploadFile
 from fastapi.responses import FileResponse, HTMLResponse, Response, StreamingResponse
+from fastapi.staticfiles import StaticFiles
 from pydantic import BaseModel
 
 from .agent import WONDER_MODEL, run_deterministic, run_with_wonder
@@ -35,6 +36,7 @@ load_dotenv()
 STATIC = Path(__file__).parent / "static"
 
 app = FastAPI(title="Rangrez")
+app.mount("/static", StaticFiles(directory=STATIC), name="static")
 
 
 class Lab:
@@ -52,6 +54,9 @@ class Lab:
         self.target_photo: bytes | None = None  # the customer's photo the current target came from
         self.target_concept = "garment"
         self.preview: dict | None = None  # Muse Image's bulk preview, measured and corrected
+        self.order: dict | None = None  # the buyer's order, read by Muse Spark
+        self.order_message = ""
+        self.replay = None  # a recorded live run being shown again
         self.log.listeners.append(lambda call: self.publish({
             "kind": "api", "model": call.model, "purpose": call.purpose,
             "seconds": round(call.seconds, 2), "ok": call.ok, "detail": call.detail, "at": time.time(),
@@ -127,7 +132,8 @@ class Lab:
         c = self.campaign
         calls = sum(1 for e in self.history if e.get("kind") == "api")
         agent = next((e.get("agent") for e in self.history if e.get("kind") == "start"), "")
-        return render(c, target_photo=self.target_photo, agent=agent, api_calls=calls, preview=self.preview)
+        return render(c, target_photo=self.target_photo, agent=agent, api_calls=calls, preview=self.preview,
+                      order=self.order)
 
     def subscribe(self) -> queue.Queue:
         """A new page (a reload, the phone joining) first gets the campaign so far."""
@@ -144,6 +150,9 @@ class Lab:
         live = self.online if live is None else live
         if self.thread and self.thread.is_alive():
             raise HTTPException(409, "a campaign is already running")
+        if self.replay is not None:
+            self.replay.stop()
+            self.replay = None
         with self.lock:  # keep only the API calls made since the last start (e.g. reading the target photo)
             self.history = [e for e in self.history if e.get("kind") == "api" and e.get("at", 0) >= self.since]
             self.since = time.time()
@@ -326,18 +335,19 @@ def assist_webcam() -> dict:
 
 
 @app.post("/api/voice")
-async def voice(audio: UploadFile = File(...), passcode: str = Form("")) -> dict:
+async def voice(audio: UploadFile = File(...), passcode: str = Form(""), lang: str = Form("en")) -> dict:
     """One spoken turn from the hands-free dashboard: transcribe it, then do at most one safe thing."""
-    from .voice import intent, transcribe
+    from .voice import SAY, instructions, intent, transcribe
 
     if not LAB.live(passcode):
         raise HTTPException(403, "voice needs the Meta models: set MODEL_API_KEY, or enter the live passcode")
+    lang = lang if lang in SAY else "en"
     wav = await audio.read()
     try:
-        text = await asyncio.to_thread(transcribe, wav, LAB.log)
+        text = await asyncio.to_thread(transcribe, wav, LAB.log, lang)
     except RuntimeError as exc:
         raise HTTPException(502, str(exc))
-    act = intent(text)
+    act, say = intent(text), SAY[lang]
     c, result = LAB.campaign, ""
     rig = getattr(c, "rig", None)
     waiting = getattr(rig, "waiting", None)
@@ -345,25 +355,65 @@ async def voice(audio: UploadFile = File(...), passcode: str = Form("")) -> dict
         if waiting and hasattr(rig, "capture"):
             try:
                 rig.provide(await asyncio.to_thread(rig.capture))
-                result = "Photo taken. Measuring."
-            except (RuntimeError, ValueError) as exc:
-                result = f"Could not take the photo ({exc}). Send one from your phone."
+                result = say["photo"]
+            except (RuntimeError, ValueError):
+                result = say["photo_failed"]
         else:
-            result = "Nothing to photograph right now."
+            result = say["no_photo"]
     elif act == "stop":
         stop()
-        result = "Stopped."
+        result = say["stopped"]
     elif act == "repeat":
-        result = speakable(waiting) if waiting else "No dip is waiting."
+        result = instructions(waiting, lang) if waiting else say["no_dip"]
     elif act == "note" and c is not None:
         c.note(text, who="dyer")
-        result = "Noted for the colourist."
+        result = say["noted"]
     return {"transcript": text, "intent": act, "result": result}
 
 
-def speakable(w: dict) -> str:
-    amounts = ", ".join(f"{v} {w['unit']} of {d}" for d, v in w["amounts"].items() if float(v) > 0)
-    return f"Dip {w['index']}. {amounts}. Dip for {w['dip_seconds']} seconds. Say done when the strip is dry and on the paper."
+@app.post("/api/order")
+async def read_order(message: str = Form(...), passcode: str = Form("")) -> dict:
+    """The buyer's chat message, read by Muse Spark: what, how much, by when, how strict the shade."""
+    from .order import parse_order
+
+    if not LAB.live(passcode):
+        raise HTTPException(403, "reading an order needs the Meta models: set MODEL_API_KEY, or enter the live passcode")
+    try:
+        LAB.order = await asyncio.to_thread(parse_order, message[:2000], LAB.log)
+    except RuntimeError as exc:
+        raise HTTPException(502, str(exc))
+    LAB.order_message = message[:2000]
+    LAB.rec.stash("order.json", {"message": message[:2000], "order": LAB.order})
+    return LAB.order
+
+
+@app.post("/api/reply")
+async def reply(passcode: str = Form("")) -> dict:
+    """Draft the chat reply to the buyer, in their language, from the lab's own numbers."""
+    from .order import draft_reply, production_plan
+    from .report import difference
+
+    c = LAB.campaign
+    if c is None or c.best is None or not LAB.order_message:
+        raise HTTPException(409, "needs the buyer's message and a campaign with at least one dip")
+    if not LAB.live(passcode):
+        raise HTTPException(403, "drafting needs the Meta models: set MODEL_API_KEY, or enter the live passcode")
+    best = c.best
+    d = difference(c.target_lab, best.measurement.lab)
+    plan = production_plan(LAB.order, best.recipe.conc) if LAB.order else None
+    facts = {
+        "result": "approved shade, within tolerance" if c.status == "matched" else f"closest dip so far ({c.status})",
+        "delta_e00": round(best.delta_e, 2), "tolerance_de00": c.tolerance, "dip_vs_target": d["words"],
+        "dips_made": len(c.shots), "order": LAB.order,
+        "production_plan": plan and {"cotton_kg": plan["fabric_kg"], "dye_bath_litres": plan["bath_litres"]},
+        "preview_photo_attached": bool(LAB.preview),
+    }
+    try:
+        text = await asyncio.to_thread(draft_reply, LAB.order_message, facts, LAB.log)
+    except RuntimeError as exc:
+        raise HTTPException(502, str(exc))
+    LAB.rec.save("reply.txt", text)
+    return {"reply": text}
 
 
 @app.post("/api/preview")
@@ -388,6 +438,8 @@ async def preview(passcode: str = Form("")) -> dict:
 
 @app.get("/api/preview.jpg")
 def preview_image() -> Response:
+    if LAB.replay is not None and (data := LAB.replay.file("preview.jpg")):
+        return Response(data, media_type="image/jpeg")
     if not LAB.preview:
         raise HTTPException(404)
     return Response(LAB.preview["jpeg"], media_type="image/jpeg")
@@ -395,6 +447,8 @@ def preview_image() -> Response:
 
 @app.post("/api/stop")
 def stop() -> dict:
+    if LAB.replay is not None:
+        LAB.replay.stop()
     c = LAB.campaign
     if c is None:
         return {"ok": True}
@@ -413,13 +467,82 @@ def state() -> dict:
 
 @app.get("/api/report.html")
 def report() -> HTMLResponse:
+    if LAB.replay is not None and (page := LAB.replay.file("report.html")):
+        return HTMLResponse(page)
     if LAB.campaign is None or not LAB.campaign.shots:
         raise HTTPException(404, "no dips yet")
     return HTMLResponse(LAB.report())
 
 
+@app.get("/api/samples")
+def samples() -> dict:
+    """What a first-time visitor can try without bringing anything: a photo, a buyer's message, recorded runs."""
+    from .replay import SAMPLES, runs
+
+    order = SAMPLES / "order.txt"
+    read = SAMPLES / "kurta.json"  # how live SAM 3.1 read the sample photo, for visitors without the passcode
+    return {"photo": "/api/samples/kurta.jpg", "concept": "kurta",
+            "read": json.loads(read.read_text()) if read.exists() else None,
+            "order": order.read_text().strip() if order.exists() else "", "runs": runs()}
+
+
+@app.get("/api/samples/kurta.jpg")
+def sample_photo() -> Response:
+    from .replay import SAMPLES
+
+    return Response((SAMPLES / "kurta.jpg").read_bytes(), media_type="image/jpeg")
+
+
+@app.post("/api/replay/{name}")
+def replay(name: str) -> dict:
+    """Show a recorded live run again: every Meta API call in it happened for real."""
+    from .replay import Replay
+
+    if LAB.thread and LAB.thread.is_alive():
+        raise HTTPException(409, "a campaign is running: watch it, or stop it first")
+    if LAB.replay is not None:
+        LAB.replay.stop()
+    try:
+        r = Replay(name, LAB.publish)
+    except FileNotFoundError:
+        raise HTTPException(404, "no such recorded run")
+    with LAB.lock:
+        LAB.history = []
+    LAB.campaign = None
+    LAB.replay = r
+    r.start()
+    return {"ok": True, "recorded": r.meta.get("started", "")}
+
+
+@app.get("/api/replay-file/{name}")
+def replay_file(name: str) -> Response:
+    """What else a recorded run produced: the buyer's order and the reply Muse Spark drafted."""
+    if LAB.replay is None or name not in ("order.json", "reply.txt", "target.json"):
+        raise HTTPException(404)
+    data = LAB.replay.file(name)
+    if data is None:
+        raise HTTPException(404)
+    return Response(data, media_type="application/json" if name.endswith(".json") else "text/plain; charset=utf-8")
+
+
+@app.get("/api/memory")
+def memory() -> dict:
+    """How the lab has done with this dye lot, campaign by campaign (the night shift, live)."""
+    path = default_path()
+    m = LabMemory(path) if path is not None else None
+    if m is None:
+        return {"dips": 0, "campaigns": []}
+    keep = ("status", "dips", "first_de00", "best_de00")
+    return {"dips": len(m.dips), "campaigns": [{k: c.get(k) for k in keep} for c in m.campaigns[-60:]]}
+
+
 @app.get("/api/shot/{index}.jpg")
 def shot_image(index: int, raw: bool = False) -> Response:
+    if LAB.replay is not None:
+        data = LAB.replay.file(f"dip{index:02d}_{'photo' if raw else 'sam'}.jpg")
+        if data is None:
+            raise HTTPException(404)
+        return Response(data, media_type="image/jpeg")
     c = LAB.campaign
     if not c or not 1 <= index <= len(c.shots):
         raise HTTPException(404)

src/rangrez/static/index.html

@@ -3,260 +3,669 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Rangrez — self-driving dye lab</title>
+<title>Rangrez · a self-driving dye lab</title>
+<link rel="icon" type="image/svg+xml" href="/static/logo.svg">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Inter:wght@400;500;600;700&family=Tiro+Devanagari+Hindi&display=swap" rel="stylesheet">
 <style>
   :root {
-    --bg: #0f1012; --panel: #17191c; --line: #2a2d32; --ink: #eceae6; --mute: #9a968f;
-    --accent: #e8a33d; --ok: #3fb97f; --warn: #e2b43c; --bad: #e0614f; --cyan: #33d6e8;
+    --bg: #f5efe4; --panel: #fffcf6; --panel2: #fbf6ec; --ink: #241f1a; --mute: #7a7166; --line: #e7dccb;
+    --dye: #2f5d8a; --ok: #2d7a52; --warn: #b07a12; --bad: #b3432d; --cyan: #1b8aa0; --shadow: 0 1px 2px #3a2a1214, 0 8px 24px #3a2a120f;
+    --serif: "Fraunces", Georgia, serif; --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
   }
   * { box-sizing: border-box; }
-  body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
-  header { display: flex; align-items: baseline; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
-  header h1 { margin: 0; font-size: 22px; letter-spacing: .5px; }
-  header .sub { color: var(--mute); }
-  .pill { padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); font-size: 12px; color: var(--mute); }
-  .pill.running { color: var(--accent); border-color: var(--accent); }
-  .pill.matched { color: var(--ok); border-color: var(--ok); }
+  body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--sans); }
+  a { color: var(--dye); }
+  button { font: inherit; cursor: pointer; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 9px 14px; font-weight: 600; }
+  button.primary { background: var(--ink); color: #fffcf6; border-color: var(--ink); }
+  button.dye { background: var(--dye); color: #fff; border-color: transparent; }
+  button:disabled { opacity: .45; cursor: default; }
+  button.small { padding: 5px 10px; font-size: 12.5px; font-weight: 500; }
+  textarea, input[type=text], input[type=number], input[type=password], select { width: 100%; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; }
+  label { display: block; color: var(--mute); font-size: 12px; margin: 10px 0 4px; }
+  .hint { color: var(--mute); font-size: 12.5px; margin: 6px 0 0; }
+  [hidden] { display: none !important; }
+
+  /* ---- header ---- */
+  header { display: flex; align-items: center; gap: 16px; padding: 14px 24px; flex-wrap: wrap; }
+  .brand { display: flex; align-items: baseline; gap: 10px; }
+  .brand .hi { font-family: "Tiro Devanagari Hindi", serif; font-size: 22px; color: var(--dye); line-height: 1; transition: color .8s; }
+  .brand h1 { font-family: var(--serif); font-size: 26px; margin: 0; letter-spacing: .2px; }
+  .brand .sub { color: var(--mute); font-size: 13px; }
+  .tabs { display: flex; gap: 4px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 3px; }
+  .tabs button { border: 0; background: transparent; padding: 6px 14px; font-weight: 600; color: var(--mute); }
+  .tabs button[aria-selected=true] { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
+  .spacer { flex: 1; }
+  .pill { padding: 4px 11px; border-radius: 99px; border: 1px solid var(--line); font-size: 12px; color: var(--mute); background: var(--panel); white-space: nowrap; }
+  .pill.running { color: var(--dye); border-color: var(--dye); }
+  .pill.waiting { color: var(--cyan); border-color: var(--cyan); }
+  .pill.matched { color: #fff; background: var(--ok); border-color: var(--ok); }
   .pill.out_of_gamut { color: var(--warn); border-color: var(--warn); }
   .pill.escalated, .pill.error { color: var(--bad); border-color: var(--bad); }
-  .spacer { flex: 1; }
-  main { display: grid; grid-template-columns: 300px minmax(0, 1fr) 360px; gap: 14px; padding: 14px 22px; }
-  @media (max-width: 1100px) { main { grid-template-columns: 1fr; } }
-  section { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; min-width: 0; }
-  h2 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--mute); font-weight: 600; }
-  .stack > * + * { margin-top: 14px; }
-  label { display: block; color: var(--mute); font-size: 12px; margin-bottom: 4px; }
-  input[type=text], input[type=number] { width: 100%; background: #0c0d0f; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; font: inherit; }
-  input[type=color] { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 6px; background: none; padding: 2px; }
-  button { width: 100%; background: var(--accent); color: #1a1206; border: 0; border-radius: 7px; padding: 10px; font-weight: 700; font-size: 14px; cursor: pointer; }
-  button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); font-weight: 500; }
-  button:disabled { opacity: .5; cursor: default; }
-  .row { display: flex; gap: 8px; }
-  .compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
-  .chip { border-radius: 10px; min-height: 150px; border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; transition: background .6s; }
-  .chip span { background: rgba(0,0,0,.55); padding: 3px 8px; border-radius: 5px; align-self: flex-start; font-size: 12px; font-variant-numeric: tabular-nums; }
-  .de { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 120px; }
-  .de b { font-size: 44px; font-variant-numeric: tabular-nums; line-height: 1; }
-  .de small { color: var(--mute); margin-top: 6px; text-align: center; }
-  .de.pass b { color: var(--ok); }
-  #previewImg { width: 100%; border-radius: 8px; border: 1px solid var(--line); margin-top: 8px; }
-  #frame { width: 100%; border-radius: 8px; border: 1px solid var(--line); background: #000; aspect-ratio: 16/9; object-fit: contain; }
-  svg { width: 100%; height: 170px; display: block; }
-  table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
-  td, th { padding: 5px 4px; border-bottom: 1px solid var(--line); text-align: left; }
+
+  /* ---- Meta model chips ---- */
+  .labbar { display: flex; align-items: center; gap: 12px; padding: 0 24px 12px; flex-wrap: wrap; }
+  .models { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
+  .facts { color: var(--mute); font-size: 12px; white-space: nowrap; }
+  header { border-bottom: 1px solid var(--line); margin-bottom: 12px; background: linear-gradient(180deg, #fffaf1, var(--bg)); }
+  #tourBtn { box-shadow: 0 6px 18px #24201b33; }
+  .model { display: flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); font-size: 12.5px; color: var(--mute); transition: all .25s; }
+  .model b { color: var(--ink); font-weight: 600; }
+  .model i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .25s, box-shadow .25s; }
+  .model .n { font-variant-numeric: tabular-nums; color: var(--mute); }
+  .model.live { border-color: var(--dye); color: var(--ink); }
+  .model.live i { background: var(--dye); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dye) 25%, transparent); }
+
+  .banner { margin: 0 24px 10px; padding: 9px 14px; border-radius: 10px; background: #fff4d6; border: 1px solid #ecd28a; color: #6b4e00; font-size: 13px; }
+
+  /* ---- the tape: every dip is a segment of cotton tape ---- */
+  .tape-wrap { margin: 0 24px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 10px; box-shadow: var(--shadow); }
+  .tape-wrap h2 { margin: 0 0 8px; }
+  .tape { display: flex; align-items: flex-end; gap: 2px; min-height: 104px; overflow-x: auto; padding: 4px 2px 6px; }
+  .seg { position: relative; flex: 0 0 132px; display: flex; flex-direction: column; justify-content: flex-end; }
+  .seg.new { animation: soak 1.4s ease-out, slidein .5s ease-out; }
+  .seg .cloth { height: 74px; background-color: var(--c);
+      background-image: linear-gradient(180deg, #ffffff30 0, transparent 22%, transparent 70%, #00000024 100%),
+        repeating-linear-gradient(45deg, #ffffff12 0 1.5px, transparent 1.5px 4px), repeating-linear-gradient(-45deg, #0000000d 0 1px, transparent 1px 5px);
+      box-shadow: 0 6px 14px -6px #3a2a1255, inset 0 0 0 1px #00000014; }
+  .seg:first-child .cloth { border-radius: 6px 0 0 6px; }
+  .seg small { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; color: var(--mute); padding: 6px 4px 0; font-variant-numeric: tabular-nums; }
+  .seg small b { font: 700 16px var(--serif); color: var(--ink); }
+  .seg.pass small b { color: var(--ok); }
+  .seg.pass small b::after { content: " ✓"; font-size: 13px; }
+  .arrow { flex: 0 0 auto; align-self: center; margin: 0 10px 18px; color: var(--mute); font-size: 20px; }
+  .seg.target { flex-basis: 150px; }
+  .seg.target .cloth { border-radius: 0 10px 10px 0; box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--c), 0 8px 18px -6px #3a2a1266; }
+  .seg.empty { flex: 1 1 auto; }
+  .seg.empty .cloth { background-color: #fbf8f2; border-radius: 6px 0 0 6px; }
+  @keyframes slidein { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
+  @keyframes soak { from { filter: saturate(0) brightness(1.4); } to { filter: none; } }
+
+  /* ---- layout ---- */
+  main { display: grid; grid-template-columns: 330px minmax(0, 1fr) 330px; gap: 14px; padding: 0 24px 24px; }
+  @media (max-width: 1180px) { main { grid-template-columns: 1fr 1fr; } .col-right { grid-column: span 2; } }
+  @media (max-width: 760px) { .model .job, .brand .sub { display: none; } .facts { white-space: normal; } .seg { flex-basis: 96px; } }
+  @media (max-width: 760px) { main { grid-template-columns: 1fr; } .col-right { grid-column: auto; } header { padding: 12px 16px; } .models, .tape-wrap, main { padding-left: 16px; padding-right: 16px; } .tape-wrap { margin-left: 16px; margin-right: 16px; } }
+  .col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
+  section { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: var(--shadow); min-width: 0; }
+  h2 { margin: 0 0 10px; font: 600 11.5px var(--sans); text-transform: uppercase; letter-spacing: 1.1px; color: var(--mute); }
+  h3 { font-family: var(--serif); font-size: 22px; margin: 0 0 8px; letter-spacing: -.2px; }
+  .tape-wrap h2 { display: flex; justify-content: space-between; }
+
+  /* start card */
+  .quick { display: grid; gap: 8px; }
+  .presets { display: flex; gap: 8px; margin-top: 10px; }
+  .presets button { flex: 1; height: 38px; padding: 0; border-radius: 9px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
+  .presets button[aria-pressed=true] { box-shadow: 0 0 0 2px var(--ink); }
+  .pick { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
+  .pick input[type=color] { width: 44px; height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 2px; background: #fff; }
+  details { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 10px; }
+  summary { cursor: pointer; color: var(--mute); font-weight: 600; font-size: 12.5px; }
+  .row { display: flex; gap: 8px; align-items: center; }
+  .row > * { flex: 1; }
+
+  /* hero: camera + gauge */
+  .camera { position: relative; border-radius: 12px; overflow: hidden; background: #ece4d6; aspect-ratio: 3/2; display: flex; align-items: center; justify-content: center; }
+  .camera img { width: 100%; height: 100%; object-fit: contain; background: #1b1916; }
+  .camera .empty { color: var(--mute); text-align: center; padding: 20px; max-width: 360px; }
+  .camera .empty b { display: block; font-family: var(--serif); font-size: 28px; color: var(--ink); margin-bottom: 8px; letter-spacing: -.3px; }
+  .camera .empty .row > * { flex: 0 0 auto; }
+  .caption { font-size: 12.5px; color: var(--mute); margin-top: 8px; }
+  .gauge-box { display: flex; flex-direction: column; align-items: center; gap: 4px; }
+  .gauge { position: relative; width: 190px; height: 190px; }
+  .gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
+  .gauge .val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
+  .gauge .val b { font: 700 46px var(--serif); font-variant-numeric: tabular-nums; line-height: 1; }
+  .gauge .val small { color: var(--mute); font-size: 12px; margin-top: 4px; }
+  .gauge.pass .val b { color: var(--ok); }
+  .gauge.pass { animation: pulse 1.4s ease-out; }
+  @keyframes pulse { 0% { transform: scale(1); } 30% { transform: scale(1.05); } 100% { transform: scale(1); } }
+  .split { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 12px; overflow: hidden; height: 84px; margin-top: 8px; box-shadow: inset 0 0 0 1px #00000014; }
+  .split div { display: flex; align-items: flex-end; padding: 6px 8px; font-size: 11.5px; transition: background .8s; }
+  .split span { background: #fffcf6e6; padding: 2px 7px; border-radius: 5px; font-variant-numeric: tabular-nums; }
+  .verdict { text-align: center; font-size: 13px; color: var(--mute); min-height: 20px; }
+  .outcome { border: 2px solid var(--ok); }
+  .outcome h3 { color: var(--ok); }
+
+  /* assist */
+  .assist { border: 2px solid var(--dye); }
+  .amounts { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; }
+  .amount { flex: 1; min-width: 86px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-align: center; background: var(--panel2); }
+  .amount b { display: block; font: 700 30px var(--serif); font-variant-numeric: tabular-nums; }
+  .amount small { color: var(--mute); }
+  .assist ol { margin: 0 0 12px; padding-left: 20px; } .assist li { margin: 3px 0; }
+
+  /* charts, tables, feeds */
+  svg.chart { width: 100%; height: 160px; display: block; }
+  table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
+  td, th { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: left; }
   th { color: var(--mute); font-weight: 500; }
-  .hint .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin: 0 4px; border: 1px solid #0006; }
-  td .sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -3px; margin-right: 6px; border: 1px solid #0006; }
-  .feed { max-height: 280px; overflow: auto; font-size: 12.5px; }
+  .sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -3px; margin-right: 6px; box-shadow: inset 0 0 0 1px #0002; }
+  .feed { max-height: 300px; overflow: auto; font-size: 12.5px; }
   .feed div { padding: 6px 0; border-bottom: 1px dashed var(--line); }
-  .feed .who { color: var(--accent); font-weight: 600; margin-right: 6px; }
+  .feed .who { color: var(--dye); font-weight: 700; margin-right: 6px; }
   .feed .tool { color: var(--cyan); }
   .feed .gate { color: var(--bad); }
   .feed .muted { color: var(--mute); }
   .api div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
-  .api .m { color: var(--cyan); }
-  .hint { color: var(--mute); font-size: 12px; }
-  .assist { border-color: var(--accent); }
-  .assist[hidden] { display: none; }
-  .amounts { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
-  .amount { flex: 1; min-width: 90px; border: 1px solid var(--line); border-radius: 8px; padding: 10px; text-align: center; }
-  .amount b { display: block; font-size: 30px; font-variant-numeric: tabular-nums; }
-  .amount small { color: var(--mute); }
-  .assist ol { margin: 0 0 12px; padding-left: 20px; }
-  .assist li { margin: 3px 0; }
-  .pill.waiting { color: var(--cyan); border-color: var(--cyan); }
-  .pill.stopped { color: var(--mute); }
+  .api .m { color: var(--cyan); font-weight: 600; }
+  .log summary { font: 600 11.5px var(--sans); text-transform: uppercase; letter-spacing: 1.1px; }
+  .log[open] summary { margin-bottom: 10px; }
+  #previewImg { width: 100%; border-radius: 10px; margin-top: 8px; }
+
+  /* ---- motion ---- */
+  section, .tape-wrap { animation: rise .6s ease-out both; }
+  .col > section:nth-child(2) { animation-delay: .08s; } .col > section:nth-child(3) { animation-delay: .16s; }
+  .col-right > section { animation-delay: .12s; }
+  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
+  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
+
+  .dyeing { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 22px; background: radial-gradient(circle at 50% 60%, #fffaf0, #efe5d3); flex-direction: column; }
+  .dyeing svg { width: 220px; height: 220px; overflow: visible; }
+  .dyeing .label { font: 600 15px var(--sans); color: var(--ink); }
+  .dyeing .label small { display: block; font-weight: 400; color: var(--mute); font-size: 12.5px; text-align: center; margin-top: 2px; }
+  .drop { animation: fall 1.1s cubic-bezier(.5, 0, .9, .5) infinite; opacity: 0; }
+  @keyframes fall { 0% { transform: translateY(-40px); opacity: 0; } 15% { opacity: 1; } 75% { transform: translateY(72px); opacity: 1; } 76%, 100% { transform: translateY(72px); opacity: 0; } }
+  .ripple { transform-origin: 0 128px; animation: ripple 1.1s ease-out infinite; opacity: 0; }
+  @keyframes ripple { 0%, 70% { transform: scale(.2); opacity: 0; } 75% { opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
+  .liquid { transition: fill 2.4s ease; }
+  .strip { animation: dip 4.2s ease-in-out infinite; }
+  @keyframes dip { 0%, 12% { transform: translateY(-95px); } 38%, 62% { transform: translateY(0); } 88%, 100% { transform: translateY(-95px); } }
+  .strip .dyed { transition: fill 1.6s ease .9s; }
+  .burst { position: absolute; left: 50%; top: 50%; width: 9px; height: 12px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; pointer-events: none; animation: burst 1.3s ease-out forwards; }
+  @keyframes burst { from { transform: translate(-50%, -50%) scale(.4); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--r)); opacity: 0; } }
+
+  .hero-logo { display: block; margin: 0 auto 12px; overflow: visible; }
+  .hl-drop { transform-origin: 32px 60px; animation: breathe 3.2s ease-in-out infinite; }
+  @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05) translateY(-1px); } }
+  .hl-tape rect { transform-box: fill-box; transform-origin: left center; animation: walk 4.8s ease-out infinite both; }
+  .hl-tape .t2 { animation-delay: .5s; } .hl-tape .t3 { animation-delay: 1s; }
+  @keyframes walk { 0% { transform: scaleX(0); opacity: 0; } 12% { transform: scaleX(1); opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
+  .brand img { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
+  .brand:hover img { transform: rotate(-12deg) scale(1.08); }
+
+  /* ---- the case ---- */
+  .case-hero { margin: 18px 0 0; border-radius: 18px; overflow: hidden; position: relative; aspect-ratio: 21 / 8; background: #2a2018; }
+  .case-hero img { width: 100%; height: 100%; object-fit: cover; animation: pan 26s ease-in-out infinite alternate; transform-origin: 40% 60%; }
+  @keyframes pan { from { transform: scale(1.04) translateX(0); } to { transform: scale(1.14) translateX(-3%); } }
+  .case-hero figcaption { position: absolute; left: 14px; bottom: 12px; font-size: 12px; color: #fff; background: rgba(20, 14, 8, .55); padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(4px); }
+  .case { max-width: 1060px; margin: 0 auto; padding: 4px 24px 60px; }
+  .case h2.big { font: 700 34px/1.15 var(--serif); text-transform: none; letter-spacing: 0; color: var(--ink); margin: 18px 0 10px; }
+  .case h3 { margin-top: 34px; font-size: 24px; }
+  .case p { font-size: 15px; max-width: 760px; }
+  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
+  .card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: var(--shadow); }
+  .card .num { font: 700 30px var(--serif); color: var(--dye); }
+  .card .label { color: var(--mute); font-size: 13px; }
+  .compare td, .compare th { font-size: 13.5px; padding: 8px 6px; vertical-align: top; }
+  .yes { color: var(--ok); font-weight: 700; } .no { color: var(--bad); } .part { color: var(--warn); }
+  .limits li { margin: 6px 0; }
+
+  /* ---- tour ---- */
+  .tour-spot { position: fixed; z-index: 50; border-radius: 14px; box-shadow: 0 0 0 9999px #1c140acc; transition: all .35s ease; pointer-events: none; }
+  .tour-card { position: fixed; z-index: 51; width: min(380px, calc(100vw - 32px)); background: var(--panel); border-radius: 14px; padding: 18px; box-shadow: 0 20px 60px #0008; transition: top .35s, left .35s; }
+  .tour-card h3 { margin: 0 0 6px; }
+  .tour-card p { margin: 0 0 14px; color: #3d362e; }
+  .tour-card .steps { color: var(--mute); font-size: 12px; }
+  .tour-card .row { margin-top: 4px; }
+  .tour-card .row > * { flex: 0 0 auto; }
 </style>
 </head>
 <body>
 <header>
-  <h1>Rangrez</h1>
-  <span class="sub">a self-driving dye lab on Meta models</span>
+  <div class="brand"><img src="/static/logo.svg" alt="" width="40" height="40" style="align-self:center"><h1>Rangrez</h1><span class="hi" aria-hidden="true">रंगरेज़</span><span class="sub">a self-driving dye lab on Meta models</span></div>
+  <div class="tabs" role="tablist">
+    <button role="tab" id="tabLab" aria-selected="true">The lab</button>
+    <button role="tab" id="tabCase" aria-selected="false">The case</button>
+  </div>
   <span class="spacer"></span>
-  <span class="pill" id="agent">agent: …</span>
-  <span class="pill" id="rig">rig: …</span>
-  <span class="pill" id="memory">lab memory</span>
   <span class="pill" id="status">idle</span>
+  <button class="primary" id="tourBtn">▶ Take the 2-minute tour</button>
 </header>
 
+<div class="labbar">
+  <div class="models" id="models" aria-label="Meta models, lighting up as they are called"></div>
+  <div class="facts"><span id="rig">rig: …</span> · <span id="agent">agent: …</span> · <span id="memory">lab memory</span></div>
+</div>
+<div class="banner" id="replayBanner" hidden></div>
+
+<div id="labView">
+<div class="tape-wrap" id="tapeWrap">
+  <h2><span>The tape: every dip, dyed and measured, ending at the target</span><span id="tapeNote"></span></h2>
+  <div class="tape" id="tape"></div>
+</div>
+
 <main>
-  <div class="stack">
-    <section>
-      <h2>Target shade</h2>
-      <label for="picker">Pick a colour</label>
-      <input type="color" id="picker" value="#4b909d">
-      <div style="height:10px"></div>
-      <label for="photo">…or match an object in a photo</label>
-      <input type="file" id="photo" accept="image/*">
-      <div style="height:6px"></div>
-      <input type="text" id="concept" value="kurta" aria-label="Object to match in the photo">
-      <div style="height:8px"></div>
-      <button class="ghost" id="usePhoto">Read colour with SAM 3.1</button>
+  <div class="col">
+    <section id="startCard">
+      <h3>Match a colour</h3>
+      <div class="quick">
+        <button class="dye" id="sampleBtn">Match this kurta (sample photo)</button>
+        <button id="replayBtn">Watch a recorded live run</button>
+      </div>
+      <div class="presets" id="presets" aria-label="Preset shades"></div>
+      <div class="pick">
+        <input type="color" id="picker" value="#4b909d" aria-label="Pick a target colour">
+        <button class="primary" id="start" style="flex:1">Start the lab</button>
+        <button class="small" id="stop">Stop</button>
+      </div>
       <p class="hint" id="photoNote"></p>
       <p class="hint" id="homeRecipe" hidden></p>
-      <label for="tol">Pass tolerance (CIEDE2000)</label>
-      <input type="number" id="tol" value="1.5" step="0.1" min="0.5" max="5">
-      <div style="height:12px"></div>
-      <div id="liveBox" hidden>
-        <label for="passcode">Live passcode (runs SAM 3.1 and Muse Wonder; without it, the offline policy)</label>
-        <input type="password" id="passcode" autocomplete="off">
-        <div style="height:12px"></div>
-      </div>
-      <button id="start">Start campaign</button>
-      <div style="height:8px"></div>
-      <button class="ghost" id="stop">Stop</button>
-      <div style="height:8px"></div>
-      <button class="ghost" id="handsFree" aria-pressed="false">Hands-free voice: off</button>
-      <p class="hint" id="voiceNote">Say "done" when the strip is dry, "repeat", or "stop". Anything else goes to the colourist's notebook.</p>
+      <details id="advanced">
+        <summary>Your own photo, the buyer's message, voice, settings</summary>
+        <label for="photo">A photo of the garment to match (with the colour card or white paper in view)</label>
+        <input type="file" id="photo" accept="image/*">
+        <div class="row" style="margin-top:6px"><input type="text" id="concept" value="kurta" aria-label="Object to match in the photo"><button class="small" id="usePhoto">Read with SAM 3.1</button></div>
+        <label for="orderMsg">The buyer's message (English or Hindi)</label>
+        <textarea id="orderMsg" rows="3" placeholder="e.g. need 500 kurtas in this teal, cotton poplin, by Friday. Buyer is strict on shade."></textarea>
+        <button class="small" id="readOrder" style="margin-top:6px">Read the order with Muse Spark</button>
+        <p class="hint" id="orderNote"></p>
+        <label for="tol">Pass tolerance, CIEDE2000 (smaller is stricter; 1.0 strict, 1.5 normal, 2.0 relaxed)</label>
+        <input type="number" id="tol" value="1.5" step="0.1" min="0.5" max="5">
+        <div id="liveBox" hidden>
+          <label for="passcode">Live passcode (runs the Meta models live; without it, the offline policy)</label>
+          <input type="password" id="passcode" autocomplete="off">
+        </div>
+        <label>Hands-free (the dyer's gloves are wet)</label>
+        <div class="row"><button class="small" id="handsFree" aria-pressed="false">Hands-free voice: off</button>
+          <select id="lang" aria-label="Voice language"><option value="en">English</option><option value="hi">हिन्दी</option></select></div>
+        <p class="hint" id="voiceNote">Say "done" when the strip is dry, "repeat", or "stop" ("हो गया", "फिर से", "बंद करो"). Anything else goes to the colourist's notebook.</p>
+      </details>
     </section>
+
     <section>
-      <h2>Meta API calls</h2>
-      <div class="feed api" id="api"><div class="muted">No calls yet.</div></div>
+      <h2>Convergence</h2>
+      <svg class="chart" id="chart" viewBox="0 0 340 160" role="img" aria-label="Colour difference per dip"></svg>
     </section>
   </div>
 
-  <div class="stack">
+  <div class="col">
     <section class="assist" id="assist" hidden>
       <h2 id="assistTitle">Your turn: dip 1</h2>
       <div class="amounts" id="amounts"></div>
       <ol id="assistSteps"></ol>
-      <label for="assistPhoto">Photo of the dried strip next to the colour card or on white paper</label>
+      <label for="assistPhoto">Photo of the dried strip on white paper or next to the colour card</label>
       <input type="file" id="assistPhoto" accept="image/*" capture="environment">
-      <div style="height:8px"></div>
-      <div class="row"><button id="sendPhoto">Send photo</button><button class="ghost" id="useWebcam">Use webcam</button></div>
+      <div class="row" style="margin-top:8px"><button class="dye" id="sendPhoto">Send photo</button><button id="useWebcam">Use webcam</button></div>
       <p class="hint" id="assistNote"></p>
     </section>
-    <section>
-      <h2>Latest dip vs target</h2>
-      <div class="compare">
-        <div class="chip" id="targetChip"><span id="targetLabel">target</span></div>
-        <div class="de" id="deBox"><b id="de">—</b><small id="deNote">CIEDE2000</small></div>
-        <div class="chip" id="dipChip"><span id="dipLabel">no dip yet</span></div>
+
+    <section id="cameraCard">
+      <h2>What the camera sees · SAM 3.1 masks: colour card (yellow), strip (cyan)</h2>
+      <div class="camera" id="camera">
+        <div class="empty" id="cameraEmpty">
+          <!-- the logo, alive: the drop breathes and the tape of dips walks towards the shade, again and again -->
+          <svg class="hero-logo" viewBox="0 0 64 64" width="96" height="96" aria-hidden="true">
+            <defs><linearGradient id="hl-dye" x1="20" y1="4" x2="46" y2="58" gradientUnits="userSpaceOnUse">
+              <stop offset="0" stop-color="#12a5bd"/><stop offset="0.5" stop-color="#d9378a"/><stop offset="1" stop-color="#f6b81c"/>
+              <animateTransform attributeName="gradientTransform" type="rotate" values="-25 32 36;25 32 36;-25 32 36" dur="7s" repeatCount="indefinite"/></linearGradient>
+              <clipPath id="hl-drop"><path d="M32 2C32 2 10 25 10 40a22 22 0 0 0 44 0C54 25 32 2 32 2Z"/></clipPath></defs>
+            <g class="hl-drop"><path d="M32 2C32 2 10 25 10 40a22 22 0 0 0 44 0C54 25 32 2 32 2Z" fill="url(#hl-dye)"/>
+              <ellipse cx="24" cy="27" rx="4" ry="7" transform="rotate(28 24 27)" fill="#fff" opacity=".22"/></g>
+            <g class="hl-tape"><rect class="t1" x="0" y="41" width="12" height="9" rx="2" fill="#c8648f"/><rect class="t2" x="13" y="41" width="9" height="9" fill="#7d6aa6"/>
+              <rect class="t3" x="22" y="41" width="42" height="9" rx="2" fill="#2f7f8f"/>
+              <path d="M0 43.5h64M0 47.5h64" stroke="#fff" stroke-opacity=".22" stroke-width=".8"/></g>
+          </svg>
+          <b>Show Rangrez a colour.</b>It picks a recipe, a strip is dyed, a phone photographs it, and it corrects the recipe until the cloth matches.
+          <div class="row" style="margin-top:16px;justify-content:center"><button class="dye" onclick="$('sampleBtn').click()">Match a kurta</button><button onclick="$('replayBtn').click()">Watch a live run</button></div></div>
+        <img id="frame" hidden alt="The latest dip photo with SAM 3.1's masks">
+        <div class="dyeing" id="dyeing" hidden aria-live="polite">
+          <svg viewBox="0 0 220 220" aria-hidden="true">
+            <g id="drops"></g>
+            <!-- the cotton strip, dipped into the bath and lifted out dyed -->
+            <g class="strip"><rect x="98" y="62" width="24" height="100" rx="2" fill="#fbf8f1" stroke="#d8ccb8"/>
+              <rect class="dyed" id="stripDye" x="98" y="122" width="24" height="40" rx="2" fill="#fbf8f1"/></g>
+            <!-- the glass -->
+            <path d="M58 110 L66 196 Q68 206 78 206 L142 206 Q152 206 154 196 L162 110" fill="#ffffff" fill-opacity=".55" stroke="#c9bba5" stroke-width="2.5"/>
+            <path class="liquid" id="liquid" d="M61 128 L66 196 Q68 204 78 204 L142 204 Q152 204 154 196 L159 128 Z" fill="#eaf3f5" fill-opacity=".9"/>
+            <ellipse cx="110" cy="128" rx="49" ry="6" fill="#ffffff" fill-opacity=".35"/>
+          </svg>
+          <div class="label" id="dyeingLabel">Dyeing…</div>
+        </div>
+      </div>
+      <div class="caption" id="frameCaption"></div>
+    </section>
+
+    <section class="outcome" id="outcome" hidden>
+      <h3 id="outcomeTitle">Matched</h3>
+      <p class="hint" id="outcomeText"></p>
+      <div class="row" style="margin-top:10px; flex-wrap: wrap">
+        <a id="reportLink" href="/api/report.html" target="_blank" rel="noopener"><button class="primary" style="width:100%">Open the lab-dip report</button></a>
+        <button id="previewBtn" hidden>See the garment in this shade (Muse Image)</button>
+        <button id="replyBtn" hidden>Draft the reply to the buyer (Muse Spark)</button>
       </div>
-      <p class="hint"><a id="reportLink" href="/api/report.html" target="_blank" rel="noopener" hidden>Lab-dip report for the buyer ↗</a></p>
-      <button class="ghost" id="previewBtn" hidden>Preview the customer's garment in this shade (Muse Image)</button>
       <p class="hint" id="previewNote"></p>
       <img id="previewImg" hidden alt="The customer's garment recoloured to the dip's shade">
-    </section>
-    <section>
-      <h2>Camera — SAM 3.1 masks: card (yellow), strip (cyan)</h2>
-      <img id="frame" hidden alt="Latest camera frame from the rig with segmentation boxes">
+      <textarea id="replyText" rows="5" hidden aria-label="Reply to the buyer" style="margin-top:8px"></textarea>
+      <p class="hint" id="replyNote"></p>
     </section>
   </div>
 
-  <div class="stack">
-    <section>
-      <h2>Convergence</h2>
-      <svg id="chart" viewBox="0 0 340 170" role="img" aria-label="Colour difference per dip"></svg>
+  <div class="col col-right">
+    <section id="gaugeCard">
+      <h2>Latest dip against the target</h2>
+      <div class="gauge-box">
+        <div class="gauge" id="gauge">
+          <svg viewBox="0 0 120 120"><circle cx="60" cy="60" r="52" fill="none" stroke="#efe6d8" stroke-width="10"/>
+            <circle id="gaugeArc" cx="60" cy="60" r="52" fill="none" stroke="var(--dye)" stroke-width="10" stroke-linecap="round" stroke-dasharray="326.7" stroke-dashoffset="326.7" style="transition: stroke-dashoffset .9s, stroke .4s"/></svg>
+          <div class="val"><b id="de">—</b><small id="deNote">ΔE00 (CIEDE2000)</small></div>
+        </div>
+        <div class="verdict" id="verdict">Below the tolerance is a match.</div>
+        <div class="split"><div id="targetChip"><span id="targetLabel">target</span></div><div id="dipChip"><span id="dipLabel">no dip yet</span></div></div>
+      </div>
     </section>
-    <section>
-      <h2>Dips</h2>
-      <table><thead><tr><th>#</th><th>recipe (<span id="dyeHead">dyes</span>)</th><th>ΔE00</th></tr></thead><tbody id="shots"></tbody></table>
+
+    <section id="learningCard">
+      <h2>The lab learning this dye lot</h2>
+      <svg class="chart" id="learning" viewBox="0 0 340 150" role="img" aria-label="Dips per campaign and first-dip error, campaign by campaign"></svg>
+      <p class="hint" id="learningNote">Each campaign starts from everything the lab remembers about this dye lot.</p>
     </section>
-    <section>
-      <h2>Lab notebook</h2>
-      <div class="feed" id="notebook"><div class="muted">The agent writes here.</div></div>
+
+    <section id="logCard">
+      <details class="log" id="logDetails">
+        <summary>Lab log: Wonder's notebook, dips, Meta API calls</summary>
+        <h2>Notebook</h2>
+        <div class="feed" id="notebook"><div class="muted">Muse Wonder writes its reasoning here.</div></div>
+        <h2 style="margin-top:14px">Dips</h2>
+        <table><thead><tr><th>#</th><th>recipe (<span id="dyeHead">dyes</span>)</th><th>ΔE00</th></tr></thead><tbody id="shots"></tbody></table>
+        <h2 style="margin-top:14px">Meta API calls</h2>
+        <div class="feed api" id="api"><div class="muted">No calls yet.</div></div>
+      </details>
     </section>
   </div>
 </main>
+</div>
+
+<div id="caseView" class="case" hidden>
+  <figure class="case-hero"><img src="/static/dyehouse.jpg" alt="" loading="lazy">
+    <figcaption>The world Rangrez is for: a small cotton dye house. An illustration made with Muse Image, not a photo.</figcaption></figure>
+  <h2 class="big">A dye house's lab dip, in minutes instead of days, from a phone.</h2>
+  <p>Before a garment order is dyed, the dye house dyes a small swatch, a <b>lab dip</b>, and sends it to the buyer for approval. A rejected dip means correct, re-dye, re-send: usually 2 to 4 rounds of several days each. Large mills shorten this with spectrophotometers and colour-matching software. The thousands of small dye houses and job workers in India's textile towns mostly rely on a colourist's eye and repeated trials.</p>
+  <p>Rangrez runs the colourist's loop itself: pick a recipe, dye a strip, photograph it, measure it, correct it, until the cloth matches. Six Meta models each do one job in that loop.</p>
+
+  <h3>Six Meta models, six real jobs</h3>
+  <div class="cards">
+    <div class="card"><b>SAM 3.1</b><div class="label">A measuring instrument: segments the colour card, the white paper and the dyed strip in every photo, so pixels become calibrated CIELAB.</div></div>
+    <div class="card"><b>Muse Wonder</b><div class="label">The colourist: runs each campaign through tools (suggest, dip, refit, escalate) and writes the lab notebook. It never drives a pump directly.</div></div>
+    <div class="card"><b>Muse Glimmer 30B</b><div class="label">Open weights, fine-tuned on the lab's own dips to propose the first recipe; v2 reads the lab's notebook. Weights published.</div></div>
+    <div class="card"><b>Muse Spark</b><div class="label">Reads the buyer's chat message (English or Hindi) into an order, sets the pass tolerance, and drafts the reply in the buyer's language.</div></div>
+    <div class="card"><b>Muse Image</b><div class="label">Shows the customer's garment in the approved shade; SAM measures and corrects it, because an image model is not a colour instrument.</div></div>
+    <div class="card"><b>Muse Voice Transcribe</b><div class="label">Hands-free for a dyer with wet gloves: "done", "repeat", "stop", or "हो गया", "फिर से", "बंद करो".</div></div>
+  </div>
+
+  <h3>What it has shown so far</h3>
+  <p class="hint">All on the simulator: hidden dye chemistry and real-looking phone photos with known true colours. No real dye on real cloth yet.</p>
+  <div class="cards">
+    <div class="card"><div class="num">0.66</div><div class="label">median ΔE00 measuring a strip from a phone photo with the printed colour card (live SAM 3.1, 22 photos); 1.17 with white paper only</div></div>
+    <div class="card"><div class="num">24 / 24</div><div class="label">shades matched in a median of 2 dips on the robot rig's reactive dyes, every dip photographed in a different room</div></div>
+    <div class="card"><div class="num">3.81 → 1.40</div><div class="label">the first dip's error over a 40-campaign night shift, as lab memory learns the dye lot; dips per match 2.35 → 1.65</div></div>
+    <div class="card"><div class="num">4.10 → 0.92</div><div class="label">first-dip error, supplier's model vs fine-tuned Glimmer; a Gaussian process on the same dips reaches 0.77, and we say so</div></div>
+    <div class="card"><div class="num">8 / 8 vs 5 / 8</div><div class="label">live campaigns matched by Muse Wonder vs a fixed policy with the same tools and safety rules: when a correction overshot, Wonder changed method and recovered</div></div>
+    <div class="card"><div class="num">124</div><div class="label">offline tests: colour science, safety gate, firmware emulator, voice, reports, every photo realistic</div></div>
+  </div>
+
+  <h3>What only Rangrez does</h3>
+  <table class="compare">
+    <thead><tr><th></th><th>Colourist by eye</th><th>Spectrophotometer + matching software</th><th>A general AI chat</th><th>Rangrez</th></tr></thead>
+    <tbody>
+      <tr><td>Equipment</td><td class="yes">none</td><td class="part">an instrument and software licence, quote-based</td><td class="yes">none</td><td class="yes">a phone and a printed card; a $100 rig to automate</td></tr>
+      <tr><td>Measures the dyed cloth</td><td class="no">by eye</td><td class="yes">precisely</td><td class="no">no</td><td class="part">from a phone photo, ±0.7 ΔE00 with the card</td></tr>
+      <tr><td>Proposes and corrects the recipe</td><td class="part">by experience</td><td class="yes">yes</td><td class="no">guesses</td><td class="yes">yes, from a model refitted to real dips</td></tr>
+      <tr><td>Runs the loop itself (recipe, dip, measure, correct)</td><td class="no">no</td><td class="no">no</td><td class="no">no</td><td class="yes">yes, with a safety gate and a human escalation</td></tr>
+      <tr><td>Learns this dye lot across campaigns</td><td class="part">in one head</td><td class="part">some correction features</td><td class="no">no</td><td class="yes">lab memory, plus a fine-tuned open model</td></tr>
+      <tr><td>Reads the buyer's WhatsApp order, replies in their language</td><td class="no">no</td><td class="no">no</td><td class="part">if asked</td><td class="yes">Muse Spark, English or Hindi</td></tr>
+      <tr><td>Hands-free in Hindi</td><td class="yes">it's a person</td><td class="no">no</td><td class="no">no</td><td class="yes">Muse Voice Transcribe</td></tr>
+      <tr><td>Buyer-ready lab-dip report</td><td class="no">no</td><td class="yes">yes</td><td class="no">no</td><td class="yes">ΔE00 and CMC 2:1, options A/B/C, recipe in % owf, production plan</td></tr>
+      <tr><td>A home recipe for anyone's outfit</td><td class="no">no</td><td class="no">no</td><td class="no">no</td><td class="yes">photograph it, get drops of household colour</td></tr>
+    </tbody>
+  </table>
+
+  <h3>Where it stands, honestly</h3>
+  <ul class="limits">
+    <li><b>Simulated, not yet dyed for real.</b> The physics, photos and chemistry are simulated. The first real campaign, household colours on a cotton strip with a phone, is the next step.</li>
+    <li><b>The robot rig is designed, not built.</b> Firmware, wiring and a virtual ESP32 that runs the real driver are done; the parts are about ₹8,000.</li>
+    <li><b>A camera is a pre-screen, not a certificate.</b> ±0.7 ΔE00 with the card is good enough to correct fast, not to certify a strict 1.0 pass; it cannot check metamerism. Final approval stays with the buyer's instrument or light booth.</li>
+    <li><b>A lab dip must follow the bulk process.</b> Fixing, rinsing and soaping are in the protocol; transferring a recipe to bulk still needs the dye house's own lab-to-bulk factor.</li>
+    <li><b>Household colours are for learning and play.</b> Food colours and inks are not wash-fast; dye houses use reactive dyes.</li>
+    <li><b>Glimmer is not magic.</b> On the same data a Gaussian process matches it; Glimmer earns its place by reading the lab's notebook and working with language.</li>
+  </ul>
+
+  <h3>Why it can work</h3>
+  <div class="cards">
+    <div class="card"><b>Technically</b><div class="label">Runs on a laptop and a phone; the measuring, chemistry and safety are plain tested code, and the Meta models do what they are best at. Every campaign is recorded and replayable.</div></div>
+    <div class="card"><b>For the business</b><div class="label">Each avoided round saves days of a buyer's lead time and a courier; the report is the document the buyer already asks for. Per-dip or monthly pricing for small dye houses and sourcing agents.</div></div>
+    <div class="card"><b>For the people using it</b><div class="label">Phone first, Hindi, hands-free, WhatsApp-shaped. No new instrument to learn: photograph, dip, send.</div></div>
+    <div class="card"><b>The adoption path</b><div class="label">1) assisted mode with a phone, zero capex; 2) the $100 rig for unattended dips; 3) a handheld spectrophotometer in place of the camera for strict shades, same agent and memory.</div></div>
+  </div>
+
+  <h3>What it could become</h3>
+  <ul class="limits">
+    <li>Real-dye pilots with job-work dye houses in Tiruppur and Erode.</li>
+    <li>Spectral camera calibration, and profiles for polyester (disperse dyes) and wool.</li>
+    <li>Glimmer reading the dip photo itself, not just numbers.</li>
+    <li>Lab memory shared across dye houses that use the same dye lots, without sharing their recipes.</li>
+  </ul>
+  <p style="margin-top:28px"><button class="primary" id="caseToLab">Back to the lab</button> <a href="https://github.com/TusharTechs/rangrez" target="_blank" rel="noopener">Code, hardware and evaluation on GitHub</a></p>
+</div>
+
+<div id="tour" hidden><div class="tour-spot" id="tourSpot"></div><div class="tour-card" id="tourCard" role="dialog" aria-live="polite">
+  <div class="steps" id="tourStep"></div><h3 id="tourTitle"></h3><p id="tourText"></p>
+  <div class="row"><button class="small" id="tourSkip">Skip</button><span class="spacer"></span><button class="small" id="tourBack">Back</button><button class="primary small" id="tourNext">Next</button></div>
+</div></div>
 
 <script>
 const $ = (id) => document.getElementById(id);
-let tolerance = 1.5, shots = [];
-
-function labToHex([L, a, b]) {
-  const fy = (L + 16) / 116, fx = fy + a / 500, fz = fy - b / 200, d = 6 / 29;
-  const f = (t) => (t > d ? t ** 3 : 3 * d * d * (t - 4 / 29));
-  const X = 0.95047 * f(fx), Y = f(fy), Z = 1.08883 * f(fz);
-  let r = 3.2404542 * X - 1.5371385 * Y - 0.4985314 * Z;
-  let g = -0.969266 * X + 1.8760108 * Y + 0.041556 * Z;
-  let bl = 0.0556434 * X - 0.2040259 * Y + 1.0572252 * Z;
-  const gam = (c) => Math.round(255 * Math.min(1, Math.max(0, c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055)));
-  return "#" + [r, g, bl].map(gam).map((v) => v.toString(16).padStart(2, "0")).join("");
+const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+let tolerance = 1.5, shots = [], config = {}, samples = null;
+let handsFree = false, replaying = false, mic = null, targetFromPhoto = false, orderRead = false, liveRun = false;
+
+// ---- Meta model chips ------------------------------------------------------------------
+const MODELS = [
+  ["sam", "SAM 3.1", "measures every photo"], ["wonder", "Muse Wonder", "runs the campaign"],
+  ["glimmer", "Muse Glimmer", "first-dip recipe (open weights)"], ["spark", "Muse Spark", "reads orders, drafts replies"],
+  ["image", "Muse Image", "garment preview"], ["voice", "Muse Voice", "hands-free, English and Hindi"],
+];
+const calls = {};
+$("models").innerHTML = MODELS.map(([k, n, job]) => `<span class="model" id="m-${k}" title="${esc(job)}"><i></i><b>${n}</b><span class="job">${esc(job)}</span><span class="n" id="n-${k}"></span></span>`).join("");
+function modelKey(model) {
+  const m = model.toLowerCase();
+  return m.startsWith("sam") ? "sam" : m.includes("wonder") ? "wonder" : m.includes("glimmer") ? "glimmer" : m.includes("spark") ? "spark" : m.includes("image") ? "image" : m.includes("voice") ? "voice" : null;
+}
+function flash(model) {
+  const k = modelKey(model); if (!k) return;
+  calls[k] = (calls[k] || 0) + 1; $("n-" + k).textContent = `× ${calls[k]}`;
+  const el = $("m-" + k); el.classList.add("live"); clearTimeout(el._t); el._t = setTimeout(() => el.classList.remove("live"), 1400);
+}
+
+// ---- the dyeing animation: drops of each dye fall in, the bath tints, a cotton strip dips ------
+const DYE_HEX = { turquoise: "#13a1b6", fuchsia: "#d23a86", "lemon yellow": "#f4c21c", blue: "#2f5fbf", red: "#d0353d", yellow: "#f2c21b" };
+const DYE_ABS = { turquoise: [1.0, 0.18, 0.08], fuchsia: [0.08, 0.95, 0.35], "lemon yellow": [0.02, 0.06, 0.9], blue: [0.9, 0.45, 0.06], red: [0.05, 0.85, 0.75], yellow: [0.02, 0.08, 0.85] };
+function bathColour(amounts) {  // a rough Beer-Lambert mix, for the eye only
+  const t = [1, 1, 1], scale = config.unit === "drops" ? 0.06 : 0.25;
+  for (const [d, c] of amounts) (DYE_ABS[d] || [0, 0, 0]).forEach((k, i) => { t[i] *= Math.exp(-k * c * scale); });
+  return "#" + t.map((v) => Math.round(255 * Math.max(0.04, v)).toString(16).padStart(2, "0")).join("");
+}
+function showDyeing(e) {
+  const dyes = (config.dyes || []).map((d) => [d, parseFloat((e.recipe.match(new RegExp(d + "\\s+([\\d.]+)")) || [])[1] || 0)]).filter(([, c]) => c > 0.01);
+  const colour = bathColour(dyes);
+  const xs = [76, 144, 88];  // either side of the strip
+  $("drops").innerHTML = dyes.map(([d], i) => { const delay = `animation-delay:${(i * 0.37).toFixed(2)}s`;
+    return `<g transform="translate(${xs[i % 3]} 0)"><path class="drop" style="${delay}" d="M0 40 C-6 50 -6 56 0 58 C6 56 6 50 0 40 Z" fill="${DYE_HEX[d] || "#888"}"/>`
+      + `<ellipse class="ripple" style="${delay}" cx="0" cy="128" rx="12" ry="3" fill="none" stroke="#fff" stroke-width="1.6"/></g>`; }).join("");
+  $("liquid").setAttribute("fill", "#eaf3f5");
+  $("stripDye").setAttribute("fill", "#fbf8f1");
+  requestAnimationFrame(() => setTimeout(() => { $("liquid").setAttribute("fill", colour); $("stripDye").setAttribute("fill", colour); }, 60));
+  $("dyeingLabel").innerHTML = `Dyeing dip ${e.index}<small>${esc(e.recipe)}</small>`;
+  $("dyeing").hidden = false; $("cameraEmpty").hidden = true; dyeingSince = performance.now();
+}
+let dyeingSince = 0;
+function afterDyeing(fn) {  // a sped-up replay still lets the strip finish its dip before the photo
+  const wait = replaying ? 0 : Math.max(0, 2800 - (performance.now() - dyeingSince));
+  wait ? setTimeout(fn, wait) : fn();
+}
+
+// ---- gauge counts down to each new reading; a match bursts into dye drops -------------------
+let shownDe = NaN;
+let tweenId = 0;
+function tweenGauge(to) {
+  const id = ++tweenId, from = isFinite(shownDe) ? shownDe : Math.max(to, 12), start = performance.now(), dur = 900;
+  const step = (now) => {
+    if (id !== tweenId) return;
+    const k = Math.min(1, (now - start) / dur), v = from + (to - from) * (1 - Math.pow(1 - k, 3));
+    $("de").textContent = v.toFixed(2);
+    if (k < 1) requestAnimationFrame(step);
+  };
+  shownDe = to;
+  requestAnimationFrame(step);
+}
+function burst() {
+  const box = $("gauge"), colours = ["#13a1b6", "#d23a86", "#f4c21c", getComputedStyle(document.documentElement).getPropertyValue("--dye")];
+  for (let i = 0; i < 36; i++) {
+    const p = document.createElement("span"), a = (i / 36) * Math.PI * 2, r = 110 + Math.random() * 110;
+    p.className = "burst"; p.style.background = colours[i % colours.length];
+    p.style.setProperty("--dx", `${Math.cos(a) * r}px`); p.style.setProperty("--dy", `${Math.sin(a) * r}px`); p.style.setProperty("--r", `${Math.random() * 360}deg`);
+    box.appendChild(p); setTimeout(() => p.remove(), 1400);
+  }
+}
+
+// ---- colour theme: the target colour dyes the page --------------------------------------
+function setDye(hex) {
+  const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+  const lum = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+  // Keep text readable: very light shades are darkened for accents.
+  const k = lum > 0.62 ? 0.62 / lum : 1;
+  document.documentElement.style.setProperty("--dye", `rgb(${Math.round(r * k)}, ${Math.round(g * k)}, ${Math.round(b * k)})`);
+  $("targetChip").style.background = hex;
+}
+
+// ---- the tape -----------------------------------------------------------------------------
+let targetHex = null;
+function drawTape(fresh) {  // fresh: the dip just measured, which soaks in
+  const segs = shots.map((s) => `<div class="seg ${s.delta_e <= tolerance ? "pass" : ""} ${s.index === fresh && !replaying ? "new" : ""}" style="--c:${s.hex}"><div class="cloth"></div><small><span>dip ${s.index}</span><b>${isFinite(s.delta_e) ? s.delta_e.toFixed(2) : "—"}</b></small></div>`);
+  if (!shots.length) segs.push(`<div class="seg empty"><div class="cloth"></div><small><span>Undyed cotton: each dip becomes a segment of this tape, measured and corrected until it matches the target</span></small></div>`);
+  const target = targetHex ? `<span class="arrow">→</span><div class="seg target" style="--c:${targetHex}"><div class="cloth"></div><small><span>target</span><span>${targetHex}</span></small></div>` : "";
+  $("tape").innerHTML = segs.join("") + target;
+  $("tape").scrollLeft = 1e6;
+}
+
+// ---- gauge ----------------------------------------------------------------------------------
+function setGauge(de) {
+  const full = 326.7, frac = isFinite(de) ? Math.min(de, 12) / 12 : 0;
+  $("gaugeArc").style.strokeDashoffset = String(full * frac);
+  $("gaugeArc").style.stroke = isFinite(de) && de <= tolerance ? "var(--ok)" : "var(--dye)";
+  if (!isFinite(de)) { $("de").textContent = "—"; shownDe = NaN; }
+  else if (replaying) { $("de").textContent = de.toFixed(2); shownDe = de; }
+  else if (de !== shownDe) tweenGauge(de);
+  $("gauge").classList.toggle("pass", isFinite(de) && de <= tolerance);
+  $("verdict").textContent = !isFinite(de) ? "Below the tolerance is a match." : de <= tolerance ? `Within the tolerance of ${tolerance.toFixed(1)}: a match.` : `Tolerance ${tolerance.toFixed(1)}: ${(de - tolerance).toFixed(2)} to go.`;
 }
 
 fetch("/api/config").then((r) => r.json()).then((c) => {
+  config = c;
   $("agent").textContent = "agent: " + c.agent;
-  $("rig").textContent = "rig: " + ({ sim: "simulator", serial: "hardware", assisted: "assisted (your hands)" }[c.rig] || c.rig);
+  $("rig").textContent = "rig: " + ({ sim: "simulator", serial: "robot rig", assisted: "assisted (your hands)" }[c.rig] || c.rig);
   $("dyeHead").textContent = c.dyes.join(" · ") + " " + c.unit;
   $("liveBox").hidden = !c.passcode;
-  if (c.public_reads_left > 0) $("photoNote").textContent = "Try it: photograph any outfit and get its colour, plus a recipe to dye it at home.";
+  if (c.public_reads_left > 0) $("photoNote").textContent = "Try it: photograph any outfit (under Your own photo) and get its colour, plus a recipe to dye it at home.";
 });
+fetch("/api/samples").then((r) => r.json()).then((s) => { samples = s; if (s.order) $("orderMsg").placeholder = s.order; if (!s.runs.length) $("replayBtn").hidden = true; }).catch(() => {});
+
+// Preset shades a dye house is often asked for.
+const PRESETS = [["#3d7a89", "teal"], ["#b5546f", "rose"], ["#c9a227", "mustard"], ["#4a4f8c", "indigo"], ["#6d7a3c", "olive"]];
+$("presets").innerHTML = PRESETS.map(([h, n]) => `<button style="background:${h}" title="${n}" aria-label="${n}" data-hex="${h}"></button>`).join("");
+$("presets").onclick = (ev) => {
+  const h = ev.target.dataset && ev.target.dataset.hex; if (!h) return;
+  $("picker").value = h; setDye(h); targetHex = h; drawTape(); targetFromPhoto = false;
+  [...$("presets").children].forEach((b) => b.setAttribute("aria-pressed", b.dataset.hex === h));
+};
 
 function setStatus(s) {
-  const el = $("status");
-  el.textContent = s;
-  el.className = "pill " + s;
+  const el = $("status"); el.textContent = s.replace(/_/g, " "); el.className = "pill " + s;
   $("start").disabled = s === "running" || s === "waiting";
 }
-
 function feed(id, html) {
   const box = $(id);
   if (box.firstElementChild && box.firstElementChild.classList.contains("muted") && box.children.length === 1) box.innerHTML = "";
-  const div = document.createElement("div");
-  div.innerHTML = html;
-  box.prepend(div);
+  const div = document.createElement("div"); div.innerHTML = html; box.prepend(div);
 }
-const esc = (s) => String(s).replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" })[c]);
+
+async function drawLearning() {
+  const m = await fetch("/api/memory").then((r) => r.json()).catch(() => null);
+  if (!m) return;
+  const cs = m.campaigns, svg = $("learning"), w = 340, h = 150, pad = 26;
+  if (!cs.length) { svg.innerHTML = `<text x="${w / 2}" y="${h / 2}" fill="#7a7166" font-size="11" text-anchor="middle">No campaigns remembered yet: run one</text>`; return; }
+  const n = Math.max(cs.length, 2), bw = (w - pad - 8) / n, maxD = Math.max(4, ...cs.map((c) => c.dips)), maxE = 12;
+  let g = "";
+  cs.forEach((c, i) => {
+    const bh = (c.dips / maxD) * (h - pad - 14);
+    g += `<rect x="${pad + i * bw + 1}" y="${h - pad - bh}" width="${Math.max(2, bw - 2)}" height="${bh}" rx="2" fill="${c.status === "matched" ? "#2d7a52" : "#b9ae9e"}" opacity="0.45"/>`;
+  });
+  const pts = cs.map((c, i) => c.first_de00 == null ? null : [pad + i * bw + bw / 2, h - pad - (Math.min(c.first_de00, maxE) / maxE) * (h - pad - 14)]).filter(Boolean);
+  if (pts.length > 1) g += `<polyline fill="none" stroke="var(--dye)" stroke-width="2.5" points="${pts.map((p) => p.join(",")).join(" ")}"/>`;
+  g += `<text x="${pad}" y="12" fill="#2d7a52" font-size="10">bars: dips to finish</text><text x="${w - 8}" y="12" fill="var(--dye)" font-size="10" text-anchor="end">line: first dip's ΔE00</text>`;
+  g += `<text x="${w / 2}" y="${h - 8}" fill="#7a7166" font-size="10" text-anchor="middle">campaign ${cs.length > 1 ? "1 → " + cs.length : "1"}</text>`;
+  svg.innerHTML = g;
+  $("learningNote").textContent = `${m.dips} dips remembered from ${cs.length} campaigns with this dye lot.`;
+}
+drawLearning();
 
 function drawChart() {
-  const svg = $("chart"), w = 340, h = 170, pad = 28;
+  const svg = $("chart"), w = 340, h = 160, pad = 28;
   const max = Math.max(8, ...shots.map((s) => s.delta_e || 0));
   const x = (i) => pad + (i / Math.max(1, Math.max(5, shots.length) - 1)) * (w - pad - 10);
   const y = (v) => h - pad + 4 - (Math.min(v, max) / max) * (h - pad - 14);
-  let g = `<line x1="${pad}" y1="${y(tolerance)}" x2="${w - 10}" y2="${y(tolerance)}" stroke="#3fb97f" stroke-dasharray="4 4"/>`;
-  g += `<text x="${w - 12}" y="${y(tolerance) - 5}" fill="#3fb97f" font-size="10" text-anchor="end">pass ${tolerance}</text>`;
-  g += `<text x="${pad - 6}" y="${y(max) + 4}" fill="#9a968f" font-size="10" text-anchor="end">${max.toFixed(0)}</text>`;
-  g += `<text x="${pad - 6}" y="${y(0) + 4}" fill="#9a968f" font-size="10" text-anchor="end">0</text>`;
+  let g = `<line x1="${pad}" y1="${y(tolerance)}" x2="${w - 10}" y2="${y(tolerance)}" stroke="#2d7a52" stroke-dasharray="4 4"/>`;
+  g += `<text x="${w - 12}" y="${y(tolerance) - 5}" fill="#2d7a52" font-size="10" text-anchor="end">pass ${tolerance}</text>`;
+  g += `<text x="${pad - 6}" y="${y(max) + 4}" fill="#7a7166" font-size="10" text-anchor="end">${max.toFixed(0)}</text><text x="${pad - 6}" y="${y(0) + 4}" fill="#7a7166" font-size="10" text-anchor="end">0</text>`;
   const pts = shots.map((s, i) => [x(i), y(s.delta_e)]);
-  if (pts.length > 1) g += `<polyline fill="none" stroke="#e8a33d" stroke-width="2" points="${pts.map((p) => p.join(",")).join(" ")}"/>`;
+  if (pts.length > 1) g += `<polyline fill="none" stroke="var(--dye)" stroke-width="2.5" points="${pts.map((p) => p.join(",")).join(" ")}"/>`;
   shots.forEach((s, i) => {
-    g += `<circle cx="${pts[i][0]}" cy="${pts[i][1]}" r="5" fill="${s.hex}" stroke="#eceae6" stroke-width="1.5"/>`;
-    g += `<text x="${pts[i][0]}" y="${h - 8}" fill="#9a968f" font-size="10" text-anchor="middle">${i + 1}</text>`;
+    g += `<circle cx="${pts[i][0]}" cy="${pts[i][1]}" r="6" fill="${s.hex}" stroke="#fffcf6" stroke-width="2"/>`;
+    g += `<text x="${pts[i][0]}" y="${h - 8}" fill="#7a7166" font-size="10" text-anchor="middle">${i + 1}</text>`;
   });
+  if (!shots.length) g += `<text x="${w / 2}" y="${h / 2}" fill="#7a7166" font-size="11" text-anchor="middle">The error falls with each dip</text>`;
   svg.innerHTML = g;
 }
 
+function resetView() {
+  shots = []; liveRun = false;
+  for (const id of ["shots", "notebook", "api"]) $(id).innerHTML = "";
+  for (const id of ["outcome", "assist", "frame", "replyText", "previewImg", "previewBtn", "replyBtn", "replayBanner", "dyeing"]) $(id).hidden = true;
+  shownDe = NaN;
+  $("cameraEmpty").hidden = false; $("frameCaption").textContent = ""; $("previewNote").textContent = ""; $("replyNote").textContent = "";
+  Object.keys(calls).forEach((k) => { calls[k] = 0; $("n-" + k).textContent = ""; });
+  drawChart(); drawTape(); setGauge(NaN);
+}
+
 const es = new EventSource("/api/events");
 es.onmessage = (msg) => {
   const e = JSON.parse(msg.data);
   if (e.kind === "replayed") { replaying = false; return; }
-  if (e.kind === "reset") {  // the server replays this campaign from the start
-    replaying = true;
-    shots = [];
-    for (const id of ["shots", "notebook", "api"]) $(id).innerHTML = "";
-    $("reportLink").hidden = true; $("previewBtn").hidden = true; $("previewImg").hidden = true; $("previewNote").textContent = "";
-    $("assist").hidden = true; $("frame").hidden = true; drawChart(); setStatus("idle");
-  } else if (e.kind === "start") {
+  if (e.kind === "reset") { replaying = true; resetView(); setStatus("idle"); return; }
+  if (e.kind === "start") {
+    resetView(); liveRun = !e.replay;
     $("agent").textContent = "agent: " + e.agent;
     $("memory").textContent = `lab memory: ${e.memory_dips || 0} dips · ${e.memory_campaigns || 0} campaigns`;
-    shots = []; tolerance = e.tolerance;
-    $("shots").innerHTML = ""; $("notebook").innerHTML = ""; drawChart();
-    $("targetChip").style.background = e.target_hex;
-    $("targetLabel").textContent = `target ${e.target_hex} · L*a*b* ${e.target_lab.map((v) => v.toFixed(1)).join(", ")}`;
-    $("dipChip").style.background = "transparent"; $("dipLabel").textContent = "no dip yet";
-    $("de").textContent = "—"; $("deBox").classList.remove("pass");
-    setStatus("running");
+    tolerance = e.tolerance; targetHex = e.target_hex; setDye(e.target_hex);
+    $("targetLabel").textContent = `target ${e.target_hex}`; $("dipChip").style.background = "transparent"; $("dipLabel").textContent = "no dip yet";
+    if (e.replay) { $("replayBanner").hidden = false; $("replayBanner").textContent = `Replaying a recorded live run${e.recorded ? " from " + e.recorded : ""}: every Meta API call shown here happened for real (sped up).`; }
+    drawTape(); drawChart(); setGauge(NaN); setStatus("running");
   } else if (e.kind === "assist") {
-    if (handsFree && !replaying) say(`Dip ${e.index}. ` + Object.entries(e.amounts).filter(([, v]) => +v > 0).map(([d, v]) => `${v} ${e.unit} of ${d}`).join(", ") + `. Dip for ${e.dip_seconds} seconds. Say done when the strip is dry and on the paper.`);
-    $("assist").hidden = false;
-    $("assistTitle").textContent = `Your turn: dip ${e.index}`;
+    if (handsFree && !replaying) say(instructions(e));
+    $("assist").hidden = false; $("assistTitle").textContent = `Your turn: dip ${e.index}`;
     $("amounts").innerHTML = Object.entries(e.amounts).map(([d, v]) => `<div class="amount"><b>${v}</b><small>${e.unit} ${esc(d)}</small></div>`).join("");
     $("assistSteps").innerHTML = e.steps.map((s) => `<li>${esc(s)}</li>`).join("");
-    $("assistNote").textContent = "";
-    $("assistPhoto").value = "";
-    setStatus("waiting");
+    $("assistNote").textContent = ""; $("assistPhoto").value = ""; setStatus("waiting");
   } else if (e.kind === "shot") {
     $("assist").hidden = true;
     if ($("status").textContent === "waiting") setStatus("running");
-    shots.push(e); drawChart();
-    $("dipChip").style.background = e.hex;
-    $("dipLabel").textContent = `dip ${e.index} · ${e.hex}`;
-    $("de").textContent = isFinite(e.delta_e) ? e.delta_e.toFixed(2) : "—";
-    $("deBox").classList.toggle("pass", e.delta_e <= tolerance);
-    $("deNote").textContent = e.delta_e <= tolerance ? "CIEDE2000 · matched" : "CIEDE2000";
-    $("frame").src = `/api/shot/${e.index}.jpg?t=${Date.now()}`; $("frame").hidden = false;
-    const rec = e.recipe.match(/[\d.]+(?= (g\/L|%))/g) || [];
+    shots.push(e); drawChart(); drawTape(e.index); setGauge(e.delta_e);
+    $("dipChip").style.background = e.hex; $("dipLabel").textContent = `dip ${e.index} · ${e.hex}`;
+    const src = `/api/shot/${e.index}.jpg?t=${Date.now()}`;
+    afterDyeing(() => { $("frame").src = src; $("frame").hidden = false; $("cameraEmpty").hidden = true; $("dyeing").hidden = true; });
+    $("frameCaption").textContent = `Dip ${e.index}: measured ${e.hex}, ΔE00 ${isFinite(e.delta_e) ? e.delta_e.toFixed(2) : "rejected"}.` + (e.flags && e.flags.length ? " " + e.flags.map((f) => f.replace(/^(NOTE|WARN): /, "")).join(" · ") : "");
+    const rec = e.recipe.match(/[\d.]+(?= (g\/L|%|drops))/g) || [];
     $("shots").insertAdjacentHTML("beforeend", `<tr><td>${e.index}</td><td><span class="sw" style="background:${e.hex}"></span>${rec.join(" · ")}</td><td>${isFinite(e.delta_e) ? e.delta_e.toFixed(2) : "rejected"}</td></tr>`);
     if (e.flags && e.flags.length) feed("notebook", `<span class="gate">${esc(e.flags.join("; "))}</span>`);
   } else if (e.kind === "note") {
@@ -266,50 +675,112 @@ es.onmessage = (msg) => {
   } else if (e.kind === "tool") {
     feed("notebook", `<span class="tool">→ ${esc(e.name)}</span> <span class="muted">${esc(JSON.stringify(e.args)).slice(0, 160)}</span>`);
   } else if (e.kind === "gate") {
-    feed("notebook", `<span class="gate">gate refused: ${esc(e.refused)}</span> <span class="muted">${esc(e.recipe)}</span>`);
+    feed("notebook", `<span class="gate">safety gate refused: ${esc(e.refused)}</span> <span class="muted">${esc(e.recipe)}</span>`);
   } else if (e.kind === "dispense") {
     feed("notebook", `<span class="muted">dispensing dip ${e.index}: ${esc(e.recipe)}</span>`);
+    if (!replaying) showDyeing(e);
   } else if (e.kind === "model") {
     feed("notebook", `<span class="tool">model refit</span> <span class="muted">uptake ${esc(JSON.stringify(e.gains_after))}, fit error ${e.model_fit_error_de00}</span>`);
   } else if (e.kind === "status") {
     setStatus(e.status);
-    $("reportLink").hidden = ["running", "waiting"].includes(e.status) || !shots.length;
-    $("previewBtn").hidden = $("reportLink").hidden || !targetFromPhoto;
-    if (!["running", "waiting"].includes(e.status)) $("assist").hidden = true;
+    const done = !["running", "waiting"].includes(e.status);
+    if (done && !replaying) setTimeout(drawLearning, 500);
+    if (done) { $("assist").hidden = true; afterDyeing(() => { $("dyeing").hidden = true; }); showOutcome(e); if (e.status === "matched" && !replaying) setTimeout(burst, 500); }
     if (e.reason) feed("notebook", `<span class="gate">${esc(e.status)}: ${esc(e.reason)}</span>`);
   } else if (e.kind === "api") {
+    flash(e.model);
     feed("api", `<span><span class="m">${esc(e.model)}</span> ${esc(e.purpose)}</span><span class="${e.ok ? "" : "gate"}">${e.seconds}s</span>`);
   }
 };
 
-$("picker").addEventListener("input", (ev) => { $("targetChip").style.background = ev.target.value; });
-$("targetChip").style.background = $("picker").value;
+function showOutcome(e) {
+  if (!shots.length) return;
+  // A match is confirmed by a second photo; the status event carries the confirmed reading.
+  const confirmed = shots.find((s) => s.index === e.shot);
+  if (confirmed && isFinite(e.delta_e)) { confirmed.delta_e = e.delta_e; drawTape(); setGauge(e.delta_e); }
+  const best = shots.filter((s) => isFinite(s.delta_e)).sort((a, b) => a.delta_e - b.delta_e)[0];
+  const titles = { matched: "Matched on cotton", out_of_gamut: "Out of these dyes' reach", escalated: "Handed to a human", finished: "Budget spent", stopped: "Stopped" };
+  $("outcome").hidden = false;
+  $("outcome").style.borderColor = e.status === "matched" ? "var(--ok)" : "var(--warn)";
+  $("outcomeTitle").textContent = titles[e.status] || e.status;
+  $("outcomeTitle").style.color = e.status === "matched" ? "var(--ok)" : "var(--warn)";
+  $("outcomeText").textContent = best ? `Best: dip ${best.index}, ΔE00 ${best.delta_e.toFixed(2)} against a tolerance of ${tolerance.toFixed(1)}, after ${shots.length} dip${shots.length > 1 ? "s" : ""}. The report is ready for the buyer.` : "";
+  $("previewBtn").hidden = !(liveRun && targetFromPhoto);
+  $("replyBtn").hidden = !(liveRun && orderRead);
+  if (!liveRun) {  // a recorded run: show what else it produced
+    fetch("/api/preview.jpg").then((r) => { if (r.ok) { $("previewImg").src = "/api/preview.jpg"; $("previewImg").hidden = false; $("previewNote").textContent = "The customer's garment in the approved shade: Muse Image recoloured it, SAM 3.1 checked it."; } });
+    fetch("/api/replay-file/order.json").then((r) => r.ok ? r.json() : null).then((j) => {
+      if (!j) return;
+      const o = j.order;
+      $("orderNote").textContent = `Muse Spark read the buyer's message: ${o.quantity} ${o.quantity_unit} of ${o.garment}, ${o.fabric}, by ${o.deadline}; shade ${o.shade_strictness}, so pass at ΔE00 ≤ ${o.tolerance_de00}.`;
+      $("orderMsg").value = j.message;
+      $("outcomeText").textContent += ` The buyer's order: ${o.quantity} ${o.garment}s, shade ${o.shade_strictness}.`;
+    }).catch(() => {});
+    fetch("/api/replay-file/reply.txt").then((r) => r.ok ? r.text() : null).then((t) => {
+      if (!t) return;
+      $("replyText").value = t; $("replyText").hidden = false;
+      $("replyNote").textContent = "The reply Muse Spark drafted, in the buyer's own Hinglish. Rangrez never sends messages itself.";
+    }).catch(() => {});
+  }
+}
 
-$("usePhoto").onclick = async () => {
-  const file = $("photo").files[0];
-  if (!file) { $("photoNote").textContent = "Choose a photo first."; return; }
+$("picker").addEventListener("input", (ev) => { setDye(ev.target.value); targetHex = ev.target.value; drawTape(); targetFromPhoto = false; });
+
+function showHomeRecipe(h) {
+  if (!h) return;
+  const drops = Object.entries(h.drops).filter(([, n]) => n > 0).map(([d, n]) => `${n} drop${n === 1 ? "" : "s"} ${esc(d)}`).join(" · ");
+  $("homeRecipe").hidden = false;
+  $("homeRecipe").innerHTML = h.reachable
+    ? `<b>Dye it at home:</b> ${drops || "plain water"} in ${h.teaspoons} teaspoons of water. A first-dip estimate for household colours; brands vary, so dip a white cotton strip and let Rangrez correct it.`
+    : `<b>At home:</b> household blue, red and yellow can't quite reach this shade. Closest: ${drops} <span class="sw" style="background:${h.closest_hex}"></span>${h.closest_hex}.`;
+}
+function showRead(j, note) {
+  $("picker").value = j.hex; setDye(j.hex); targetHex = j.hex; drawTape(); targetFromPhoto = true;
+  showHomeRecipe(j.home_recipe);
+  $("photoNote").textContent = note || {
+    card: `SAM 3.1 read the ${j.concept || "garment"} as ${j.hex}, calibrated against the colour card.`,
+    paper: `SAM 3.1 read ${j.hex}, balanced against the white paper. Photograph every dip in the same spot and light.`,
+    none: `Read ${j.hex}, uncalibrated: put white paper or the colour card in the shot.`,
+  }[j.calibration];
+}
+function showPhoto(src, caption) {
+  $("frame").src = src; $("frame").hidden = false; $("cameraEmpty").hidden = true; $("frameCaption").textContent = caption;
+}
+
+async function readPhoto(blob, name) {
   const form = new FormData();
-  form.append("photo", file); form.append("concept", $("concept").value || "fabric"); form.append("passcode", $("passcode").value);
-  $("photoNote").textContent = "Segmenting…";
+  form.append("photo", blob, name); form.append("concept", $("concept").value || "fabric"); form.append("passcode", $("passcode").value);
+  $("photoNote").textContent = "SAM 3.1 is finding the garment and the colour card…";
   const r = await fetch("/api/target-from-photo", { method: "POST", body: form });
   const j = await r.json();
-  if (!r.ok) { $("photoNote").textContent = j.detail || "Could not read the photo."; return; }
-  $("picker").value = j.hex; $("targetChip").style.background = j.hex; targetFromPhoto = true;
-  const h = j.home_recipe;
-  if (h) {
-    const drops = Object.entries(h.drops).filter(([, n]) => n > 0).map(([d, n]) => `${n} drop${n === 1 ? "" : "s"} ${esc(d)}`).join(" · ");
-    $("homeRecipe").hidden = false;
-    $("homeRecipe").innerHTML = h.reachable
-      ? `<b>Dye it at home:</b> ${drops || "plain water"} in ${h.teaspoons} teaspoons of water. A first-dip estimate for household colours; brands vary, so dip a white cotton strip and let Rangrez correct it.`
-      : `<b>At home:</b> household blue, red and yellow can't quite reach this shade. Closest: ${drops} <span class="sw" style="background:${h.closest_hex}"></span>${h.closest_hex}.`;
+  if (!r.ok) return { error: j.detail || "Could not read the photo." };
+  showRead(j); return j;
+}
+$("usePhoto").onclick = async () => {
+  const file = $("photo").files[0];
+  if (!file) { $("photoNote").textContent = "Choose a photo first."; return; }
+  showPhoto(URL.createObjectURL(file), "The customer's photo.");
+  const j = await readPhoto(file, file.name);
+  if (j.error) $("photoNote").textContent = j.error;
+};
+// The sample: read it live if the Meta models are available, else show how live SAM read it earlier.
+$("sampleBtn").onclick = async () => {
+  if (!samples) return;
+  $("concept").value = samples.concept;
+  showPhoto(samples.photo, "A customer's kurta photographed on white paper with the printed colour card.");
+  const live = config.online || $("passcode").value;
+  if (live) {
+    const blob = await fetch(samples.photo).then((r) => r.blob());
+    const j = await readPhoto(blob, "kurta.jpg");
+    if (!j.error) return;
   }
-  $("photoNote").textContent = {
-    card: `Calibrated against the colour card: ${j.hex}`,
-    paper: `Balanced against the white paper: ${j.hex}. Photograph every dip in the same spot and light.`,
-    none: `Read ${j.hex} from the photo, uncalibrated: put white paper or the colour card in the shot.`,
-  }[j.calibration];
+  if (samples.read) showRead(samples.read, `Live SAM 3.1 read this kurta earlier as ${samples.read.hex}, calibrated against the colour card. Press Start the lab.`);
+};
+$("replayBtn").onclick = async () => {
+  if (!samples || !samples.runs.length) return;
+  const r = await fetch(`/api/replay/${encodeURIComponent(samples.runs[samples.runs.length - 1].name)}`, { method: "POST" });
+  if (!r.ok) { const j = await r.json(); $("photoNote").textContent = j.detail || "Could not replay."; }
 };
-
 $("start").onclick = async () => {
   const r = await fetch("/api/campaign", {
     method: "POST", headers: { "Content-Type": "application/json" },
@@ -325,14 +796,33 @@ async function sendAssist(url, body) {
 $("sendPhoto").onclick = () => {
   const file = $("assistPhoto").files[0];
   if (!file) { $("assistNote").textContent = "Take or choose a photo first."; return; }
-  const form = new FormData(); form.append("photo", file);
-  sendAssist("/api/assist/photo", form);
+  const form = new FormData(); form.append("photo", file); sendAssist("/api/assist/photo", form);
 };
 $("useWebcam").onclick = () => sendAssist("/api/assist/webcam");
 $("stop").onclick = () => fetch("/api/stop", { method: "POST" });
 
-// -- hands-free: Muse Voice Transcribe hears the dyer; the browser reads instructions aloud ----------
-let handsFree = false, replaying = false, mic = null, targetFromPhoto = false;
+$("replyBtn").onclick = async () => {
+  const form = new FormData(); form.append("passcode", $("passcode").value);
+  $("replyNote").textContent = "Muse Spark is drafting the reply in the buyer's language…";
+  const r = await fetch("/api/reply", { method: "POST", body: form });
+  const j = await r.json();
+  if (!r.ok) { $("replyNote").textContent = j.detail || "Could not draft the reply."; return; }
+  $("replyText").value = j.reply; $("replyText").hidden = false;
+  $("replyNote").textContent = "A draft: check it, then send it with the lab-dip report. Rangrez never sends messages itself.";
+};
+$("readOrder").onclick = async () => {
+  const msg = $("orderMsg").value.trim() || (samples && samples.order) || "";
+  if (!msg) { $("orderNote").textContent = "Paste the buyer's message first."; return; }
+  $("orderMsg").value = msg;
+  const form = new FormData(); form.append("message", msg); form.append("passcode", $("passcode").value);
+  $("orderNote").textContent = "Muse Spark is reading the order…";
+  const r = await fetch("/api/order", { method: "POST", body: form });
+  const o = await r.json();
+  if (!r.ok) { $("orderNote").textContent = o.detail || "Could not read the order."; return; }
+  $("tol").value = o.tolerance_de00; orderRead = true;
+  $("orderNote").textContent = `${o.quantity} ${o.quantity_unit} of ${o.garment}, ${o.fabric}` + (o.deadline ? `, by ${o.deadline}` : "") +
+    `. Shade ${o.shade_strictness}: pass at ΔE00 ≤ ${o.tolerance_de00}.` + (o.lab_dip_due ? ` Lab dip due ${o.lab_dip_due}.` : "");
+};
 $("previewBtn").onclick = async () => {
   const form = new FormData(); form.append("passcode", $("passcode").value);
   $("previewNote").textContent = "Muse Image is recolouring the garment; SAM 3.1 will check it…";
@@ -340,16 +830,25 @@ $("previewBtn").onclick = async () => {
   const j = await r.json();
   if (!r.ok) { $("previewNote").textContent = j.detail || "Preview failed."; return; }
   $("previewImg").src = `/api/preview.jpg?t=${Date.now()}`; $("previewImg").hidden = false;
-  $("previewNote").textContent = `Dip ${j.dip}'s shade on the customer's garment. Muse Image's first attempt was ΔE00 ${j.raw_de00} off; measured and corrected, it is now ${j.de00}. For the eye: the dip is the evidence.`;
+  $("previewNote").textContent = `Dip ${j.dip}'s shade on the customer's garment. Muse Image's first attempt measured ΔE00 ${j.raw_de00} from the dip, so Rangrez corrected it: a picture for the eye, the dip is the evidence.`;
 };
+
+// ---- hands-free: Muse Voice Transcribe hears the dyer; the browser reads instructions aloud ----
+const DYE_HI = { blue: "नीला", red: "लाल", yellow: "पीला", turquoise: "फ़िरोज़ी", fuchsia: "रानी", "lemon yellow": "नींबू पीला" };
+function instructions(e) {
+  const parts = Object.entries(e.amounts).filter(([, v]) => +v > 0);
+  if ($("lang").value === "hi")
+    return `डिप ${e.index}। ` + parts.map(([d, v]) => `${DYE_HI[d] || d} ${v} ${e.unit === "drops" ? "बूँद" : "एमएल"}`).join(", ") + `। ${e.dip_seconds} सेकंड डुबोइए। कपड़ा सूखकर कागज़ पर रखें, तो 'हो गया' बोलिए।`;
+  return `Dip ${e.index}. ` + parts.map(([d, v]) => `${v} ${e.unit} of ${d}`).join(", ") + `. Dip for ${e.dip_seconds} seconds. Say done when the strip is dry and on the paper.`;
+}
 function say(text) {
   if (!("speechSynthesis" in window)) return;
   speechSynthesis.cancel();
-  speechSynthesis.speak(new SpeechSynthesisUtterance(text));
+  const u = new SpeechSynthesisUtterance(text); u.lang = $("lang").value === "hi" ? "hi-IN" : "en-IN"; speechSynthesis.speak(u);
 }
-function wav16k(samples, rate) {
-  const ratio = rate / 16000, n = Math.floor(samples.length / ratio), pcm = new Int16Array(n);
-  for (let i = 0; i < n; i++) pcm[i] = Math.max(-1, Math.min(1, samples[Math.floor(i * ratio)])) * 0x7fff;
+function wav16k(samplesIn, rate) {
+  const ratio = rate / 16000, n = Math.floor(samplesIn.length / ratio), pcm = new Int16Array(n);
+  for (let i = 0; i < n; i++) pcm[i] = Math.max(-1, Math.min(1, samplesIn[Math.floor(i * ratio)])) * 0x7fff;
   const buf = new ArrayBuffer(44 + pcm.length * 2), v = new DataView(buf);
   const str = (o, t) => [...t].forEach((ch, i) => v.setUint8(o + i, ch.charCodeAt(0)));
   str(0, "RIFF"); v.setUint32(4, 36 + pcm.length * 2, true); str(8, "WAVEfmt "); v.setUint32(16, 16, true);
@@ -360,7 +859,7 @@ function wav16k(samples, rate) {
 }
 async function sendTurn(blob) {
   const form = new FormData();
-  form.append("audio", blob, "turn.wav"); form.append("passcode", $("passcode").value);
+  form.append("audio", blob, "turn.wav"); form.append("passcode", $("passcode").value); form.append("lang", $("lang").value);
   $("voiceNote").textContent = "Transcribing with Muse Voice Transcribe…";
   const r = await fetch("/api/voice", { method: "POST", body: form });
   const j = await r.json();
@@ -396,11 +895,93 @@ $("handsFree").onclick = async () => {
   $("handsFree").setAttribute("aria-pressed", handsFree);
   $("handsFree").textContent = `Hands-free voice: ${handsFree ? "listening" : "off"}`;
   if (handsFree) {
-    try { await startListening(); $("voiceNote").textContent = "Listening. Say \"done\", \"repeat\" or \"stop\"."; }
+    try { await startListening(); $("voiceNote").textContent = $("lang").value === "hi" ? "सुन रहे हैं। बोलिए: \"हो गया\", \"फिर से\" या \"बंद करो\"।" : "Listening. Say \"done\", \"repeat\" or \"stop\"."; }
     catch (err) { handsFree = false; $("handsFree").textContent = "Hands-free voice: off"; $("voiceNote").textContent = "Microphone unavailable: " + err.message; }
   } else if (mic) { mic.stream.getTracks().forEach((t) => t.stop()); mic.ctx.close(); mic = null; }
 };
-drawChart();
+
+// ---- tabs ----------------------------------------------------------------------------------
+function showTab(name) {
+  $("labView").hidden = name !== "lab"; $("caseView").hidden = name !== "case";
+  $("tapeWrap").hidden = name !== "lab";
+  $("tabLab").setAttribute("aria-selected", name === "lab"); $("tabCase").setAttribute("aria-selected", name === "case");
+  window.scrollTo({ top: 0, behavior: "smooth" });
+}
+$("tabLab").onclick = () => showTab("lab"); $("tabCase").onclick = () => showTab("case"); $("caseToLab").onclick = () => showTab("lab");
+
+// ---- the guided tour: shows the whole project, and has the judge run it ---------------------
+const TOUR = [
+  { title: "Welcome to Rangrez", text: "A dye house's lab dip, in minutes instead of days, from a phone. In two minutes you'll run the lab yourself: match a kurta, watch it dye and correct, and get the buyer's report." },
+  { el: "models", title: "Six Meta models, six jobs", text: "SAM 3.1 measures, Muse Wonder runs the lab, Muse Glimmer proposes the first dip, Muse Spark reads orders, Muse Image previews, Muse Voice listens. Each lights up the moment it's called." },
+  { el: "startCard", title: "Start from the customer's garment", text: "A buyer sends a photo of the kurta to match. Rangrez finds the garment and the printed colour card with SAM 3.1 and turns pixels into a calibrated colour.", action: () => $("sampleBtn").click() },
+  { el: "cameraCard", title: "SAM 3.1 as a measuring instrument", text: "The colour card corrects the camera; the white paper evens out uneven light. The kurta's colour is now the target, and the page takes on its shade." },
+  { el: "tapeWrap", title: "Now the lab runs", text: "We'll replay a recorded live run, sped up: every Wonder decision and SAM measurement in it happened for real. Watch each dip become a segment of this cotton tape.", action: () => $("replayBtn").click() },
+  { el: "gaugeCard", title: "Closer with every dip", text: "CIEDE2000 is the colour difference the eye sees. Below the tolerance (green) is a match; on a robot rig a second photo must agree before Rangrez calls it." },
+  { el: "logCard", title: "Muse Wonder, the colourist", text: "Wonder chooses each dip with tools: the dye model, the lab's memory, a correction learned from real dips. It never touches a pump: a safety gate checks every recipe, and it hands over to a human when stuck.", action: () => { $("logDetails").open = true; } },
+  { el: "learningCard", title: "It learns this dye lot", text: "Every dip is remembered. Over a 40-campaign night shift, the first dip's error fell from 3.81 to 1.40 ΔE00. Glimmer, fine-tuned on the lab's records, proposes first dips too." },
+  { el: "outcome", title: "The buyer's lab-dip report", text: "When it matches: a report the buyer already asks for: ΔE00 and CMC 2:1, options A/B/C, the recipe in % on weight of fabric, the production plan, and the garment previewed in the shade.", wait: true },
+  { el: "advanced", title: "Hands-free, in Hindi too", text: "The dyer's gloves are wet with dye: say \"done\" or \"हो गया\", \"repeat\" or \"फिर से\". Paste the buyer's WhatsApp order and Muse Spark reads it and drafts the reply.", action: () => { $("advanced").open = true; } },
+  { el: "tabCase", title: "The case", text: "What only Rangrez does, what it has shown, where it honestly stands (simulated, not yet dyed for real), and how a dye house would adopt it." },
+  { title: "Your turn", text: "Pick a preset shade or your own colour and press Start the lab. Or open “Your own photo” and photograph your outfit: Rangrez gives you a recipe to dye a matching cloth at home." },
+];
+let tourAt = 0;
+function placeTour() {
+  const step = TOUR[tourAt], spot = $("tourSpot"), card = $("tourCard");
+  $("tourStep").textContent = `${tourAt + 1} of ${TOUR.length}`; $("tourTitle").textContent = step.title; $("tourText").textContent = step.text;
+  $("tourBack").disabled = tourAt === 0; $("tourNext").textContent = tourAt === TOUR.length - 1 ? "Start exploring" : "Next";
+  const el = step.el && $(step.el);
+  if (el && !el.hidden) {
+    el.scrollIntoView({ block: "center", behavior: "smooth" });
+    followSpot();
+  } else {
+    Object.assign(spot.style, { left: innerWidth / 2 + "px", top: innerHeight / 2 + "px", width: "0px", height: "0px" });
+    card.style.left = (innerWidth - card.offsetWidth) / 2 + "px"; card.style.top = innerHeight * 0.3 + "px";
+  }
+}
+// Keep the spotlight on its element while the page scrolls into place (and afterwards).
+function followSpot() {
+  const step = TOUR[tourAt], el = step && step.el && $(step.el);
+  if ($("tour").hidden || !el || el.hidden) return;
+  const r = el.getBoundingClientRect(), pad = 8, spot = $("tourSpot"), card = $("tourCard");
+  Object.assign(spot.style, { left: r.left - pad + "px", top: r.top - pad + "px", width: r.width + 2 * pad + "px", height: r.height + 2 * pad + "px" });
+  const below = r.bottom + 16 + card.offsetHeight < innerHeight;
+  const above = r.top - card.offsetHeight - 16 > 0;
+  card.style.left = Math.max(16, Math.min(innerWidth - card.offsetWidth - 16, r.left)) + "px";
+  card.style.top = (below ? r.bottom + 16 : above ? r.top - card.offsetHeight - 16 : 16) + "px";
+}
+addEventListener("scroll", followSpot, { passive: true });
+
+function tourGo(i) {
+  if (i >= TOUR.length) return endTour();
+  tourAt = Math.max(0, i);
+  const step = TOUR[tourAt];
+  if (step.el === "tabCase" || step.el === "models") showTab(step.el === "tabCase" ? "case" : "lab"); else if (step.el) showTab("lab");
+  if (step.action) step.action();
+  if (step.wait && $(step.el).hidden) {  // wait for the replay to finish, then point at the report
+    $("tourText").textContent = "The lab is still dyeing… the report appears when it's done.";
+    const t = setInterval(() => { if (!$(step.el).hidden || $("tour").hidden) { clearInterval(t); placeTour(); } }, 500);
+  }
+  placeTour();
+}
+function endTour() { $("tour").hidden = true; showTab("lab"); try { localStorage.setItem("rangrez-tour", "done"); } catch (e) {} }
+$("tourBtn").onclick = () => { $("tour").hidden = false; tourGo(0); };
+$("tourNext").onclick = () => tourGo(tourAt + 1);
+$("tourBack").onclick = () => tourGo(tourAt - 1);
+$("tourSkip").onclick = endTour;
+addEventListener("resize", () => { if (!$("tour").hidden) placeTour(); });
+addEventListener("keydown", (ev) => { if ($("tour").hidden) return; if (ev.key === "Escape") endTour(); if (ev.key === "ArrowRight") tourGo(tourAt + 1); if (ev.key === "ArrowLeft") tourGo(tourAt - 1); });
+// Shareable links: ?replay=1 plays the recorded live run, ?tour=1 opens the tour.
+const params = new URLSearchParams(location.search);
+if (params.has("replay")) {
+  const go = () => samples ? ($("sampleBtn").click(), setTimeout(() => $("replayBtn").click(), 500)) : setTimeout(go, 200);
+  go();
+} else if (params.has("tour")) {
+  setTimeout(() => { $("tour").hidden = false; tourGo(0); }, 600);
+} else {
+  try { if (!localStorage.getItem("rangrez-tour")) setTimeout(() => { $("tour").hidden = false; tourGo(0); }, 900); } catch (e) {}
+}
+
+setDye($("picker").value); drawChart(); drawTape(); setGauge(NaN);
 </script>
 </body>
 </html>

src/rangrez/voice.py

@@ -19,22 +19,30 @@ from .profiles import PROFILE
 
 MODEL = "muse-voice-transcribe-1.0"
 URL = "https://api.meta.ai/v1/asr/transcribe"
-KEYWORDS = ["done", "dip", "photo", "webcam", "repeat", "stop", "drops", "patchy", "darker", "lighter", "Rangrez",
-            *PROFILE.names]
+KEYWORDS = {
+    "en": ["done", "dip", "photo", "webcam", "repeat", "stop", "drops", "patchy", "darker", "lighter", "Rangrez", *PROFILE.names],
+    "hi": [],  # tried: Devanagari keywords made Hindi worse ("फोटो लो" heard as "फट लो"); language bias alone is clean
+}
 
-INTENTS = [  # first match wins; whole words only
-    ("stop", r"\b(stop|cancel|abort)\b"),
-    ("repeat", r"\b(repeat|again|say that|what was|instructions)\b"),
-    ("photo", r"\b(done|ready|photo|picture|capture|webcam|shoot|snap|dry now|it'?s dry)\b"),
+INTENTS = [  # first match wins. English as whole words; Hindi (Devanagari or Hinglish) as phrases.
+    ("stop", r"\b(stop|cancel|abort|band karo|ruk jao)\b|रुको|रुक जाओ|बंद करो|^बस\b"),
+    ("repeat", r"\b(repeat|again|say that|what was|instructions|phir se|dobara)\b|फिर से|दोबारा|दुबारा|क्या था"),
+    ("photo", (r"\b(done|ready|photo|picture|capture|webcam|shoot|snap|dry now|it'?s dry|ho gaya|ho gya)\b"
+               r"|हो गया|हो गई|फोटो|फ़ोटो|तस्वीर|खींचो|सूख गया")),
 ]
+LANGUAGES = {"en": ["English"], "hi": ["Hindi", "English"]}
 
 
-def transcribe(wav: bytes, log=None) -> str:
-    """Text of one spoken turn (a 16 kHz mono WAV)."""
+def transcribe(wav: bytes, log=None, lang: str = "en") -> str:
+    """Text of one spoken turn (a 16 kHz mono WAV), biased towards the dyer's language."""
     from .vision import ApiCall
 
     boundary = uuid.uuid4().hex
-    request = json.dumps({"model": MODEL, "audioEncoding": "WAV", "mode": "PUSH_TO_TALK", "keywords": KEYWORDS})
+    lang = lang if lang in LANGUAGES else "en"
+    settings = {"model": MODEL, "audioEncoding": "WAV", "mode": "PUSH_TO_TALK", "languageBias": LANGUAGES[lang]}
+    if KEYWORDS[lang]:
+        settings["keywords"] = KEYWORDS[lang]
+    request = json.dumps(settings)
     body = (f"--{boundary}\r\nContent-Disposition: form-data; name=\"request\"\r\nContent-Type: application/json\r\n\r\n"
             f"{request}\r\n--{boundary}\r\nContent-Disposition: form-data; name=\"audio\"; filename=\"turn.wav\"\r\n"
             "Content-Type: audio/wav\r\n\r\n").encode() + wav + f"\r\n--{boundary}--\r\n".encode()
@@ -62,7 +70,30 @@ def intent(text: str) -> str:
     for name, pattern in INTENTS:
         if re.search(pattern, t):
             # "it looks done but patchy" is an observation with a command in it: a long turn is a note.
-            if name == "photo" and len(t.split()) > 6:
+            if name == "photo" and len(t.split()) > 5:
                 return "note"
             return name
     return "note"
+
+
+# What the lab says back, in the dyer's language.
+SAY = {
+    "en": {"photo": "Photo taken. Measuring.", "no_photo": "Nothing to photograph right now.",
+           "stopped": "Stopped.", "no_dip": "No dip is waiting.", "noted": "Noted for the colourist.",
+           "photo_failed": "Could not take the photo. Send one from your phone."},
+    "hi": {"photo": "फोटो ले ली। नाप रहे हैं।", "no_photo": "अभी फोटो लेने को कुछ नहीं है।",
+           "stopped": "रोक दिया।", "no_dip": "अभी कोई डिप बाकी नहीं है।", "noted": "रंगसाज़ के लिए लिख लिया।",
+           "photo_failed": "फोटो नहीं ले पाए। फ़ोन से फोटो भेजिए।"},
+}
+DYE_HI = {"blue": "नीला", "red": "लाल", "yellow": "पीला", "turquoise": "फ़िरोज़ी", "fuchsia": "रानी", "lemon yellow": "नींबू पीला"}
+UNIT_HI = {"drops": "बूँद", "mL": "एमएल"}
+
+
+def instructions(w: dict, lang: str = "en") -> str:
+    """One dip's instructions as a sentence to read aloud."""
+    amounts = [(d, v) for d, v in w["amounts"].items() if float(v) > 0]
+    if lang == "hi":
+        parts = ", ".join(f"{DYE_HI.get(d, d)} {v} {UNIT_HI.get(w['unit'], w['unit'])}" for d, v in amounts)
+        return f"डिप {w['index']}। {parts}। {w['dip_seconds']} सेकंड डुबोइए। कपड़ा सूखकर कागज़ पर रखें, तो 'हो गया' बोलिए।"
+    parts = ", ".join(f"{v} {w['unit']} of {d}" for d, v in amounts)
+    return f"Dip {w['index']}. {parts}. Dip for {w['dip_seconds']} seconds. Say done when the strip is dry and on the paper."