Spaces:

knowledge-computing
/

HiCoTraj

Running

App Files Files Community

ginnyxxxxxxx commited on 3 days ago

Commit

75ab97e

1 Parent(s): 01349e5

cot

Browse files

Files changed (1) hide show

app.py +503 -263

app.py CHANGED Viewed

@@ -144,298 +144,538 @@ def build_weekly_checkin(agent_sp, max_days=None):
 # ── HTML reasoning chain ──────────────────────────────────────────────────────
 CHAIN_CSS = """
 <style>
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@300;400;600&display=swap');
-.hicotraj-chain { font-family: 'IBM Plex Sans', sans-serif; padding: 12px 4px; }
-.stage-card {
-    border-radius: 10px; padding: 16px 18px; margin-bottom: 0;
-    transition: opacity 0.4s, filter 0.4s;
 }
-.stage-card.dim  { opacity: 0.32; filter: grayscale(0.5); }
-.stage-card.active { opacity: 1; filter: none; }
-.stage-card.s1 { background: #f8f9fc; border: 1.5px solid #c8d0e0; }
-.stage-card.s2 { background: #fdf6f0; border: 1.5px solid #e8c9a8; }
-.stage-card.s3 { background: #fff8f8; border: 2px solid #c0392b; }
-.stage-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
-.stage-badge {
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
-    padding: 3px 8px; border-radius: 4px; text-transform: uppercase;
 }
-.s1 .stage-badge { background: #dde3f0; color: #3a4a6b; }
-.s2 .stage-badge { background: #f0dcc8; color: #7a4010; }
-.s3 .stage-badge { background: #c0392b; color: #fff; }
-.stage-title { font-size: 13px; font-weight: 600; color: #1a1a2e; }
-.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
-.tag {
-    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
-    background: #e8ecf5; color: #2c3e60;
-    padding: 3px 8px; border-radius: 4px; white-space: nowrap;
 }
-.behavior-row {
-    display: grid; grid-template-columns: 100px 1fr;
-    gap: 4px 10px; margin-top: 2px; font-size: 12px; line-height: 1.6;
 }
-.bkey {
-    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
-    font-weight: 600; color: #9b6a3a; padding-top: 1px;
 }
-.bval { color: #3a2a1a; }
-.pred-block { margin-top: 4px; }
-.pred-label {
-    font-size: 11px; font-family: 'IBM Plex Mono', monospace; color: #888;
-    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px;
 }
-.pred-value { font-size: 22px; font-weight: 600; color: #c0392b; margin-bottom: 8px; }
-.confidence-bar-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
-.confidence-bar-bg { flex: 1; height: 6px; background: #f0d0cf; border-radius: 3px; overflow: hidden; }
-.confidence-bar-fill { height: 100%; background: linear-gradient(90deg, #e74c3c, #8b0000); border-radius: 3px; }
-.confidence-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #c0392b; font-weight: 600; white-space: nowrap; }
-.reasoning-text { font-size: 12px; color: #4a2a2a; line-height: 1.6; border-left: 3px solid #e8c0be; padding-left: 10px; margin-top: 6px; }
-.alternatives { margin-top: 10px; font-size: 11px; font-family: 'IBM Plex Mono', monospace; color: #999; }
-.alternatives span { color: #c0392b; opacity: 0.7; }
-.chain-arrow { display: flex; flex-direction: column; align-items: center; padding: 4px 0; transition: opacity 0.4s; }
-.arrow-line { width: 2px; height: 16px; background: #d0c0b0; }
-.arrow-label {
-    font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #aaa;
-    letter-spacing: 0.06em; text-transform: uppercase;
-    background: white; padding: 2px 8px; border: 1px solid #e0e0e0; border-radius: 10px; margin: 2px 0;
 }
-.arrow-tip { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #d0c0b0; }
-.thinking { font-size: 13px; color: #888; padding: 8px 0; }
-.empty-hint { font-size: 12px; color: #ccc; padding: 6px 0; }
-.temporal-line { font-size: 11px; color: #666; margin-top: 8px; font-family: 'IBM Plex Mono', monospace; }
-.prompt-snippet {
-    font-size: 11px; color: #888; line-height: 1.5;
-    background: rgba(0,0,0,0.03); border-left: 2px solid #ddd;
-    padding: 6px 10px; border-radius: 0 4px 4px 0;
-    margin-bottom: 8px; font-family: 'IBM Plex Mono', monospace;
 }
-.prompt-label {
-    display: inline-block; font-size: 9px; font-weight: 600;
-    text-transform: uppercase; letter-spacing: 0.08em;
-    color: #aaa; margin-right: 6px;
-    background: #eee; padding: 1px 5px; border-radius: 3px;
 }
-.resp-label {
-    font-size: 9px; font-weight: 600; text-transform: uppercase;
-    letter-spacing: 0.08em; color: #aaa; margin-bottom: 4px;
-    display: inline-block; background: #eee; padding: 1px 5px; border-radius: 3px;
 }
-.wd {
-    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
-    background: currentColor; margin: 0 2px; opacity: 0.3;
-    animation: wd-pulse 1.2s ease-in-out infinite;
 }
-.wd:nth-child(2) { animation-delay: 0.2s; }
-.wd:nth-child(3) { animation-delay: 0.4s; }
-@keyframes wd-pulse {
-    0%, 100% { opacity: 0.2; transform: scale(0.8); }
-    50% { opacity: 1; transform: scale(1.1); }
 }
 </style>
 """
