cot

app.py

@@ -55,7 +55,6 @@ cot_by_agent = {}
 if os.path.exists(COT_PATH):
     with open(COT_PATH, "r") as f:
         cot_raw = json.load(f)
-    # Support both list and {"inference_results": [...]} formats
     records = cot_raw if isinstance(cot_raw, list) else cot_raw.get("inference_results", [])
     for result in records:
         cot_by_agent[int(result["agent_id"])] = result
@@ -70,7 +69,10 @@ def get_cot(agent_id):
     s1 = result.get("step1_response", "")
     s2 = result.get("step2_response", "")
     s3 = result.get("step3_response", "")
-    return s1, s2, s3
+    p1 = result.get("step1_prompt", "")
+    p2 = result.get("step2_prompt", "")
+    p3 = result.get("step3_prompt", "")
+    return s1, s2, s3, p1, p2, p3
 
 
 # ── Mobility text builders ────────────────────────────────────────────────────
@@ -85,11 +87,9 @@ def build_mobility_summary(agent_sp):
     obs_end   = agent_sp["end_datetime"].max().strftime("%Y-%m-%d")
     days      = (agent_sp["end_datetime"].max() - agent_sp["start_datetime"].min()).days
 
-    # Top activity types
     act_counts = agent_sp["act_label"].value_counts().head(3)
     top_acts = ", ".join(f"{a} ({n})" for a, n in act_counts.items())
 
-    # Time of day
     agent_sp2 = agent_sp.copy()
     agent_sp2["hour"] = agent_sp2["start_datetime"].dt.hour
     def tod(h):
@@ -144,10 +144,6 @@ def build_weekly_checkin(agent_sp, max_days=None):
 
 # ── HTML reasoning chain ──────────────────────────────────────────────────────
 
-# ── Paste this entire block into app.py, replacing the existing CHAIN_CSS, render_chain, and helper functions ──
-
-import re
-
 CHAIN_CSS = """
 <style>
 @import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600&display=swap');
@@ -166,7 +162,7 @@ CHAIN_CSS = """
   overflow: hidden;
   transition: opacity 0.3s, filter 0.3s;
 }
-.hct-stage.dim  { opacity: 0.28; filter: grayscale(0.6); pointer-events: none; }
+.hct-stage.dim   { opacity: 0.28; filter: grayscale(0.6); pointer-events: none; }
 .hct-stage.active { opacity: 1; }
 
 /* ── Stage header strip ── */
