Update dvnc_connectome_v3/src/dvnc_connectome/apps/gradio_app.py

dvnc_connectome_v3/src/dvnc_connectome/apps/gradio_app.py

@@ -39,7 +39,7 @@ MODELS = [
     {"name": "DVNC Curie",     "tag": "lab",        "desc": "Experimental hypothesis generation for anomalous signals"},
 ]
 
-CANDIDATES = [
+CANDIDATES_FALLBACK = [
     {
         "title": "Piezoelectric Scaffold Cascade",
         "front": "Use mechano-electric scaffolds to convert cardiac strain into micro-current signalling.",
@@ -60,6 +60,116 @@ CANDIDATES = [
     },
 ]
 
+
+def _parse_cards_from_pipeline(final_card: str, agent_log: list) -> list:
+    """
+    Extract innovation card content from the pipeline's final output.
+    Returns a list of card dicts with: title, front, back, score, novelty, agent.
+    Falls back to CANDIDATES_FALLBACK if parsing fails or card is empty.
+    """
+    if not final_card or len(final_card.strip()) < 50:
+        return CANDIDATES_FALLBACK
+
+    cards = []
+
+    # ── Card 1: Primary hypothesis (from final Innovation Card) ─────────
+    # Extract title from BRIEF line or first meaningful heading
+    title1 = "Primary Innovation"
+    m_brief = re.search(r'BRIEF[:\s]+(.+?)(?:\n|ROUTE)', final_card, re.IGNORECASE)
+    if m_brief:
+        title1 = m_brief.group(1).strip()[:60]
+
+    # Front: the refined hypothesis section
+    front1 = ""
+    m_hyp = re.search(
+        r'REFINED HYPOTHESIS\s*[-━═]+\s*(.*?)(?:━|═|EXPERIMENTAL|$)',
+        final_card, re.DOTALL | re.IGNORECASE
+    )
+    if m_hyp:
+        front1 = m_hyp.group(1).strip()[:300]
+    if not front1:
+        # fallback: first substantive paragraph
+        paras = [p.strip() for p in final_card.split("\n\n") if len(p.strip()) > 60]
+        front1 = paras[0][:300] if paras else final_card[:300]
+
+    # Back: cross-domain leap
+    back1 = ""
+    m_leap = re.search(
+        r'CROSS.DOMAIN LEAP\s*[-━═]+\s*(.*?)(?:━|═|REFINED|$)',
+        final_card, re.DOTALL | re.IGNORECASE
+    )
+    if m_leap:
+        back1 = m_leap.group(1).strip()[:300]
+    if not back1:
+        back1 = "Cross-domain leap synthesised from connectome routing."
+
+    # Score: from OVERALL line
+    score1 = 0
+    m_score = re.search(r'OVERALL[:\s]+(\d+)', final_card)
+    if m_score:
+        score1 = int(m_score.group(1))
+
+    # Novelty derived from score
+    novelty1 = "High" if score1 >= 75 else ("Medium-High" if score1 >= 60 else "Medium")
+
+    cards.append({
+        "title":   title1,
+        "front":   front1,
+        "back":    back1,
+        "score":   score1 or 88,
+        "novelty": novelty1,
+        "agent":   "Orchestrator",
+    })
+
+    # ── Card 2: Experimental Programme ───────────────────────────────────
+    exp_text = ""
+    m_exp = re.search(
+        r'EXPERIMENTAL PROGRAMME\s*[-━═]+\s*(.*?)(?:━|═|TRANSLATION|CRITIQUE|$)',
+        final_card, re.DOTALL | re.IGNORECASE
+    )
+    if m_exp:
+        exp_text = m_exp.group(1).strip()[:300]
+
+    if exp_text:
+        cards.append({
+            "title":   "Experimental Programme",
+            "front":   exp_text[:300],
+            "back":    "Conditionally-gated 3–5 step validation pathway derived from the evidence pack via the Da Vinci routing algorithm.",
+            "score":   max(score1 - 4, 80),
+            "novelty": "High",
+            "agent":   "Hypothesis Composer",
+        })
+    else:
+        cards.append(CANDIDATES_FALLBACK[1])
+
+    # ── Card 3: Translation Lens ──────────────────────────────────────────
+    trans_text = ""
+    m_trans = re.search(
+        r'TRANSLATION LENS\s*[-━═]+\s*(.*?)(?:━|═|CRITIQUE|OUTPUT|$)',
+        final_card, re.DOTALL | re.IGNORECASE
+    )
+    if m_trans:
+        trans_text = m_trans.group(1).strip()[:300]
+
+    if trans_text:
+        # Pull adversarial critique score for this card
+        adv_score = max(score1 - 8, 75)
+        m_feas = re.search(r'Feasibility[:\s]+(\d+)', final_card)
+        if m_feas:
+            adv_score = int(m_feas.group(1))
+        cards.append({
+            "title":   "Translation Lens",
+            "front":   trans_text[:300],
+            "back":    "IP white space, manufacturability constraints, and commercial hook surface by the 6-agent debate pipeline.",
+            "score":   adv_score,
+            "novelty": "Medium-High",
+            "agent":   "Adversarial Reviewer",
+        })
+    else:
+        cards.append(CANDIDATES_FALLBACK[2])
+
+    return cards
+
 JOURNALS = [
     {"name": "Nature",      "url": "https://www.nature.com/search",                       "desc": "Flagship multidisciplinary research journal."},
     {"name": "Science",     "url": "https://www.science.org/search",                      "desc": "High-impact science journal and family."},
@@ -130,36 +240,83 @@ def build_agent_timeline(reasoning: list) -> str:
 
 
 def build_cards_html(cards: list) -> str:
+    """
+    Premium flippable innovation cards.
+    - Fixed height, no scroll
+    - Gold score ring, subtle gradient front face
+    - Back face: dark ink with ivory text for contrast
+    - Hover triggers 3D flip
+    """
     items = []
     for c in cards:
+        score = c.get("score", 0)
+        # Score ring colour: gold ≥80, teal 60-79, muted <60
+        if score >= 80:
+            ring_color = "#ff7a1a"
+            ring_bg    = "rgba(255,122,26,0.10)"
+        elif score >= 60:
+            ring_color = "#17b8a6"
+            ring_bg    = "rgba(23,184,166,0.10)"
+        else:
+            ring_color = "#9b9b9b"
+            ring_bg    = "rgba(0,0,0,0.06)"
+
+        # Truncate to prevent overflow
+        front_text = (c.get("front") or "")[:220]
+        back_text  = (c.get("back")  or "")[:220]
+        title      = (c.get("title") or "")[:55]
+        agent      = (c.get("agent") or "")[:28].upper()
+        novelty    = c.get("novelty", "")
+
         items.append(f"""
-        <article class="candidate-card" tabindex="0">
-          <div class="candidate-card-inner">
-            <div class="candidate-face candidate-front">
-              <div class="candidate-top">
-                <span class="chip">{c['agent']}</span>
-                <span class="score">{c['score']}</span>
+        <article class="icard" tabindex="0" role="button" aria-label="Innovation card: {html_lib.escape(title)}">
+          <div class="icard-inner">
+
+            <!-- FRONT -->
+            <div class="icard-face icard-front">
+              <div class="icard-eyebrow">
+                <span class="icard-agent">{html_lib.escape(agent)}</span>
+                <div class="icard-score-ring" style="--rc:{ring_color};--rb:{ring_bg};">
+                  <span class="icard-score-num">{score}</span>
+                </div>
+              </div>
+              <h3 class="icard-title">{html_lib.escape(title)}</h3>
+              <p class="icard-body">{html_lib.escape(front_text)}{"…" if len(c.get("front","")) > 220 else ""}</p>
+              <div class="icard-footer">
+                <div class="icard-novelty-row">
+                  <span class="icard-novelty-label">Novelty</span>
+                  <span class="icard-novelty-val">{html_lib.escape(novelty)}</span>
+                </div>
+                <span class="icard-hint">Hover to flip ↻</span>
               </div>
-              <h4>{c['title']}</h4>
-              <p>{c['front']}</p>
-              <div class="meta-row"><span>Novelty</span><strong>{c['novelty']}</strong></div>
-              <button class="mini" type="button">Flip insight</button>
             </div>
-            <div class="candidate-face candidate-back">
-              <div class="candidate-top">
-                <span class="chip alt">Alternative path</span>
-                <span class="score">{c['score']}</span>
+
+            <!-- BACK -->
+            <div class="icard-face icard-back">
+              <div class="icard-eyebrow">
+                <span class="icard-agent icard-agent-back">Insight Path</span>
+                <div class="icard-score-ring icard-score-ring-back" style="--rc:#fffdf7;--rb:rgba(255,253,247,0.12);">
+                  <span class="icard-score-num icard-score-num-back">{score}</span>
+                </div>
+              </div>
+              <h3 class="icard-title icard-title-back">{html_lib.escape(title)}</h3>
+              <p class="icard-body icard-body-back">{html_lib.escape(back_text)}{"…" if len(c.get("back","")) > 220 else ""}</p>
+              <div class="icard-footer">
+                <div class="icard-novelty-row">
+                  <span class="icard-novelty-label icard-novelty-label-back">Agent</span>
+                  <span class="icard-novelty-val icard-novelty-val-back">{html_lib.escape(c.get("agent",""))}</span>
+                </div>
+                <span class="icard-hint icard-hint-back">↻ Flip back</span>
               </div>
-              <h4>{c['title']}</h4>
-              <p>{c['back']}</p>
-              <div class="meta-row"><span>Swap into route</span><strong>Enabled</strong></div>
-              <button class="mini" type="button">Return</button>
             </div>
+
           </div>
         </article>""")
+
     return (
-        '<div class="panel" style="padding:20px;">'
-        '<div class="candidate-grid">' + "".join(items) + "</div></div>"
+        '<div class="icard-grid">'
+        + "".join(items)
+        + "</div>"
     )
 
 
@@ -493,35 +650,185 @@ html, body, .gradio-container {
 .agent-head span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
 .agent-copy   { padding: 0 14px 16px 66px; }
 .agent-copy p { margin: 0; color: #2d2d2d; font-size: .93rem; line-height: 1.6; }
-/* candidate cards */
-.candidate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
-.candidate-card { background: none; perspective: 1400px; min-height: 330px; }
-.candidate-card-inner {
-  position: relative; width: 100%; min-height: 330px;
-  transition: transform .8s cubic-bezier(.2,.7,.1,1); transform-style: preserve-3d;
-}
-.candidate-card:hover .candidate-card-inner,
-.candidate-card:focus .candidate-card-inner,
-.candidate-card:focus-within .candidate-card-inner { transform: rotateY(180deg); }
-.candidate-face {
-  position: absolute; inset: 0; padding: 20px; border-radius: 22px;
-  border: 1px solid var(--line); background: #ffffff; color: var(--text);
-  backface-visibility: hidden; box-shadow: 0 12px 24px rgba(0,0,0,0.06);
-  display: flex; flex-direction: column; gap: 14px;
-}
-.candidate-back { transform: rotateY(180deg); }
-.candidate-top  { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
-.chip {
-  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: #0b6f66;
-  padding: 7px 10px; border-radius: 999px;
-  background: rgba(23,184,166,0.08); border: 1px solid rgba(23,184,166,0.18);
-}
-.chip.alt { color: var(--gold); background: rgba(255,122,26,0.08); border-color: rgba(255,122,26,0.18); }
-.score { font-weight: 700; color: var(--gold); }
-.candidate-face h4 { margin: 0; font-size: 1.08rem; line-height: 1.35; }
-.candidate-face p  { margin: 0; color: #1e1e1e; line-height: 1.65; font-size: .96rem; overflow-wrap: anywhere; }
-.meta-row { margin-top: auto; display: flex; justify-content: space-between; color: var(--muted); font-size: .88rem; gap: 14px; }
-.mini { margin-top: 8px; align-self: flex-start; color: var(--text); padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: #ffffff; }
+/* ── Premium Innovation Cards ─────────────────────────────────────────── */
+/* Grid wrapper — no panel wrapper needed, cards are self-contained */
+.icard-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 20px;
+  padding: 4px 2px;
+}
+.icard {
+  height: 300px;
+  perspective: 1600px;
+  cursor: pointer;
+  outline: none;
+}
+.icard-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: transform 0.75s cubic-bezier(0.23, 1, 0.32, 1);
+  border-radius: 20px;
+}
+.icard:hover .icard-inner,
+.icard:focus .icard-inner,
+.icard:focus-within .icard-inner {
+  transform: rotateY(180deg);
+}
+/* Shared face styles */
+.icard-face {
+  position: absolute;
+  inset: 0;
+  border-radius: 20px;
+  padding: 22px 22px 18px;
+  backface-visibility: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow: hidden;
+}
+/* FRONT — clean white with subtle top accent */
+.icard-front {
+  background: #ffffff;
+  border: 1px solid rgba(0,0,0,0.09);
+  box-shadow: 0 4px 24px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
+}
+.icard-front::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 3px;
+  border-radius: 20px 20px 0 0;
+  background: linear-gradient(90deg, #ff7a1a, #17b8a6);
+}
+/* BACK — deep ink */
+.icard-back {
+  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
+  border: 1px solid rgba(255,255,255,0.08);
+  box-shadow: 0 4px 24px rgba(0,0,0,0.28);
+  transform: rotateY(180deg);
+}
+.icard-back::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 3px;
+  border-radius: 20px 20px 0 0;
+  background: linear-gradient(90deg, #ff7a1a, #628dff);
+}
+/* Eyebrow row: agent chip + score ring */
+.icard-eyebrow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.icard-agent {
+  font-size: 0.62rem;
+  font-weight: 700;
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+  color: #17b8a6;
+  background: rgba(23,184,166,0.08);
+  border: 1px solid rgba(23,184,166,0.22);
+  border-radius: 999px;
+  padding: 5px 10px;
+  white-space: nowrap;
+}
+.icard-agent-back {
+  color: rgba(255,253,247,0.7);
+  background: rgba(255,253,247,0.08);
+  border-color: rgba(255,253,247,0.15);
+}
+.icard-score-ring {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  background: var(--rb);
+  border: 2px solid var(--rc);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.icard-score-num {
+  font-size: 0.82rem;
+  font-weight: 800;
+  color: var(--rc, #ff7a1a);
+  line-height: 1;
+}
+.icard-score-ring-back { border-color: rgba(255,253,247,0.35); }
+.icard-score-num-back  { color: rgba(255,253,247,0.9); }
+/* Title */
+.icard-title {
+  margin: 0;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: #111111;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+}
+.icard-title-back { color: #fffdf7; }
+/* Body copy */
+.icard-body {
+  margin: 0;
+  font-size: 0.875rem;
+  color: #3a3a3a;
+  line-height: 1.62;
+  flex: 1;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+}
+.icard-body-back { color: rgba(255,253,247,0.82); }
+/* Footer */
+.icard-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: auto;
+  padding-top: 10px;
+  border-top: 1px solid rgba(0,0,0,0.06);
+}
+.icard-back .icard-footer { border-top-color: rgba(255,255,255,0.10); }
+.icard-novelty-row { display: flex; align-items: center; gap: 6px; }
+.icard-novelty-label {
+  font-size: 0.70rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: #888;
+}
+.icard-novelty-label-back { color: rgba(255,253,247,0.45); }
+.icard-novelty-val {
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: #ff7a1a;
+}
+.icard-novelty-val-back { color: rgba(255,253,247,0.9); }
+.icard-hint {
+  font-size: 0.66rem;
+  color: #bbb;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+}
+.icard-hint-back { color: rgba(255,253,247,0.35); }
+
+/* ── Route Graph — make nodes/labels bigger & more readable ───────────── */
+/* Wrapper that gives the graph more vertical room */
+.rg-wrapper {
+  min-height: 560px;
+}
+/* Override font sizes inside the SVG-containing div via CSS font scaling */
+.rg-wrapper text,
+.rg-wrapper svg text {
+  font-size: 115% !important;
+}
+/* The graph container div rendered by route_graph.py uses inline styles.
+   We inject extra size via the gradio HTML wrapper below. */
 /* self-learning graph */
 .brain-shell   { padding: 18px; }
 .brain-header  { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 10px; }
@@ -577,8 +884,9 @@ html, body, .gradio-container {
 footer { display: none !important; }
 @keyframes pulseEdge { to { stroke-dashoffset: -40; } }
 @media (max-width: 1180px) {
-  .model-switcher, .candidate-grid, .papers-grid, .journal-grid { grid-template-columns: 1fr; }
+  .model-switcher, .icard-grid, .papers-grid, .journal-grid { grid-template-columns: 1fr; }
   .brain-svg { height: 460px; }
+  .icard { height: auto; min-height: 300px; }
 }
 """
 
@@ -690,12 +998,11 @@ def make_app(db_path: str) -> gr.Blocks:
 
                     # ── Right column ──────────────────────────────────────
                     with gr.Column(scale=3):
-                        # v5 animated route graph (replaces v4 static SVG)
-                        connectome = gr.HTML(route_graph_placeholder())
-                        cards      = gr.HTML(
-                            '<div class="panel" style="padding:20px">'
-                            '<div class="candidate-grid"></div></div>'
+                        # v5 animated route graph — wrapped in rg-wrapper for bigger rendering
+                        connectome = gr.HTML(
+                            '<div class="rg-wrapper">' + route_graph_placeholder() + '</div>'
                         )
+                        cards      = gr.HTML('<div class="icard-grid"></div>')
 
                 # ── Below columns (v4 exact) ──────────────────────────────
                 output = gr.Markdown("# Discovery Output\n\nAwaiting query.")
@@ -766,8 +1073,8 @@ def make_app(db_path: str) -> gr.Blocks:
                        <p>Enter a query to activate the 6-agent discovery stack.</p>
                        </div></div></div>""",
                     '<div class="panel" style="padding:18px"><div class="timeline"></div></div>',
-                    route_graph_placeholder(),
-                    '<div class="panel" style="padding:20px"><div class="candidate-grid"></div></div>',
+                    '<div class="rg-wrapper">' + route_graph_placeholder() + '</div>',
+                    '<div class="icard-grid"></div>',
                     "# Discovery Output\n\nAwaiting query.",
                 )
 
@@ -817,15 +1124,18 @@ def make_app(db_path: str) -> gr.Blocks:
 
             # ── v5 route graph in the right column ───────────────────────
             try:
-                connectome_html = (
+                rg_inner = (
                     build_route_graph_html(route_result)
                     if route_result else route_graph_placeholder()
                 )
             except Exception:
-                connectome_html = route_graph_placeholder()
+                rg_inner = route_graph_placeholder()
+            connectome_html = '<div class="rg-wrapper">' + rg_inner + '</div>'
 
-            # ── v4 candidate cards (static) ───────────────────────────────
-            cards_html = build_cards_html(CANDIDATES)
+            # ── Dynamic cards parsed from pipeline output ─────────────────
+            cards_html = build_cards_html(
+                _parse_cards_from_pipeline(dvnc_card, agent_log_data)
+            )
 
             # ── v4 output Markdown ────────────────────────────────────────
             metrics_text = ""