-def _dots():
-    return '<span class="wd"></span><span class="wd"></span><span class="wd"></span>'
-def render_chain(s1_text, s2_text, s3_text, status="done"):
-    s1_active = status in ("running1", "running2", "running3", "done")
-    s2_active = status in ("running2", "running3", "done")
-    s3_active = status in ("running3", "done")
-    # ── Stage 1: Location pills + temporal line ───────────────────────────────
-    if status == "running1":
-        s1_content = f'<div class="thinking">Extracting features {_dots()}</div>'
-    elif s1_text:
-        tags = []
-        lines = s1_text.splitlines()
-        # Find frequency section: "Frequency of visits" or direct "- Name: N visits"
-        freq_mode = False
-        for line in lines:
-            stripped = line.strip()
-            if not stripped:
-                continue
-            # Enter frequency section
-            if re.search(r'frequency of visits', stripped, re.IGNORECASE):
-                freq_mode = True
-                continue
-            # Exit on next section heading
-            if freq_mode and re.match(r'^[A-Z][A-Z\s]+:', stripped) and not stripped.startswith('-'):
                 break
-            if freq_mode and stripped.startswith('-'):
-                # "- Name: N visits" or "  - Name: N visits"
-                m = re.match(r'-+\s*(.+?):\s*(\d+)\s*visit', stripped, re.IGNORECASE)
-                if m:
-                    tags.append(f"{m.group(1).strip()} · {m.group(2)}x")
-                    if len(tags) >= 8:
-                        break
-                continue
-            # Fallback: direct "- Name: N visits, description" under LOCATION INVENTORY
-            if not freq_mode:
-                m = re.match(r'-\s*(.+?):\s*(\d+)\s*visit', stripped, re.IGNORECASE)
-                if m and 'LOCATION' not in stripped.upper():
-                    tags.append(f"{m.group(1).strip()} · {m.group(2)}x")
-                    if len(tags) >= 8:
-                        break
-        # Temporal summary line
-        temporal_line = ""
-        for line in lines:
-            stripped = line.strip().lstrip('-').strip()
-            if re.search(r'\d+%\s*weekday', stripped, re.IGNORECASE):
-                temporal_line = stripped[:80]
                 break
-        tag_html  = "".join(f'<span class="tag">{t}</span>' for t in tags)
-        temp_html = f'<div class="temporal-line">⏱ {temporal_line}</div>' if temporal_line else ""
-        s1_content = f'<div class="tag-row">{tag_html}</div>{temp_html}'
-    else:
-        s1_content = '<div class="empty-hint">Press ▶ to start</div>'
-    # ── Stage 2: 4 behavior dimensions ───────────────────────────────────────
-    KEYS = [
-        ("SCHEDULE",  ["ROUTINE", "SCHEDULE"]),
-        ("ECONOMIC",  ["ECONOMIC", "SPENDING", "FINANCIAL"]),
-        ("SOCIAL",    ["SOCIAL", "COMMUNITY", "LIFESTYLE"]),
-        ("STABILITY", ["STABILITY", "CONSISTENCY", "REGULARITY"]),
     ]