@@ -189,270 +185,270 @@ CHAIN_CSS = """
   font-weight: 600;
   letter-spacing: 0.04em;
   text-transform: uppercase;
+  flex: 1;
 }
 
 /* Stage 1 colors */
 .hct-s1 { background: #f4f6fb; border: 1.5px solid #d4daf0; }
 .hct-s1 .hct-head { background: #eaecf7; border-bottom: 1px solid #d4daf0; }
-.hct-s1 .hct-num { background: #dde2f3; color: #3a4a80; }
+.hct-s1 .hct-num  { background: #dde2f3; color: #3a4a80; }
 .hct-s1 .hct-title { color: #3a4a80; }
 
 /* Stage 2 colors */
 .hct-s2 { background: #fdf8f2; border: 1.5px solid #e8d5b8; }
 .hct-s2 .hct-head { background: #f7ede0; border-bottom: 1px solid #e8d5b8; }
-.hct-s2 .hct-num { background: #f0dcbf; color: #7a4a10; }
+.hct-s2 .hct-num  { background: #f0dcbf; color: #7a4a10; }
 .hct-s2 .hct-title { color: #7a4a10; }
 
 /* Stage 3 colors */
 .hct-s3 { background: #fff6f5; border: 2px solid #d4453a; }
 .hct-s3 .hct-head { background: #fce8e7; border-bottom: 1px solid #d4453a; }
-.hct-s3 .hct-num { background: #d4453a; color: #fff; }
+.hct-s3 .hct-num  { background: #d4453a; color: #fff; }
 .hct-s3 .hct-title { color: #b0302a; }
 
+/* ── Prompt pill ── */
+.hct-prompt-wrap { padding: 0 14px 8px; }
+.hct-prompt-toggle {
+  display: inline-flex; align-items: center; gap: 5px;
+  font-family: 'DM Mono', monospace; font-size: 9px;
+  letter-spacing: 0.08em; text-transform: uppercase;
+  padding: 3px 9px; border-radius: 20px; cursor: pointer;
+  border: 1px solid currentColor; opacity: 0.45;
+  transition: opacity 0.2s; background: transparent;
+}
+.hct-prompt-toggle:hover { opacity: 0.8; }
+.hct-s1 .hct-prompt-toggle { color: #3a4a80; }
+.hct-s2 .hct-prompt-toggle { color: #7a4a10; }
+.hct-s3 .hct-prompt-toggle { color: #b0302a; }
+.hct-prompt-box {
+  display: none;
+  margin-top: 6px;
+  background: rgba(0,0,0,0.03);
+  border-radius: 6px;
+  padding: 8px 10px;
+  font-family: 'DM Mono', monospace;
+  font-size: 10px;
+  line-height: 1.65;
+  color: #556;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 150px;
+  overflow-y: auto;
+  border-left: 2px solid currentColor;
+  opacity: 0.7;
+}
+.hct-prompt-box.open { display: block; }
+
 /* ── Body ── */
 .hct-body { padding: 12px 14px; }
 
 /* ── Arrow connector ── */
 .hct-arrow {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 5px 18px;
-  transition: opacity 0.3s;
+  display: flex; align-items: center; gap: 8px;
+  padding: 5px 18px; transition: opacity 0.3s;
 }
-.hct-arrow-line { flex: 1; height: 1px; background: #d8d4ce; }
+.hct-arrow-line  { flex: 1; height: 1px; background: #d8d4ce; }
 .hct-arrow-label {
-  font-family: 'DM Mono', monospace;
-  font-size: 9px;
-  color: #b0a898;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  white-space: nowrap;
-  background: white;
-  padding: 2px 8px;
-  border: 1px solid #e0dbd4;
-  border-radius: 20px;
+  font-family: 'DM Mono', monospace; font-size: 9px;
+  color: #b0a898; letter-spacing: 0.08em; text-transform: uppercase;
+  white-space: nowrap; background: white;
+  padding: 2px 8px; border: 1px solid #e0dbd4; border-radius: 20px;
 }
 
 /* ── Stage 1: Location table ── */
 .hct-loc-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 11.5px;
-  margin-bottom: 10px;
+  width: 100%; border-collapse: collapse;
+  font-size: 11.5px; margin-bottom: 10px;
 }
 .hct-loc-table th {
-  font-family: 'DM Mono', monospace;
-  font-size: 9px;
-  font-weight: 500;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: #8090b0;
-  border-bottom: 1px solid #d4daf0;
-  padding: 3px 6px 5px;
-  text-align: left;
+  font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 500;
+  letter-spacing: 0.1em; text-transform: uppercase; color: #8090b0;
+  border-bottom: 1px solid #d4daf0; padding: 3px 6px 5px; text-align: left;
 }
 .hct-loc-table th:not(:first-child) { text-align: right; }
 .hct-loc-table td {
-  padding: 5px 6px;
-  color: #2a3050;
-  border-bottom: 1px solid #eaecf5;
-  line-height: 1.3;
+  padding: 5px 6px; color: #2a3050;
+  border-bottom: 1px solid #eaecf5; line-height: 1.3;
+}
+.hct-loc-table td:not(:first-child) {
+  text-align: right; font-family: 'DM Mono', monospace;
+  font-size: 11px; color: #5060a0;
 }
-.hct-loc-table td:not(:first-child) { text-align: right; font-family: 'DM Mono', monospace; font-size: 11px; color: #5060a0; }
 .hct-loc-table tr:last-child td { border-bottom: none; }
-.hct-loc-name { font-weight: 500; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
+.hct-loc-name {
+  font-weight: 500; max-width: 170px; overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap; display: block;
+}
 .hct-visit-bar-wrap { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
 .hct-visit-bar { height: 4px; border-radius: 2px; background: #6878c8; opacity: 0.55; }
 
 /* ── Stage 1: Temporal panel ── */
-.hct-temporal {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px;
-}
-.hct-temp-block {
-  background: #eef0fa;
-  border-radius: 8px;
-  padding: 8px 10px;
-}
+.hct-temporal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.hct-temp-block { background: #eef0fa; border-radius: 8px; padding: 8px 10px; }
 .hct-temp-label {
-  font-family: 'DM Mono', monospace;
-  font-size: 9px;
-  font-weight: 500;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: #7080b0;
-  margin-bottom: 6px;
+  font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 500;
+  letter-spacing: 0.1em; text-transform: uppercase; color: #7080b0; margin-bottom: 6px;
 }
 .hct-seg-row { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin-bottom: 5px; }
-.hct-seg { display: flex; align-items: center; justify-content: center; font-size: 0; transition: width 0.5s; }
-.seg-morning  { background: #fbbf24; }
-.seg-afternoon{ background: #f97316; }
-.seg-evening  { background: #8b5cf6; }
-.seg-night    { background: #1e3a5f; }
-.seg-weekday  { background: #6878c8; }
-.seg-weekend  { background: #e8c080; }
+.hct-seg { transition: width 0.5s; }
+.seg-morning   { background: #fbbf24; }
+.seg-afternoon { background: #f97316; }
+.seg-evening   { background: #8b5cf6; }
+.seg-night     { background: #1e3a5f; }
+.seg-weekday   { background: #6878c8; }
+.seg-weekend   { background: #e8c080; }
 .hct-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; }
 .hct-leg-item { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #5a6080; }
 .hct-leg-dot  { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
 .hct-dist-line {
-  margin-top: 8px;
-  font-size: 11px;
-  color: #6070a0;
-  font-family: 'DM Mono', monospace;
-  padding: 5px 8px;
-  background: #eef0fa;
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
+  margin-top: 8px; font-size: 11px; color: #6070a0;
+  font-family: 'DM Mono', monospace; padding: 5px 8px;
+  background: #eef0fa; border-radius: 6px;
+  display: flex; align-items: center; gap: 6px;
 }
 
-/* ── Stage 2: 2×2 grid ── */
-.hct-dim-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px;
-}
+/* ── Stage 2: 2x2 grid ── */
+.hct-dim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
 .hct-dim-card {
-  background: #fff;
-  border: 1px solid #e8d5b8;
-  border-radius: 8px;
-  padding: 9px 11px;
-}
-.hct-dim-head {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 5px;
+  background: #fff; border: 1px solid #e8d5b8;
+  border-radius: 8px; padding: 9px 11px;
 }
+.hct-dim-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
 .hct-dim-icon { font-size: 13px; line-height: 1; }
 .hct-dim-name {
-  font-family: 'DM Mono', monospace;
-  font-size: 9px;
-  font-weight: 500;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: #a07040;
-}
-.hct-dim-text {
-  font-size: 11px;
-  color: #3a2a10;
-  line-height: 1.55;
+  font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 500;
+  letter-spacing: 0.1em; text-transform: uppercase; color: #a07040;
 }
+.hct-dim-text  { font-size: 11px; color: #3a2a10; line-height: 1.55; }
 .hct-dim-empty { color: #ccc; font-style: italic; }
 
-/* ── Stage 3: prediction ── */
-.hct-pred-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 16px;
-  margin-bottom: 10px;
-}
+/* ── Stage 3 ── */
+.hct-pred-row { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 10px; }
 .hct-pred-badge {
-  background: #d4453a;
-  color: white;
-  border-radius: 8px;
-  padding: 8px 14px;
-  text-align: center;
-  flex-shrink: 0;
+  background: #d4453a; color: white; border-radius: 8px;
+  padding: 8px 14px; text-align: center; flex-shrink: 0;
 }
 .hct-pred-val { font-size: 18px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
-.hct-pred-sub { font-family: 'DM Mono', monospace; font-size: 9px; opacity: 0.8; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }
-.hct-conf-col { flex: 1; padding-top: 4px; }
-.hct-conf-label { font-family: 'DM Mono', monospace; font-size: 9px; color: #a04040; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
+.hct-pred-sub {
+  font-family: 'DM Mono', monospace; font-size: 9px;
+  opacity: 0.8; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px;
+}
+.hct-conf-col  { flex: 1; padding-top: 4px; }
+.hct-conf-label {
+  font-family: 'DM Mono', monospace; font-size: 9px; color: #a04040;
+  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px;
+}
 .hct-conf-track { height: 6px; background: #f0d0cf; border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
 .hct-conf-fill  { height: 100%; background: linear-gradient(90deg, #e74c3c, #8b0000); border-radius: 3px; }
 .hct-reasoning {
-  font-size: 11.5px;
-  color: #4a2020;
-  line-height: 1.6;
-  border-left: 3px solid #e8b0ae;
-  padding-left: 10px;
+  font-size: 11.5px; color: #4a2020; line-height: 1.6;
+  border-left: 3px solid #e8b0ae; padding-left: 10px;
 }
 
-/* ── Idle / loading states ── */
+/* ── Idle / loading ── */
 .hct-idle { font-size: 12px; color: #b0bac8; padding: 6px 0; font-style: italic; }
-.hct-loading {
-  font-size: 12px; padding: 6px 0;
-  display: flex; align-items: center; gap: 8px;
+.hct-loading { font-size: 12px; padding: 6px 0; display: flex; align-items: center; gap: 8px; }
+.hct-dot {
+  width: 6px; height: 6px; border-radius: 50%; display: inline-block;
+  animation: hct-pulse 1.2s ease-in-out infinite;
 }
-.hct-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; animation: hct-pulse 1.2s ease-in-out infinite; }
 .hct-dot:nth-child(2) { animation-delay: 0.2s; }
 .hct-dot:nth-child(3) { animation-delay: 0.4s; }
 @keyframes hct-pulse {
   0%,100% { opacity: 0.2; transform: scale(0.8); }
-  50% { opacity: 1; transform: scale(1.1); }
+  50%      { opacity: 1;   transform: scale(1.1); }
 }
 .hct-s1 .hct-dot { background: #6878c8; }
 .hct-s2 .hct-dot { background: #c08040; }
 .hct-s3 .hct-dot { background: #d4453a; }
 </style>
+<script>
+function hctTogglePrompt(id) {
+  var box = document.getElementById(id);
+  var btn = document.getElementById(id + '-btn');
+  if (!box) return;
+  var open = box.classList.toggle('open');
+  btn.textContent = open ? '▲ hide prompt' : '▼ show prompt';
+}
+</script>
 """
 
 
 def _loading(msg):
