feat: progress stepper + highlighted result + correction cards (local compare view)

app.py

@@ -2,27 +2,23 @@
 
 FT 교열 + Opus 기사 검토 구성을 solar-eval 엔진 그대로 실행한다 - FT 교열 모델이 문단 묶음마다 1차 교열하고,
 Claude Opus 가 기사 전체를 한 번 보고 FT 오교정을 되돌리며 사실·숫자·문맥 오류를 고친 뒤 결정론 규칙을 건다.
-구성 정의와 실행은 전부 runner.py 이고 이 파일은 UI 만 담당한다. 사용자 입력과 결과는 logbook.py 가
-Supabase 에 남긴다(시크릿이 없으면 조용히 건너뜀).
+구성 정의와 실행은 runner.py, 진행·결과 화면은 column_view.py(로컬 3종 비교 앱과 같은 모양)이고 이 파일은 페이지만
+담당한다. 사용자 입력과 결과는 logbook.py 가 Supabase 에 남긴다(시크릿이 없으면 조용히 건너뜀).
 """
 
 from __future__ import annotations
 
-import difflib
-import html
 import os
+import queue
+import time
 
+import column_view as cv
 import logbook
 import runner
 import streamlit as st
 
-PANE_STYLE = (
-    "border:1px solid rgba(128,128,128,.35);border-radius:8px;"
-    "padding:14px 16px;line-height:1.9;font-size:1.02rem;min-height:120px"
-)
-
 # 합성 예문 - 평가셋 gold 는 쓰지 않는다(유출 방지). 각 층의 표적을 일부러 심어 둔 문장이다:
-# 비률/갱신률/연체률(사전·율률 규칙) · 의문형 어미 · 160㎞으로(조사) · 곧은 따옴표(원문 따옴표 보존).
+# 비률/갱신률/연체률(사전·율률 규칙) · 160㎞으로(조사) · 곧은 따옴표(원문 따옴표 보존).
 SAMPLE_TEXT = (
     "▶정부의 강력한 부동산 규제에도 불구하고 수도권 아파트 매매 거래 비률은 "
     "오히려 증가세를 보였다. 시중 은행의 주택 담보 대출 금리가 낮아지면서 "
@@ -32,77 +28,6 @@ SAMPLE_TEXT = (
     "주목하고 있다. 신규 광역철도는 최고 시속 160㎞으로 설계됐다."
 )
 
-# 스텝 이름 → 사용자에게 보여줄 라벨 (모르는 스텝은 이름 그대로)
-STEP_LABELS = {
-    "vocabulary_sub_pre": "용어 사전 치환",
-    "proofread": "1차 교열 (교열 전용 FT 모델, 문단별)",
-    "ft_hunks": "FT 수정 목록 정리",
-    "review": "기사 전체 검토 (Claude Opus 1회)",
-    "revert_ft": "FT 오교정 되돌림",
-    "apply_review": "사실·숫자·문맥 교정 적용",
-    "quote_direction": "따옴표 방향 정리",
-    "quote_preserve": "원문 따옴표 보존",
-    "yul_ryul_normalize": "율/률 규칙 적용",
-    "post_process": "후처리 (단위·통화·쉼표)",
-}
-
-
-def diff_panes(src: str, dst: str) -> tuple[str, str, int]:
-    """어절 단위 diff 를 좌(원문)/우(교정) 패널 HTML 로. 바뀐 세그먼트 수도 반환."""
-    a, b = src.split(), dst.split()
-    sm = difflib.SequenceMatcher(a=a, b=b, autojunk=False)
-    left: list[str] = []
-    right: list[str] = []
-    n_changed = 0
-    for op, i1, i2, j1, j2 in sm.get_opcodes():
-        before, after = html.escape(" ".join(a[i1:i2])), html.escape(" ".join(b[j1:j2]))
-        if op == "equal":
-            left.append(before)
-            right.append(after)
-            continue
-        n_changed += 1
-        if before:
-            left.append(f'<span style="background:rgba(230,80,80,.20)">{before}</span>')
-        if after:
-            right.append(f'<span style="background:rgba(60,170,90,.24)">{after}</span>')
-    return " ".join(left), " ".join(right), n_changed
-
-
-class ProgressView:
-    """스텝 진행을 st.status 안에 그린다 - 단계별 출력은 보여주지 않고 '어디까지 왔나' 만."""
-
-    def __init__(self, names: list[str]) -> None:
-        self.names = names
-        self.done = 0
-        self.status = st.status("교열 중입니다…", expanded=True)
-        self.bar = self.status.progress(0.0, text=f"0 / {len(names)} 단계")
-        self.lines = self.status.empty()
-        self._render()
-
-    def on_step(self, event: str, index: int, total: int, name: str) -> None:
-        if event == "done":
-            self.done = index
-        self.bar.progress(min(self.done / total, 1.0), text=f"{self.done} / {total} 단계")
-        self._render()
-
-    def _render(self) -> None:
-        rows = []
-        for i, name in enumerate(self.names, 1):
-            label = STEP_LABELS.get(name, name)
-            if i <= self.done:
-                rows.append(f"✅ {label}")
-            elif i == self.done + 1:
-                rows.append(f"⏳ **{label}**")
-            else:
-                rows.append(f"▫️ {label}")
-        self.lines.markdown("  \n".join(rows))
-
-    def finish(self, elapsed_s: float) -> None:
-        self.status.update(label=f"교열 완료 · {elapsed_s:.1f}초", state="complete", expanded=False)
-
-    def fail(self) -> None:
-        self.status.update(label="교열 실패", state="error", expanded=True)
-
 
 @st.cache_resource(show_spinner="파이프라인 준비 중…")
 def get_pipeline():
@@ -110,8 +35,9 @@ def get_pipeline():
 
 
 st.set_page_config(page_title="조선일보 본문 교열 데모", page_icon="📰", layout="wide")
+st.markdown(cv.CSS, unsafe_allow_html=True)
 st.title("📰 조선일보 본문 교열 데모")
-st.caption(f"{runner.CONFIG.label} · 평가 하네스와 같은 엔진 코드")
+st.caption(f"{runner.CONFIG.label} · 단계가 끝나는 대로 결과가 쌓입니다")
 
 with st.sidebar:
     st.subheader("설정")
@@ -125,48 +51,60 @@ with st.sidebar:
     cfg = runner.CONFIG
     st.markdown(f"**{cfg.label}**")
     st.caption(cfg.note)
-    st.markdown(f"- 파이프라인 `{cfg.pipeline}`\n- 프롬프트 `{cfg.prompt}`")
 
-text = st.text_area("기사 본문", value=SAMPLE_TEXT, height=320, max_chars=12000)
+# 폼 안의 여러 줄 입력은 ⌘+Enter(맥) · Ctrl+Enter 로 폼을 제출한다 - 버튼을 누르지 않아도 바로 교열을 시작한다.
+with st.form("article_form", border=False):
+    text = st.text_area("기사 본문", value=SAMPLE_TEXT, height=220, max_chars=12000)
+    go = st.form_submit_button("교열 실행 (⌘/Ctrl + Enter)", type="primary")
+ph = st.empty()
 
-if st.button("교열 실행", type="primary", disabled=not text.strip()):
+if go:
+    source = text.strip()
     missing = [k for k in runner.REQUIRED_KEYS if not os.environ.get(k)]
+    if not source:
+        st.warning("기사 본문을 넣어 주세요.")
+        st.stop()
     if missing:
         st.error(
             f"{', '.join(missing)} 가 필요합니다 - 사이드바에 입력하거나 Space Secrets 에 설정하세요."
         )
         st.stop()
-
-    source = text.strip()
-    pipeline = get_pipeline()
-    # 입력은 실행 전에 남긴다 - 실행이 실패해도 무엇이 들어왔는지는 알 수 있게
-    article_id = logbook.save_article(source)
-
-    progress = ProgressView(runner.step_names(pipeline))
     try:
-        result = runner.run_proofread(pipeline, source, on_step=progress.on_step)
-    except Exception as e:  # noqa: BLE001 - 데모 표면에서는 원인 요약만 보여준다
-        progress.fail()
-        st.error(f"실행 실패: {type(e).__name__}: {e}")
+        pipeline = get_pipeline()
+    except Exception as e:  # noqa: BLE001 - 데모 표면: 원인만 화면으로
+        st.error(f"파이프라인 준비 실패: {type(e).__name__}: {e}")
         st.stop()
-    progress.finish(result["elapsed_s"])
-
-    logbook.save_run(
-        article_id,
-        pipeline_key=result["pipeline_key"],
-        prompt_key=result["prompt_key"],
-        model=result["model"],
-        output=result["output"],
-        processing_time_s=result["elapsed_s"],
-    )
-    if logbook.is_configured() and logbook.last_error():
-        st.caption(f"기록 실패 (결과에는 영향 없음): {logbook.last_error()}")
+    # 입력은 실행 전에 남긴다 - 실행이 실패해도 무엇이 들어왔는지는 알 수 있게
+    article_id = logbook.save_article(source)
 
-    left, right, _n_changed = diff_panes(source, result["output"])
-    c1, c2 = st.columns(2, gap="medium")
-    with c1:
-        st.subheader("원문")
-        st.markdown(f'<div style="{PANE_STYLE}">{left}</div>', unsafe_allow_html=True)
-    with c2:
-        st.subheader("교열 후")
-        st.markdown(f'<div style="{PANE_STYLE}">{right}</div>', unsafe_allow_html=True)
+    state = cv.new_state(source)
+    events = runner.start_proofread(pipeline, source)
+    cv.render(ph, state, time.monotonic())
+    last_draw = 0.0
+    while not (state["done"] or state["error"]):
+        moved = False
+        try:
+            while True:
+                cv.absorb(state, events.get_nowait())
+                moved = True
+        except queue.Empty:
+            pass
+        now = time.monotonic()
+        if moved or now - last_draw > 0.5:
+            cv.render(ph, state, now)
+            last_draw = now
+        if not moved:
+            time.sleep(0.15)
+    cv.render(ph, state, time.monotonic())
+
+    if state["done"]:
+        logbook.save_run(
+            article_id,
+            pipeline_key=cfg.pipeline,
+            prompt_key=cfg.prompt,
+            model=cfg.model,
+            output=state["done"]["output"],
+            processing_time_s=state["done"]["elapsed_s"],
+        )
+        if logbook.is_configured() and logbook.last_error():
+            st.caption(f"기록 실패 (결과에는 영향 없음): {logbook.last_error()}")

column_view.py

@@ -0,0 +1,356 @@
+"""교열 진행·결과 한 열을 그리는 화면 조각 (Streamlit) - 로컬 3종 비교 앱(`proofread-demo/compare_app.py`)과 같은 모양.
+
+기다리는 동안 "뒤에서 무엇이 진행되는지"가 보이도록:
+  - 요약 3칸(소요 · 적용 · 확인 필요)과 단계 스테퍼(끝난 단계 ✓ 소요 시간 · 진행 중 ● 경과/보통 N초 · 대기 ○)
+  - 단계가 끝날 때마다 본문 하이라이트·수정 카드가 그 자리에서 쌓인다
+  - 카드·하이라이트는 결과 본문에 남은 변경만 보인다(FT 가 고치고 기사 검토가 원문으로 되돌린 것은 둘 다 뺀다)
+이벤트 모양은 `runner.start_proofread` 를 따른다.
+"""
+
+from __future__ import annotations
+
+import difflib
+import html
+import time
+from typing import Any
+
+import streamlit as st
+
+# 화면에 보일 단계. (표시 이름, 그 단계가 끝났다고 보는 스텝 이름, 보통 걸리는 초)
+STAGES = [
+    ("표기 사전 적용", "vocabulary_sub_pre", 0.1),
+    ("교열 모델(FT) 문단별", "proofread", 1),
+    ("기사 전체 검토 (Opus 1회)", "review", 7),
+    ("FT 교정 확인", "revert_ft", 0.1),
+    ("사실·숫자·문맥 교정 적용", "apply_review", 0.1),
+    ("마무리 규칙", "post_process", 0.1),
+]
+# 교정 목록을 적용하는 스텝: (목록을 낸 스텝, 숫자 가드, 삭제 가드 비율) - 카드 상태를 적용 스텝과 같은 가드로 계산한다
+LIST_CARDS = {"apply_review": ("review", False, 0.6)}
+# FT 변경 되돌림: (되돌림 스텝, 변경 목록 스텝, 판정 스텝)
+REVERTS = ("revert_ft", "ft_hunks", "review")
+
+STAGE_COLORS = [
+    "rgba(120,120,120,.25)",
+    "rgba(70,130,220,.28)",
+    "rgba(60,170,90,.28)",
+    "rgba(240,150,40,.32)",
+    "rgba(170,90,200,.28)",
+    "rgba(120,120,120,.25)",
+]
+CAT_KO = {
+    "spelling": "맞춤법",
+    "spacing": "띄어쓰기·사이시옷",
+    "grammar": "조사·호응",
+    "context": "문맥 낱말",
+    "omission": "누락",
+    "in-article": "기사 안 불일치",
+    "inconsistency": "기사 안 불일치",
+    "fact": "사실 오기",
+    "calc": "숫자 검산",
+    "word": "문맥 낱말",
+    "unit": "단위·수치 모순",
+}
+CSS = """
+<style>
+.pane{border:1px solid rgba(128,128,128,.35);border-radius:8px;padding:12px 14px;line-height:1.95;font-size:.98rem;min-height:120px}
+.shimmer{height:4px;border-radius:2px;margin:6px 0 10px;background:linear-gradient(90deg,rgba(128,128,128,.15) 25%,rgba(128,128,128,.45) 50%,rgba(128,128,128,.15) 75%);background-size:200% 100%;animation:sh 1.2s linear infinite}
+@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
+.stage{font-size:.9rem;margin:2px 0}
+.card{border:1px solid rgba(128,128,128,.3);border-radius:6px;padding:6px 10px;margin-bottom:6px;font-size:.9rem}
+.muted{color:gray;font-size:.82rem}
+.stats{display:flex;gap:8px;margin:4px 0 8px}
+.stat{flex:1;border:1px solid rgba(128,128,128,.3);border-radius:6px;padding:6px 8px;text-align:center}
+.stat .k{font-size:.72rem;color:gray}.stat .v{font-size:1.05rem;font-weight:700}
+.status{min-height:30px;margin-bottom:6px}
+.chip{display:inline-block;font-size:.75rem;padding:1px 8px;border-radius:10px;margin-left:6px;font-weight:600}
+.ok{background:rgba(60,170,90,.22);color:#1e7d3a}
+.chk{background:rgba(240,170,40,.28);color:#8a5a00}
+.rej{background:rgba(128,128,128,.22);color:#555}
+</style>
+"""
+
+NL = "\n"  # 줄바꿈을 어절 하나로 다뤄 diff·하이라이트가 입력의 줄 구조를 보존하게 한다
+
+
+def tokenize(text: str) -> list[str]:
+    """어절 + 줄바꿈 토큰. 빈 줄은 NL 토큰이 연속으로 남아 문단 간격이 유지된다."""
+    out: list[str] = []
+    for line in text.split("\n"):
+        out.extend(line.split())
+        out.append(NL)
+    return out[:-1]
+
+
+def _norm(s: str) -> str:
+    return " ".join(s.split())
+
+
+# ───────────────────────── 상태 ─────────────────────────
+def new_state(original: str) -> dict[str, Any]:
+    return {
+        "original": original,
+        "stage_i": 0,
+        "stage_done_at": {},
+        "tokens": None,
+        "last_text": None,
+        "cards": [],
+        "log": "대기 중",
+        "done": None,
+        "error": None,
+        "started": time.monotonic(),
+    }
+
+
+def _label_tokens(state: dict, new_text: str, stage_i: int) -> None:
+    """원문 어절에 '어느 단계에서 바뀌었나' 라벨을 누적한다. 원문과 같아진 어절은 라벨을 지운다."""
+    if state["tokens"] is None:
+        state["tokens"] = [(t, -1) for t in tokenize(state["last_text"])]
+    old = [t for t, _ in state["tokens"]]
+    new = tokenize(new_text)
+    sm = difflib.SequenceMatcher(a=old, b=new, autojunk=False)
+    out: list[tuple[str, int]] = []
+    for op, i1, i2, j1, j2 in sm.get_opcodes():
+        out.extend(state["tokens"][i1:i2] if op == "equal" else ((t, stage_i) for t in new[j1:j2]))
+    orig = tokenize(state["original"])
+    net = difflib.SequenceMatcher(a=orig, b=[t for t, _ in out], autojunk=False)
+    for op, _i1, _i2, j1, j2 in net.get_opcodes():
+        if op == "equal":
+            out[j1:j2] = [(t, -1) for t, _ in out[j1:j2]]
+    state["tokens"] = out
+    state["last_text"] = new_text
+
+
+def _item_status(
+    item: dict, text_before: str, protect_digits: bool, max_shrink: float | None
+) -> str:
+    from solar_eval.pipelines.corrections import apply_corrections
+
+    _, rep = apply_corrections(
+        text_before, [item], max_items=1, protect_digits=protect_digits, max_shrink=max_shrink
+    )
+    if rep.applied:
+        return "적용"
+    if rep.skipped_protected:
+        return "거부 (숫자·삭제 가드)"
+    if rep.skipped_ambiguous or rep.skipped_not_found:
+        return "확인 필요"
+    return "무효"
+
+
+def _diff_card(stage: int, before: str, after: str) -> dict:
+    spacing = "".join(before.split()) == "".join(after.split())
+    return {
+        "stage": stage,
+        "before": before,
+        "after": after,
+        "cat": "띄어쓰기" if spacing else "",
+        "status": "적용",
+        "evidence": "",
+    }
+
+
+def _add_card(state: dict, card: dict) -> None:
+    """카드를 더한다. 앞 단계의 적용 카드를 그대로 되돌리는 변경이면 둘 다 지운다(결과적으로 바뀐 것이 없다)."""
+    if card["status"] == "적용":
+        for i, c in enumerate(state["cards"]):
+            if (
+                c["status"] == "적용"
+                and _norm(c["before"]) == _norm(card["after"])
+                and _norm(c["after"]) == _norm(card["before"])
+            ):
+                del state["cards"][i]
+                return
+    state["cards"].append(card)
+
+
+def _drop_reverted(state: dict, ev: dict) -> None:
+    """기사 검토가 원문으로 되돌린 FT 변경은 카드에서 지운다."""
+    _step, hunks_from, judge_from = REVERTS
+    decision = ev["json"].get(judge_from) or {}
+    by_id = {int(h["id"]): h for h in ev["hunks"].get(hunks_from) or []}
+    for raw in decision.get("revert") or []:
+        h = by_id.get(int(raw)) if str(raw).isdigit() else None
+        if h is None:
+            continue
+        pair = (_norm(h["before"]), _norm(h["after"]))
+        state["cards"] = [
+            c
+            for c in state["cards"]
+            if not (c["status"] == "적용" and (_norm(c["before"]), _norm(c["after"])) == pair)
+        ]
+
+
+def absorb(state: dict, ev: dict) -> None:
+    """이벤트 하나를 상태에 반영한다. 단계 완료 판정·카드·하이라이트·로그."""
+    if ev["kind"] == "error":
+        state["error"] = ev["error"]
+        state["log"] = "실패"
+        return
+    if ev["kind"] == "done":
+        state["done"] = ev
+        state["log"] = f"완료 - {ev['elapsed_s']:.1f}초"
+        return
+    step, text = ev["step"], ev["text"]
+    stage_steps = [s[1] for s in STAGES]
+    si = state["stage_i"]  # 이 스텝은 다음 미완 단계에 속한다
+    if state["last_text"] is None:
+        state["last_text"] = state["original"]
+    pre_text = state["last_text"]
+    list_card = LIST_CARDS.get(step)
+    reverted = False
+    if list_card and list_card[0] in ev["corrections"]:
+        corr_key, protect_digits, max_shrink = list_card
+        for it in ev["corrections"][corr_key]:
+            cat = str(it.get("category", ""))
+            _add_card(
+                state,
+                {
+                    "stage": si,
+                    "before": str(it.get("original", "")),
+                    "after": str(it.get("corrected", "")),
+                    "cat": CAT_KO.get(cat, cat),
+                    "status": _item_status(it, pre_text, protect_digits, max_shrink),
+                    "evidence": str(it.get("evidence", "")),
+                },
+            )
+    elif step == REVERTS[0]:
+        _drop_reverted(state, ev)
+        reverted = True
+    elif ev["changes"] and not list_card:
+        for b, a in ev["changes"]:
+            _add_card(state, _diff_card(si, b, a))
+    if text != pre_text or state["tokens"] is None:
+        _label_tokens(state, text, si)
+    if step in stage_steps:
+        idx = stage_steps.index(step)
+        state["stage_done_at"][idx] = ev["elapsed_s"]
+        state["stage_i"] = idx + 1
+        n = sum(c["stage"] == idx for c in state["cards"])
+        n_chk = sum(c["stage"] == idx and c["status"] == "확인 필요" for c in state["cards"])
+        extra = (
+            (f" - 제안 {n}건" + (f" (확인 필요 {n_chk})" if n_chk else ""))
+            if n
+            else " - 고칠 곳 없음"
+        )
+        if reverted:
+            extra = ""  # 확인 단계는 지운 카드 수를 내세우지 않는다
+        state["log"] = f"방금: {STAGES[idx][0]} 완료{extra}"
+
+
+# ───────────────────────── 렌더 ─────────────────────────
+def _render_text(state: dict) -> str:
+    toks = state["tokens"] or [(t, -1) for t in tokenize(state["original"])]
+    parts: list[str] = []
+    run: list[str] = []
+    cur = -1
+
+    def flush() -> None:
+        if run:
+            seg = html.escape(" ".join(run))
+            parts.append(
+                seg
+                if cur < 0
+                else f'<span style="background:{STAGE_COLORS[cur % len(STAGE_COLORS)]};border-radius:3px">{seg}</span>'
+            )
+            run.clear()
+
+    for t, s in toks + [("", -2)]:
+        if t == NL:  # 입력의 줄바꿈을 그대로 - 빈 줄은 <br> 두 번
+            flush()
+            parts.append("<br>")
+            continue
+        if s != cur:
+            flush()
+            cur = s
+        if t:
+            run.append(t)
+    return (
+        " ".join(parts).replace(" <br> ", "<br>").replace("<br> ", "<br>").replace(" <br>", "<br>")
+    )
+
+
+def _cards_html(state: dict) -> str:
+    cards = [c for c in state["cards"] if _norm(c["before"]) != _norm(c["after"])]
+    if not cards:
+        return ""
+    parts = []
+    for c in cards:
+        color = STAGE_COLORS[c["stage"] % len(STAGE_COLORS)]
+        if c["status"] == "적용":
+            cls, label = "ok", "✓ 적용"
+        elif c["status"] == "확인 필요":
+            cls, label = "chk", "확인 필요"
+        else:
+            cls, label = "rej", c["status"]
+        ev_html = (
+            f"<div class='muted'>근거: {html.escape(c['evidence'])}</div>" if c["evidence"] else ""
+        )
+        parts.append(
+            f"<div class='card' style='border-left:5px solid {color}'><span class='muted'>"
+            f"{STAGES[c['stage']][0]}{' · ' + c['cat'] if c['cat'] else ''}</span>"
+            f"<span class='chip {cls}'>{label}</span><br>"
+            f"<s>{html.escape(c['before'])}</s> → <b>{html.escape(c['after'])}</b>{ev_html}</div>"
+        )
+    return f"<div class='muted' style='margin-top:6px'>제안 {len(cards)}건</div>" + "".join(parts)
+
+
+def render(ph: Any, state: dict, now: float) -> None:
+    """왼쪽: 요약 3칸 · 단계 스테퍼 · 상태 줄 / 오른쪽: 하이라이트 본문 · 수정 카드."""
+    elapsed = now - state["started"]
+    expected = sum(s[2] for s in STAGES)
+    with ph.container():
+        left, right = st.columns([2, 3], gap="large")
+        with left:
+            n_ok = sum(c["status"] == "적용" for c in state["cards"])
+            n_chk = sum(c["status"] == "확인 필요" for c in state["cards"])
+            if state["error"]:
+                took = "실패"
+            elif state["done"]:
+                took = f"{state['done']['elapsed_s']:.1f}초"
+            else:
+                took = f"{elapsed:.0f}초…"
+            st.markdown(
+                "<div class='stats'>"
+                f"<div class='stat'><div class='k'>소요</div><div class='v'>{took}</div></div>"
+                f"<div class='stat'><div class='k'>적용</div><div class='v'>{n_ok}</div></div>"
+                f"<div class='stat'><div class='k'>확인 필요</div><div class='v'>{n_chk}</div></div>"
+                "</div>",
+                unsafe_allow_html=True,
+            )
+            lines = []
+            for i, (name, _step, typical) in enumerate(STAGES):
+                prev = state["stage_done_at"].get(i - 1, 0.0)
+                if i in state["stage_done_at"]:
+                    lines.append(
+                        f"<div class='stage'>✓ {name} <span class='muted'>({state['stage_done_at'][i] - prev:.1f}초)</span></div>"
+                    )
+                elif i == state["stage_i"] and not state["done"] and not state["error"]:
+                    lines.append(
+                        f"<div class='stage'>● <b>{name}</b> <span class='muted'>진행 중 {elapsed - prev:.0f}초 · 보통 {typical:.0f}초</span></div>"
+                    )
+                else:
+                    lines.append(f"<div class='stage muted'>○ {name}</div>")
+            st.markdown("".join(lines), unsafe_allow_html=True)
+            if state["error"]:
+                st.markdown(
+                    f"<div class='status' style='color:#b00020'>실패: {html.escape(state['error'])}</div>",
+                    unsafe_allow_html=True,
+                )
+            elif state["done"]:
+                st.markdown(
+                    f"<div class='status' style='color:#1e7d3a'>완료 {state['done']['elapsed_s']:.1f}초</div>",
+                    unsafe_allow_html=True,
+                )
+            else:
+                msg = state["log"]
+                if elapsed > expected * 1.5 + 5:
+                    msg += f" · 평소({expected:.0f}초)보다 오래 걸립니다 - API 대기 중일 수 있습니다. 결과는 그대로 도착합니다."
+                st.markdown(
+                    f"<div class='status muted'>{elapsed:.0f}초 경과 · {msg}<div class='shimmer'></div></div>",
+                    unsafe_allow_html=True,
+                )
+        with right:
+            st.markdown(f"<div class='pane'>{_render_text(state)}</div>", unsafe_allow_html=True)
+            # 카드는 한 덩어리 HTML 로 그린다 - 카드마다 st.markdown 을 부르면 카드가 줄었을 때 지난 렌더의 카드가 남는다
+            st.markdown(_cards_html(state), unsafe_allow_html=True)

runner.py

@@ -19,8 +19,10 @@ config 자산(파이프라인 yaml·프롬프트·치환 사전)은
 from __future__ import annotations
 
 import asyncio
+import difflib
+import queue
+import threading
 import time
-from collections.abc import Callable
 from dataclasses import dataclass
 from pathlib import Path
 from typing import Any
@@ -55,9 +57,6 @@ CONFIG = Config(
 #: 필요한 키. 기사 검토(Opus)가 Timely 를 거친다.
 REQUIRED_KEYS = ("UPSTAGE_API_KEY", "TIMELY_API_KEY")
 
-# (event, index, total, step_name) - 스텝이 끝날 때마다 "done" 으로 불린다
-StepCallback = Callable[[str, int, int, str], None]
-
 
 def find_config_dir() -> Path:
     """파이프라인 yaml 을 실제로 가진 자산 루트. Space 번들이 레포보다 먼저다."""
@@ -97,49 +96,76 @@ def build_pipeline() -> Any:
     )
 
 
-def step_names(pipeline: Any) -> list[str]:
-    """UI 가 진행 표시를 미리 그릴 수 있게 스텝 이름을 순서대로."""
-    return [step.name for step in pipeline.steps]
+def word_changes(before: str, after: str) -> list[tuple[str, str]]:
+    """어절 diff 로 (바뀌기 전, 바뀐 후) 쌍. 규칙·재작성 스텝의 변경을 카드로 만들 때 쓴다."""
+    a, b = before.split(), after.split()
+    sm = difflib.SequenceMatcher(a=a, b=b, autojunk=False)
+    return [
+        (" ".join(a[i1:i2]), " ".join(b[j1:j2]))
+        for op, i1, i2, j1, j2 in sm.get_opcodes()
+        if op != "equal"
+    ]
 
 
-async def _run_async(pipeline: Any, text: str, on_step: StepCallback | None) -> dict[str, Any]:
+async def _run_async(pipeline: Any, text: str, events: queue.Queue) -> None:
     from solar_eval.models.sample import EvalSample
     from solar_eval.providers import INFERENCE_ROUTES, RoutedProvider
     from solar_eval.providers.upstage import UpstageProvider
 
-    names = step_names(pipeline)
-
-    def hook(name: str, _sample: Any, _ctx: Any) -> None:
-        if on_step is not None:
-            on_step("done", names.index(name) + 1, len(names), name)
-
-    sample = EvalSample(input={"original": text})
-    provider = RoutedProvider(UpstageProvider(), {k: c() for k, c in INFERENCE_ROUTES.items()})
     start = time.monotonic()
-    # 평가 run 과 같은 조건: temp 0.0, reasoning off
-    result = await pipeline.run(
-        sample,
-        prompts="",
-        provider=provider,
-        model=CONFIG.model,
-        temperature=0.0,
-        max_tokens=8000,
-        reasoning_effort=None,
-        on_step=hook,
-    )
-    return {
-        "output": result.output,
-        "usage": result.artifacts.get("usage", {}),
-        "elapsed_s": time.monotonic() - start,
-        "pipeline_key": CONFIG.pipeline,
-        "prompt_key": CONFIG.prompt,
-        "model": CONFIG.model,
-    }
-
-
-def run_proofread(pipeline: Any, text: str, on_step: StepCallback | None = None) -> dict[str, Any]:
-    """텍스트 1건 교열. {output, usage, elapsed_s, pipeline_key, prompt_key, model}.
-
-    `on_step` 은 스텝이 끝날 때마다 ("done", 몇 번째, 전체, 스텝 이름) 으로 불린다(UI 진행 표시).
+    prev = {"text": text}
+
+    def hook(name: str, sample: Any, ctx: Any) -> None:
+        changes = word_changes(prev["text"], ctx.text)
+        prev["text"] = ctx.text
+        events.put(
+            {
+                "kind": "step",
+                "step": name,
+                "text": ctx.text,
+                "changes": changes,  # 이 스텝이 본문에 실제로 낸 변경(어절 쌍)
+                "corrections": dict(sample.artifacts.get("corrections") or {}),
+                "json": dict(
+                    sample.artifacts.get("json") or {}
+                ),  # 판정 스텝 결과 - 되돌림 번호·사유
+                "hunks": dict(sample.artifacts.get("hunks") or {}),  # diff_hunks 변경 목록
+                "elapsed_s": time.monotonic() - start,
+            }
+        )
+
+    try:
+        provider = RoutedProvider(UpstageProvider(), {k: c() for k, c in INFERENCE_ROUTES.items()})
+        # 평가 run 과 같은 조건: temp 0.0, reasoning off
+        result = await pipeline.run(
+            EvalSample(input={"original": text}),
+            prompts="",
+            provider=provider,
+            model=CONFIG.model,
+            temperature=0.0,
+            max_tokens=8000,
+            reasoning_effort=None,
+            on_step=hook,
+        )
+    except Exception as e:  # noqa: BLE001 - 데모 표면: 원인만 화면으로
+        events.put(
+            {
+                "kind": "error",
+                "error": f"{type(e).__name__}: {e}",
+                "elapsed_s": time.monotonic() - start,
+            }
+        )
+        return
+    events.put({"kind": "done", "output": result.output, "elapsed_s": time.monotonic() - start})
+
+
+def start_proofread(pipeline: Any, text: str) -> queue.Queue:
+    """텍스트 1건 교열을 스레드로 시작하고 이벤트 큐를 돌려준다.
+
+    이벤트: {"kind": "step", step, text, changes, corrections, json, hunks, elapsed_s} 를 스텝마다,
+    끝나면 {"kind": "done", output, elapsed_s} 또는 {"kind": "error", error, elapsed_s} 하나.
     """
-    return asyncio.run(_run_async(pipeline, text, on_step))
+    events: queue.Queue = queue.Queue()
+    threading.Thread(
+        target=lambda: asyncio.run(_run_async(pipeline, text, events)), daemon=True
+    ).start()
+    return events