-    if status == "running2":
-        s2_content = f'<div class="thinking" style="color:#a06030">Analyzing behavior {_dots()}</div>'
-    elif s2_text:
-        # Parse both "1. HEADING:" and "STEP 1: HEADING" formats
-        sections = {}
-        current_key = None
-        current_sents = []
-        for line in s2_text.splitlines():
-            stripped = line.strip()
-            # Match "1. TITLE ANALYSIS:" or "STEP 1: TITLE ANALYSIS"
-            m = re.match(r'^(?:\d+\.|STEP\s*\d+:)\s+(.+?)(?:\s+ANALYSIS|\s+PATTERNS|\s+INDICATORS|\s+BEHAVIOR|\s+CHARACTERISTICS)?:\s*$', stripped, re.IGNORECASE)
-            if m:
-                if current_key and current_sents:
-                    sections[current_key] = " ".join(current_sents)
-                current_key = m.group(1).upper().strip()
-                current_sents = []
-            elif current_key:
-                # Grab sub-bullet text (skip sub-headings like "1.1")
-                if re.match(r'^\d+\.\d+', stripped):
-                    # sub-heading: extract its inline content
-                    sub = re.sub(r'^\d+\.\d+[^:]*:\s*', '', stripped)
-                    if sub:
-                        current_sents.append(sub)
-                elif stripped.startswith('-'):
-                    current_sents.append(stripped.lstrip('-').strip())
-        if current_key and current_sents:
-            sections[current_key] = " ".join(current_sents)
-        rows_html = ""
-        for label, search_words in KEYS:
-            val = "—"
-            for k, text in sections.items():
-                if any(w in k for w in search_words) and text:
-                    # First 2 sentences
-                    sents = re.split(r'(?<=[.!?])\s+', text.strip())
-                    val = " ".join(sents[:2])
-                    if len(val) > 110:
-                        val = val[:107] + "..."
-                    break
-            rows_html += f'<div class="bkey">{label}</div><div class="bval">{val}</div>'
-        s2_content = f'<div class="behavior-row">{rows_html}</div>'
-    else:
-        s2_content = '<div class="empty-hint">Waiting...</div>'
-    # ── Stage 3: prediction + full reasoning ─────────────────────────────────
-    if status == "running3":
-        s3_content = f'<div class="thinking" style="color:#c0392b">Inferring demographics {_dots()}</div>'
-    elif s3_text:
-        pred = ""
-        reasoning_lines = []
-        in_reasoning = False
-        for line in s3_text.splitlines():
-            stripped = line.strip()
-            if stripped.startswith("INCOME_PREDICTION:"):
-                pred = stripped.replace("INCOME_PREDICTION:", "").strip()
-                in_reasoning = False
-            elif stripped.startswith("INCOME_REASONING:"):
-                in_reasoning = True
-                reasoning_lines.append(stripped.replace("INCOME_REASONING:", "").strip())
-            elif in_reasoning:
-                # Stop at second prediction block
-                if re.match(r'^2\.', stripped) or stripped.startswith("INCOME_CONFIDENCE"):
-                    break
-                if stripped:
-                    reasoning_lines.append(stripped)
-        reasoning = " ".join(reasoning_lines).strip()
-        # Truncate to 3 sentences
-        sents = re.split(r'(?<=[.!?])\s+', reasoning)
-        short = " ".join(sents[:3])
-        if len(short) > 220:
-            short = short[:217] + "..."
-        s3_content = f"""
-        <div class="pred-block">
-            <div class="pred-label">Income Prediction</div>
-            <div class="pred-value">{pred or "—"}</div>
-            <div class="reasoning-text">{short}</div>
-        </div>"""
-    else:
-        s3_content = '<div class="empty-hint">Waiting...</div>'
-    PROMPT_SNIPPETS = {
-        "s1": "You are an expert mobility analyst. Given the trajectory data below, extract: (1) LOCATION INVENTORY — list all POI categories visited and visit frequency; (2) TEMPORAL PATTERNS — weekly distribution, peak hours; (3) SEQUENCE — typical activity chains...",
-        "s2": "Based on the trajectory features identified: {Response 1}. Now analyze what these mobility patterns reveal about lifestyle: (1) SCHEDULE — work/activity routine type; (2) ECONOMIC — spending venue tiers; (3) SOCIAL — social engagement; (4) STABILITY — consistency of routine...",
-        "s3": "Based on feature analysis {Response 1} and behavioral analysis {Response 2}, predict income level. Output — INCOME_PREDICTION: [range]; INCOME_REASONING: [detailed reasoning]...",
-    }
-    def card(cls, badge, title, content_html, active):
-        dim = "active" if active else "dim"
-        prompt = PROMPT_SNIPPETS.get(cls, "")
-        prompt_html = f'<div class="prompt-snippet"><span class="prompt-label">Prompt</span>{prompt}</div>' if prompt else ""
-        resp_label = '<div class="resp-label">Response</div>' if active and content_html and "empty-hint" not in content_html and "thinking" not in content_html else ""
-        return f"""
-        <div class="stage-card {cls} {dim}">
-            <div class="stage-header">
-                <span class="stage-badge">{badge}</span>
-                <span class="stage-title">{title}</span>
-            </div>
-            {prompt_html}
-            {resp_label}
-            {content_html}
-        </div>"""
-    def arrow(label, active):
-        op = "1" if active else "0.25"
-        return f"""
-        <div class="chain-arrow" style="opacity:{op}">
-            <div class="arrow-line"></div>
-            <div class="arrow-label">{label}</div>
-            <div class="arrow-line"></div>
-            <div class="arrow-tip"></div>
-        </div>"""
-    html  = CHAIN_CSS + '<div class="hicotraj-chain">'
-    html += card("s1", "Stage 1", "Factual Feature Extraction", s1_content, s1_active)
-    html += arrow("behavioral abstraction", s2_active)
-    html += card("s2", "Stage 2", "Behavioral Pattern Analysis", s2_content, s2_active)
-    html += arrow("demographic inference", s3_active)
-    html += card("s3", "Stage 3", "Demographic Inference", s3_content, s3_active)
-    html += "</div>"
     return html

 # ── 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');