-    return f'<div class="hct-loading"><span class="hct-dot"></span><span class="hct-dot"></span><span class="hct-dot"></span><span style="color:#8090a0;font-size:12px">{msg}</span></div>'
+    return (f'<div class="hct-loading">'
+            f'<span class="hct-dot"></span><span class="hct-dot"></span><span class="hct-dot"></span>'
+            f'<span style="color:#8090a0;font-size:12px">{msg}</span></div>')
 
 
+# ── Parsers ───────────────────────────────────────────────────────────────────
+
 def _parse_s1(text):
-    """Returns (locations, tod, wk, dist)"""
-    locations = []
-    dur_map = {}
-    tod = {}
-    wk = {}
-    dist = None
+    locations, dur_map, tod, wk, dist = [], {}, {}, {}, None
 
     for line in text.splitlines():
         s = line.strip()
-        # Location inventory: "- Name: N visits, ..."
-        m = re.match(r'-\s+(.+?):\s+(\d+)\s+visit', s, re.IGNORECASE)
+
+        # Locations: "- Name: N visits/times/time/times each"
+        m = re.match(r'-\s+(.+?):\s+(\d+)\s+(?:visit|time)', s, re.IGNORECASE)
         if m:
             locations.append((m.group(1).strip(), int(m.group(2))))
-        # Duration: "- LocationName: Average duration of X minutes"
-        m2 = re.match(r'-?\s*(.+?):\s+Average duration of ([\d.]+)\s+min', s, re.IGNORECASE)
+            continue
+
+        # Duration
+        m2 = re.match(r'-?\s*(.+?):\s+(?:Average duration of\s*)?([\d.]+)\s+min(?:utes?)?\s+on average', s, re.IGNORECASE)
+        if not m2:
+            m2 = re.match(r'-?\s*(.+?):\s+Average duration of ([\d.]+)\s+min', s, re.IGNORECASE)
         if m2:
             dur_map[m2.group(1).strip()] = float(m2.group(2))
-        # TOD: "65% morning, 23% afternoon, 6% evening, 5% night"
+
+        # TOD format A: "65% morning, 23% afternoon, 6% evening, 5% night"
+        if not tod:
+            mA = re.search(r'(\d+)%\s*morning.*?(\d+)%\s*afternoon.*?(\d+)%\s*evening.*?(\d+)%\s*night', s, re.IGNORECASE)
+            if mA:
+                tod = {'Morning': int(mA.group(1)), 'Afternoon': int(mA.group(2)),
+                       'Evening': int(mA.group(3)), 'Night': int(mA.group(4))}
+        # TOD format B: "morning: 40%, afternoon: 36%, ..."
+        if not tod:
+            mB = re.search(r'morning[:\s]+(\d+)%.*?afternoon[:\s]+(\d+)%.*?evening[:\s]+(\d+)%.*?night[:\s]+(\d+)%', s, re.IGNORECASE)
+            if mB:
+                tod = {'Morning': int(mB.group(1)), 'Afternoon': int(mB.group(2)),
+                       'Evening': int(mB.group(3)), 'Night': int(mB.group(4))}
+        # TOD format C: "Afternoon (43%), morning (27%), ..."
         if not tod:
-            m3 = re.search(r'(\d+)%\s*morning.*?(\d+)%\s*afternoon.*?(\d+)%\s*evening.*?(\d+)%\s*night', s, re.IGNORECASE)
-            if m3:
-                tod = {'Morning': int(m3.group(1)), 'Afternoon': int(m3.group(2)),
-                       'Evening': int(m3.group(3)), 'Night': int(m3.group(4))}
+            parts = re.findall(r'(morning|afternoon|evening|night)\s*\(?(\d+)%\)?', s, re.IGNORECASE)
+            if len(parts) >= 3:
+                d = {k.capitalize(): int(v) for k, v in parts}
+                if all(k in d for k in ['Morning', 'Afternoon', 'Evening']):
+                    d.setdefault('Night', 0)
+                    tod = d
+
         # Weekday/weekend
         if not wk:
             m4 = re.search(r'(\d+)%\s*weekday.*?(\d+)%\s*weekend', s, re.IGNORECASE)
             if m4:
                 wk = {'Weekday': int(m4.group(1)), 'Weekend': int(m4.group(2))}