+.hct-root {
+  font-family: 'DM Sans', sans-serif;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 4px 0 8px;
+}
+/* ── Stage shell ── */
+.hct-stage {
+  border-radius: 12px;
+  overflow: hidden;
+  transition: opacity 0.3s, filter 0.3s;
 }
+.hct-stage.dim  { opacity: 0.28; filter: grayscale(0.6); pointer-events: none; }
+.hct-stage.active { opacity: 1; }
+/* ── Stage header strip ── */
+.hct-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 14px;
 }
+.hct-num {
+  font-family: 'DM Mono', monospace;
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  padding: 2px 7px;
+  border-radius: 4px;
+}
+.hct-title {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
 }
+/* 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-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-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-title { color: #b0302a; }
+/* ── Body ── */
+.hct-body { padding: 12px 14px; }
+/* ── Arrow connector ── */
+.hct-arrow {
+  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-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;
 }
+/* ── Stage 1: Location table ── */
+.hct-loc-table {
+  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;
+}
+.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;
+}
+.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-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-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;
+}
+.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-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;
 }
+/* ── Stage 2: 2×2 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;
+}
+.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;
 }
+.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;
+}
+.hct-pred-badge {
+  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-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;
 }
+/* ── Idle / loading states ── */
+.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-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); }
 }
+.hct-s1 .hct-dot { background: #6878c8; }
+.hct-s2 .hct-dot { background: #c08040; }
+.hct-s3 .hct-dot { background: #d4453a; }
 </style>
 """
+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>'
+def _parse_s1(text):
+    """Returns (locations, tod, wk, dist)"""
+    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)
+        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)
+        if m2:
+            dur_map[m2.group(1).strip()] = float(m2.group(2))
+        # TOD: "65% morning, 23% afternoon, 6% evening, 5% night"
+        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))}
+        # 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)
+            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
+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'],
+    }
+    sections = {}
+    current_key = None
+    current_lines = []
+    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:
+            if current_key and current_lines:
+                sections[current_key] = ' '.join(current_lines)
+            current_key = mm.group(1).upper().strip()
+            current_lines = []
+        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)
+            elif s.startswith('-'):
+                current_lines.append(s.lstrip('-').strip())
+            elif not re.match(r'^\d+\.', s):
+                current_lines.append(s)
+    if current_key and current_lines:
+        sections[current_key] = ' '.join(current_lines)
+    result = {}
+    for dim, keywords in DIMS.items():
+        for k, txt in sections.items():
+            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
                 break
+    return result
+def _parse_s3(text):
+    pred, conf, reasoning = '', 0, ''
+    in_r = False
+    r_lines = []
+    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
+        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)
+    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
+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
+    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)
+        )
+        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)
+        )
+        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>'
+    return table + temporal + dist_line
+def _s2_body(text, active):
+    if not active:
+        return '<div class="hct-idle">Waiting…</div>'
+    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']
+    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>'
+        )
+    return f'<div class="hct-dim-grid">{cards}</div>'
+def _s3_body(text, active):
+    if not active:
+        return '<div class="hct-idle">Waiting…</div>'
+    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>'
+    )
+def render_chain(s1_text, s2_text, s3_text, status="idle"):
+    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):
+        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>'
+        )
+    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>'
+        )
+    html = CHAIN_CSS + '<div class="hct-root">'
+    html += stage('s1', 'Stage 01', 'Feature Extraction', s1_body, s1_on)
+    html += arrow('behavioral abstraction', s2_on)
+    html += stage('s2', 'Stage 02', 'Behavioral Analysis', s2_body, s2_on)
+    html += arrow('demographic inference', s3_on)
+    html += stage('s3', 'Stage 03', 'Demographic Inference', s3_body, s3_on)
+    html += '</div>'
     return html