+
         # Distance
         if not dist:
-            m5 = re.search(r'average distance of approximately ([\d.]+)\s*miles', s, re.IGNORECASE)
+            m5 = re.search(r'average distance of approximately ([\d.]+)\s*(?:km|miles?)', s, re.IGNORECASE)
             if m5:
                 dist = float(m5.group(1))
 
-    result_locs = [(n, v, dur_map.get(n)) for n, v in locations[:7]]
-    return result_locs, tod, wk, dist
+    return [(n, v, dur_map.get(n)) for n, v in locations[:7]], tod, wk, dist
 
 
 def _parse_s2(text):
-    """Returns dict: ROUTINE, ECONOMIC, SOCIAL, URBAN, STABILITY → short summary string"""
     DIMS = {
-        'ROUTINE':    ['ROUTINE', 'SCHEDULE'],
-        'ECONOMIC':   ['ECONOMIC', 'SPENDING'],
-        'SOCIAL':     ['SOCIAL', 'LIFESTYLE'],
-        'URBAN':      ['URBAN', 'COMMUNITY'],
-        'STABILITY':  ['STABILITY', 'REGULARITY', 'CONSISTENCY'],
+        'ROUTINE':   ['ROUTINE', 'SCHEDULE'],
+        'ECONOMIC':  ['ECONOMIC', 'SPENDING'],
+        'SOCIAL':    ['SOCIAL', 'LIFESTYLE'],
+        'STABILITY': ['STABILITY', 'REGULARITY', 'CONSISTENCY', 'URBAN'],
     }
-    sections = {}
-    current_key = None
-    current_lines = []
+    sections, current_key, current_lines = {}, None, []
 
     for line in text.splitlines():
         s = line.strip()
-        # Format A: "1. TITLE ANALYSIS:" or "2. ECONOMIC BEHAVIOR PATTERNS:"
         mA = re.match(r'^\d+\.\s+([A-Z][A-Z\s&]+?)(?:\s+ANALYSIS|\s+PATTERNS|\s+INDICATORS|\s+CHARACTERISTICS|\s+STABILITY)?:\s*$', s, re.IGNORECASE)
-        # Format B: "STEP 1: ROUTINE & SCHEDULE ANALYSIS"
         mB = re.match(r'^STEP\s+\d+:\s+([A-Z][A-Z\s&]+?)(?:\s+ANALYSIS|\s+PATTERNS|\s+INDICATORS|\s+CHARACTERISTICS|\s+STABILITY)?\s*$', s, re.IGNORECASE)
         mm = mA or mB
         if mm:
@@ -463,8 +459,7 @@ def _parse_s2(text):
         elif current_key and s:
             if re.match(r'^\d+\.\d+', s):
                 sub = re.sub(r'^\d+\.\d+[^:]*:\s*', '', s)
-                if sub:
-                    current_lines.append(sub)
+                if sub: current_lines.append(sub)
             elif s.startswith('-'):
                 current_lines.append(s.lstrip('-').strip())
             elif not re.match(r'^\d+\.', s):
@@ -479,105 +474,86 @@ def _parse_s2(text):
             if any(kw in k for kw in keywords) and txt:
                 sents = re.split(r'(?<=[.!?])\s+', txt.strip())
                 summary = ' '.join(sents[:2])
-                if len(summary) > 160:
-                    summary = summary[:157] + '…'
-                result[dim] = summary
+                result[dim] = summary[:157] + '…' if len(summary) > 160 else summary
                 break
     return result
 
 
 def _parse_s3(text):
-    pred, conf, reasoning = '', 0, ''
-    in_r = False
-    r_lines = []
+    pred, conf, r_lines, in_r = '', 0, [], False
     for line in text.splitlines():
         s = line.strip()
         if s.startswith('INCOME_PREDICTION:'):
             pred = s.replace('INCOME_PREDICTION:', '').strip()
         elif s.startswith('INCOME_CONFIDENCE:'):
-            try:
-                conf = int(re.search(r'\d+', s).group())
-            except:
-                conf = 0
+            try: conf = int(re.search(r'\d+', s).group())
+            except: pass
         elif s.startswith('INCOME_REASONING:'):
             in_r = True
             r_lines.append(s.replace('INCOME_REASONING:', '').strip())
         elif in_r:
-            if re.match(r'^2\.', s) or s.startswith('INCOME_'):
-                break
-            if s:
-                r_lines.append(s)
+            if re.match(r'^2\.', s) or s.startswith('INCOME_'): break
+            if s: r_lines.append(s)
     reasoning = ' '.join(r_lines).strip()
     sents = re.split(r'(?<=[.!?])\s+', reasoning)
     reasoning = ' '.join(sents[:3])
-    if len(reasoning) > 280:
-        reasoning = reasoning[:277] + '…'
-    return pred, conf, reasoning
+    return pred, conf, (reasoning[:277] + '…' if len(reasoning) > 280 else reasoning)
+
+
+def _extract_prompt_instruction(prompt_text, stage):
+    if not prompt_text:
+        return ''
+    key = f'STEP {stage}:'
+    idx = prompt_text.find(key)
+    if idx != -1:
+        return prompt_text[idx:idx + 600].strip()
+    # fallback: first meaningful line
+    for line in prompt_text.strip().splitlines():
+        if line.strip():
+            return line.strip()[:300]
+    return ''
 
 
+# ── Body renderers ────────────────────────────────────────────────────────────
+
 def _s1_body(text, active):
     if not active:
         return '<div class="hct-idle">Press ▶ to start</div>'
     if not text:
         return _loading('Extracting features')
+
     locs, tod, wk, dist = _parse_s1(text)
 
-    # Location table
     max_v = max((v for _, v, _ in locs), default=1)
     rows = ''
     for name, visits, dur in locs:
         bar_w = int(60 * visits / max_v)
         dur_str = f'{int(dur)}m' if dur else '—'
-        rows += (
-            f'<tr>'
-            f'<td><span class="hct-loc-name" title="{name}">{name}</span></td>'
-            f'<td><div class="hct-visit-bar-wrap">'
-            f'<div class="hct-visit-bar" style="width:{bar_w}px"></div>'
-            f'{visits}</div></td>'
-            f'<td>{dur_str}</td>'
-            f'</tr>'
-        )
-    table = (
-        f'<table class="hct-loc-table">'
-        f'<thead><tr><th>Location</th><th>Visits</th><th>Avg Stay</th></tr></thead>'
-        f'<tbody>{rows}</tbody>'
-        f'</table>'
-    ) if rows else ''
-
-    # Temporal panels
+        rows += (f'<tr>'
+                 f'<td><span class="hct-loc-name" title="{name}">{name}</span></td>'
+                 f'<td><div class="hct-visit-bar-wrap">'
+                 f'<div class="hct-visit-bar" style="width:{bar_w}px"></div>{visits}</div></td>'
+                 f'<td>{dur_str}</td></tr>')
+    table = (f'<table class="hct-loc-table">'
+             f'<thead><tr><th>Location</th><th>Visits</th><th>Avg Stay</th></tr></thead>'
+             f'<tbody>{rows}</tbody></table>') if rows else ''
+
     def seg_bar(data, seg_classes):
         total = sum(data.values()) or 1
         segs = ''.join(
             f'<div class="hct-seg {cls}" style="width:{int(100*v/total)}%"></div>'
-            for (label, v), cls in zip(data.items(), seg_classes)
-        )
+            for (label, v), cls in zip(data.items(), seg_classes))
         legend = ''.join(
             f'<div class="hct-leg-item"><div class="hct-leg-dot {cls}"></div>{label} {v}%</div>'
-            for (label, v), cls in zip(data.items(), seg_classes)
-        )
+            for (label, v), cls in zip(data.items(), seg_classes))
         return f'<div class="hct-seg-row">{segs}</div><div class="hct-legend">{legend}</div>'
 
-    tod_panel = ''
-    if tod:
-        tod_panel = (
-            f'<div class="hct-temp-block">'
-            f'<div class="hct-temp-label">Time of Day</div>'
-            f'{seg_bar(tod, ["seg-morning","seg-afternoon","seg-evening","seg-night"])}'
-            f'</div>'
-        )
-    wk_panel = ''
-    if wk:
-        wk_panel = (
-            f'<div class="hct-temp-block">'
-            f'<div class="hct-temp-label">Weekday / Weekend</div>'
-            f'{seg_bar(wk, ["seg-weekday","seg-weekend"])}'
-            f'</div>'
-        )
-    temporal = f'<div class="hct-temporal">{tod_panel}{wk_panel}</div>' if (tod_panel or wk_panel) else ''
-
-    dist_line = ''
-    if dist:
-        dist_line = f'<div class="hct-dist-line">📍 Avg trip distance &nbsp;{dist} mi</div>'
+    tod_panel = (f'<div class="hct-temp-block"><div class="hct-temp-label">Time of Day</div>'
+                 f'{seg_bar(tod, ["seg-morning","seg-afternoon","seg-evening","seg-night"])}</div>') if tod else ''
+    wk_panel  = (f'<div class="hct-temp-block"><div class="hct-temp-label">Weekday / Weekend</div>'
+                 f'{seg_bar(wk, ["seg-weekday","seg-weekend"])}</div>') if wk else ''
+    temporal  = f'<div class="hct-temporal">{tod_panel}{wk_panel}</div>' if (tod_panel or wk_panel) else ''
+    dist_line = f'<div class="hct-dist-line">📍 Avg trip distance &nbsp;{dist} mi</div>' if dist else ''
 
     return table + temporal + dist_line
 
@@ -588,30 +564,18 @@ def _s2_body(text, active):
     if not text:
         return _loading('Analyzing behavior')
     dims = _parse_s2(text)
-
-    DIM_META = [
-        ('ROUTINE',   '🕐', 'Schedule'),
-        ('ECONOMIC',  '💰', 'Economic'),
-        ('SOCIAL',    '👥', 'Social'),
-        ('STABILITY', '🔄', 'Stability'),
-    ]
-    # fallback to URBAN if STABILITY missing
-    if 'STABILITY' not in dims and 'URBAN' in dims:
-        dims['STABILITY'] = dims['URBAN']
-
+    DIM_META = [('ROUTINE','🕐','Schedule'), ('ECONOMIC','💰','Economic'),
+                ('SOCIAL','👥','Social'),   ('STABILITY','🔄','Stability')]
     cards = ''
     for key, icon, label in DIM_META:
         txt = dims.get(key, '')
-        content = f'<div class="hct-dim-text">{txt}</div>' if txt else '<div class="hct-dim-text hct-dim-empty">—</div>'
-        cards += (
-            f'<div class="hct-dim-card">'
-            f'<div class="hct-dim-head">'
-            f'<span class="hct-dim-icon">{icon}</span>'
-            f'<span class="hct-dim-name">{label}</span>'
-            f'</div>'
-            f'{content}'
-            f'</div>'
-        )
+        content = (f'<div class="hct-dim-text">{txt}</div>' if txt
+                   else '<div class="hct-dim-text hct-dim-empty">—</div>')
+        cards += (f'<div class="hct-dim-card">'
+                  f'<div class="hct-dim-head">'
+                  f'<span class="hct-dim-icon">{icon}</span>'
+                  f'<span class="hct-dim-name">{label}</span></div>'
+                  f'{content}</div>')
     return f'<div class="hct-dim-grid">{cards}</div>'
 
 
@@ -621,60 +585,63 @@ def _s3_body(text, active):
     if not text:
         return _loading('Inferring demographics')
     pred, conf, reasoning = _parse_s3(text)
-    conf_pct = int(conf / 5 * 100)
-    return (
-        f'<div class="hct-pred-row">'
-        f'<div class="hct-pred-badge">'
-        f'<div class="hct-pred-val">{pred or "—"}</div>'
-        f'<div class="hct-pred-sub">Income</div>'
-        f'</div>'
-        f'<div class="hct-conf-col">'
-        f'<div class="hct-conf-label">Confidence &nbsp;{conf}/5</div>'
-        f'<div class="hct-conf-track"><div class="hct-conf-fill" style="width:{conf_pct}%"></div></div>'
-        f'</div>'
-        f'</div>'
-        f'<div class="hct-reasoning">{reasoning}</div>'
-    )
+    return (f'<div class="hct-pred-row">'
+            f'<div class="hct-pred-badge">'
+            f'<div class="hct-pred-val">{pred or "—"}</div>'
+            f'<div class="hct-pred-sub">Income</div></div>'
+            f'</div>'
+            f'<div class="hct-reasoning">{reasoning}</div>')
+
 
+# ── Main renderer ─────────────────────────────────────────────────────────────
 
-def render_chain(s1_text, s2_text, s3_text, status="idle"):
+def render_chain(s1_text, s2_text, s3_text, status="idle",
+                 s1_prompt="", s2_prompt="", s3_prompt=""):
     s1_on = status in ("running1", "running2", "running3", "done")
     s2_on = status in ("running2", "running3", "done")
     s3_on = status in ("running3", "done")
 
-    # For "running" states the text may be empty → show loading dots
     s1_body = _s1_body(s1_text if s1_on else '', s1_on)
     s2_body = _s2_body(s2_text if s2_on else '', s2_on)
     s3_body = _s3_body(s3_text if s3_on else '', s3_on)
 
-    def stage(cls, num, title, body, on):
+    def prompt_pill(pid, prompt_text, stage_num):
+        instr = _extract_prompt_instruction(prompt_text, stage_num)
+        if not instr:
+            return ''
+        safe = instr.replace('&', '&amp;').replace('<', '&lt;').replace('>', '&gt;')
+        return (f'<div class="hct-prompt-wrap">'
+                f'<span id="{pid}-btn" class="hct-prompt-toggle" '
+                f'onclick="hctTogglePrompt(\'{pid}\')">'
+                f'▼ show prompt</span>'
+                f'<div id="{pid}" class="hct-prompt-box">{safe}</div>'
+                f'</div>')
+
+    def stage(cls, num, title, body, on, prompt_text, stage_num):
         dim_cls = 'active' if on else 'dim'
-        return (
-            f'<div class="hct-stage hct-{cls} {dim_cls}">'
-            f'<div class="hct-head">'
-            f'<span class="hct-num">{num}</span>'
-            f'<span class="hct-title">{title}</span>'
-            f'</div>'
-            f'<div class="hct-body">{body}</div>'
-            f'</div>'
-        )
+        pill = prompt_pill(f'hct-p-{cls}', prompt_text, stage_num) if on and prompt_text else ''
+        return (f'<div class="hct-stage hct-{cls} {dim_cls}">'
+                f'<div class="hct-head">'
+                f'<span class="hct-num">{num}</span>'
+                f'<span class="hct-title">{title}</span>'
+                f'</div>'
+                f'{pill}'
+                f'<div class="hct-body">{body}</div>'
+                f'</div>')
 
     def arrow(label, on):
         op = '1' if on else '0.2'
-        return (
-            f'<div class="hct-arrow" style="opacity:{op}">'
-            f'<div class="hct-arrow-line"></div>'
-            f'<div class="hct-arrow-label">{label}</div>'
-            f'<div class="hct-arrow-line"></div>'
-            f'</div>'
-        )
+        return (f'<div class="hct-arrow" style="opacity:{op}">'
+                f'<div class="hct-arrow-line"></div>'
+                f'<div class="hct-arrow-label">{label}</div>'
+                f'<div class="hct-arrow-line"></div></div>')
 
-    html = CHAIN_CSS + '<div class="hct-root">'
-    html += stage('s1', 'Stage 01', 'Feature Extraction', s1_body, s1_on)
+    html  = CHAIN_CSS + '<div class="hct-root">'
+    html += stage('s1', 'Stage 01', 'Feature Extraction',    s1_body, s1_on, s1_prompt, 1)
     html += arrow('behavioral abstraction', s2_on)
-    html += stage('s2', 'Stage 02', 'Behavioral Analysis', s2_body, s2_on)
+    html += stage('s2', 'Stage 02', 'Behavioral Analysis',   s2_body, s2_on, s2_prompt, 2)
     html += arrow('demographic inference', s3_on)
-    html += stage('s3', 'Stage 03', 'Demographic Inference', s3_body, s3_on)
+    html += stage('s3', 'Stage 03', 'Demographic Inference', s3_body, s3_on, s3_prompt, 3)
     html += '</div>'
     return html
 
@@ -768,20 +735,17 @@ def on_select(agent_id):
 
 
 def run_step(agent_id, step):
-    """Reveal one stage per click. step: 0->1->2->done(-1)"""
     agent_id = int(agent_id)
-    s1, s2, s3 = get_cot(agent_id)
+    s1, s2, s3, p1, p2, p3 = get_cot(agent_id)
     next_step = step + 1
     if next_step == 1:
-        html = render_chain(s1, "", "", status="running2")
-        label = "▶ Stage 2: Behavioral Analysis"
-        return html, 1, gr.update(value=label)
+        html = render_chain(s1, "", "", status="running2", s1_prompt=p1)
+        return html, 1, gr.update(value="▶ Stage 2: Behavioral Analysis")
     elif next_step == 2:
-        html = render_chain(s1, s2, "", status="running3")
-        label = "▶ Stage 3: Demographic Inference"
-        return html, 2, gr.update(value=label)
+        html = render_chain(s1, s2, "", status="running3", s1_prompt=p1, s2_prompt=p2)
+        return html, 2, gr.update(value="▶ Stage 3: Demographic Inference")
     else:
-        html = render_chain(s1, s2, s3, status="done")
+        html = render_chain(s1, s2, s3, status="done", s1_prompt=p1, s2_prompt=p2, s3_prompt=p3)
         return html, -1, gr.update(value="↺ Reset")
 
 
@@ -809,7 +773,6 @@ def on_select_reset(agent_id):
     return map_html, summary, raw_text, demo_text, chain_html, 0, gr.update(value="▶ Stage 1: Feature Extraction")
 
 
-
 SHOWCASE_AGENTS = sample_agents[:6]
 
 
@@ -888,6 +851,7 @@ with gr.Blocks(title="HiCoTraj Demo") as app:
         fn=on_agent_click, inputs=agent_hidden,
         outputs=[agent_cards, map_out, summary_out, raw_out, chain_out, step_state, run_btn]
     )
+
     def on_load(agent_id):
         map_html, summary, raw_text, _demo_text, chain_html, step, btn = on_select_reset(agent_id)
         return map_html, summary, raw_text, chain_html, step, btn