Split Type B layouts from run-001 skeleton

scripts/run_from_artifacts.py

@@ -603,6 +603,16 @@ def _component_placeholder(title: str, summary: str) -> str:
     )
 
 
+def _type_b_body_shell(inner_html: str) -> str:
+    return (
+        '<div style="width:calc(153.85% + 18px); max-width:none; margin-right:calc(-53.85% - 18px); height:100%; '
+        'box-sizing:border-box; font-family:Segoe UI,sans-serif; color:#0f172a; '
+        'display:flex; flex-direction:column; gap:12px; position:relative; z-index:2;">'
+        f'{inner_html}'
+        '</div>'
+    )
+
+
 def _insert_button_into_card(card_html: str, button_html: str) -> str:
     idx = card_html.rfind('</div>')
     if idx == -1:
@@ -769,7 +779,7 @@ def _build_goal_image_stakeholder_layout(ctx: PipelineContext, raw: str) -> dict
     goal_card = (
         '<div style="background:#ffffff; border:1px solid #cbd5e1; border-radius:14px; padding:14px; box-sizing:border-box;">'
         f'<div style="font-size:16px; font-weight:900; color:#0f172a; margin-bottom:10px;">{goal_title}</div>'
-        '<div style="display:grid; grid-template-columns:1.12fr 0.88fr; gap:12px; align-items:stretch;">'
+        '<div style="display:grid; grid-template-columns:1.1fr 0.9fr; gap:12px; align-items:stretch;">'
         f'<div style="display:flex; flex-direction:column; gap:10px;">{goal_sections_html}</div>'
         '<div style="display:flex; flex-direction:column; gap:8px;">'
         f'{_relation_visual(image_src, image_caption).replace("height:220px", "height:250px")}'
@@ -800,35 +810,36 @@ def _build_goal_image_stakeholder_layout(ctx: PipelineContext, raw: str) -> dict
         '</div>'
     )
 
-    sidebar_parts = []
     if dx_cards:
-        for idx, (title, lines) in enumerate(dx_cards[:3], start=1):
-            items_html = ''.join(f'<li style="margin-bottom:4px;">{_trim_visible_copy(line, floor=120, ceiling=240)}</li>' for line in lines[:2])
-            sidebar_parts.append(
-                '<div style="background:#ffffff; border:1px solid #d7e2f0; border-radius:14px; padding:12px; display:flex; gap:10px; align-items:flex-start;">'
-                f'<div style="width:34px; height:34px; border-radius:999px; background:#2563eb; color:#fff; font-size:15px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0;">{idx}</div>'
-                '<div style="flex:1;">'
-                f'<div style="font-size:12px; font-weight:800; color:#0f172a; margin-bottom:6px;">{title}</div>'
-                f'<ul style="margin:0; padding-left:16px; font-size:9.5px; line-height:1.45; color:#334155;">{items_html}</ul>'
-                '</div></div>'
-            )
-    if not sidebar_parts:
-        sidebar_parts.append(_component_placeholder(support_title, _prefer_source_text(support_topic, 'No stakeholder detail available.')))
-    sidebar_html = (
-        '<div style="width:100%; height:100%; box-sizing:border-box; font-family:Segoe UI,sans-serif; display:flex; flex-direction:column; gap:10px;">'
-        f'<div style="font-size:12px; font-weight:800; color:#475569; padding:2px 6px;">{support_title}</div>'
-        + ''.join(sidebar_parts) +
-        f'<div style="display:flex; justify-content:flex-end;">{_popup_button("popup-stakeholder", "Stakeholder details")}</div>'
+        stakeholder_cards_html = ''.join(
+            '<div style="background:#ffffff; border:1px solid #d7e2f0; border-radius:14px; padding:12px; display:flex; gap:10px; align-items:flex-start;">'
+            f'<div style="width:34px; height:34px; border-radius:999px; background:#2563eb; color:#fff; font-size:15px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0;">{idx}</div>'
+            '<div style="flex:1;">'
+            f'<div style="font-size:12px; font-weight:800; color:#0f172a; margin-bottom:6px;">{title}</div>'
+            f'<ul style="margin:0; padding-left:16px; font-size:9.6px; line-height:1.46; color:#334155;">{"".join(f"<li style=\"margin-bottom:4px;\">{_trim_visible_copy(line, floor=120, ceiling=240)}</li>" for line in lines[:2])}</ul>'
+            '</div></div>'
+            for idx, (title, lines) in enumerate(dx_cards[:3], start=1)
+        )
+    else:
+        stakeholder_cards_html = _component_placeholder(support_title, _prefer_source_text(support_topic, 'No stakeholder detail available.'))
+
+    stakeholder_card = (
+        '<div style="background:#ffffff; border:1px solid #cbd5e1; border-radius:14px; padding:14px; box-sizing:border-box; height:100%; display:flex; flex-direction:column;">'
+        f'<div style="font-size:14px; font-weight:900; color:#0f172a; margin-bottom:10px;">{support_title}</div>'
+        f'<div style="display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; flex:1;">{stakeholder_cards_html}</div>'
+        f'<div style="display:flex; justify-content:flex-end; margin-top:10px;">{_popup_button("popup-stakeholder", "Stakeholder details")}</div>'
         '</div>'
     )
 
-    body_html = (
-        '<div style="width:100%; height:100%; box-sizing:border-box; font-family:Segoe UI,sans-serif; color:#0f172a; display:flex; flex-direction:column; gap:12px;">'
+    body_inner = (
         f'{goal_card}'
-        f'{process_card}'
-        f'{goal_popup}{process_popup}{stakeholder_popup}'
+        '<div style="display:grid; grid-template-columns:1.08fr 0.92fr; gap:12px; flex:1;">'
+        f'{process_card}{stakeholder_card}'
         '</div>'
+        f'{goal_popup}{process_popup}{stakeholder_popup}'
     )
+    body_html = _type_b_body_shell(body_inner)
+    sidebar_html = '<div style="width:100%; height:100%; opacity:0; pointer-events:none;"></div>'
     footer_html = '<div style="background:linear-gradient(135deg, #0b6ef3 0%, #17a6f5 100%); border-radius:10px; padding:10px 20px; text-align:center; color:#ffffff; width:100%; height:58px; display:flex; align-items:center; justify-content:center; box-sizing:border-box;">' + f'<div style="font-size:13px; font-weight:900; line-height:1.35;">{_trim_visible_copy(conclusion_text, floor=120, ceiling=320)}</div>' + '</div>'
     return {'body_html': body_html, 'sidebar_html': sidebar_html, 'footer_html': footer_html, 'reasoning': 'goal-image-stakeholder layout selected from document content traits'}
 
@@ -855,7 +866,7 @@ def _build_requirements_process_product_layout(ctx: PipelineContext, raw: str) -
     req_cards = ''.join(
         '<div style="background:#ffffff; border:1px solid #d7e2f0; border-top:5px solid {color}; border-radius:12px; padding:12px;">'
         '<div style="font-size:12px; font-weight:900; color:#0f172a; margin-bottom:8px;">{title}</div>'
-        '<ul style="margin:0; padding-left:16px; font-size:9.7px; line-height:1.48; color:#334155;">{items}</ul>'
+        '<ul style="margin:0; padding-left:16px; font-size:9.8px; line-height:1.5; color:#334155;">{items}</ul>'
         '</div>'.format(
             color=color,
             title=group['title'],
@@ -866,7 +877,7 @@ def _build_requirements_process_product_layout(ctx: PipelineContext, raw: str) -
         )
         for group, color in zip(req_groups, ['#2563eb', '#7c3aed', '#16a34a'])
     )
-    body_top = (
+    requirements_block = (
         '<div style="background:#ffffff; border:1px solid #cbd5e1; border-radius:14px; padding:14px; box-sizing:border-box;">'
         f'<div style="font-size:15px; font-weight:900; color:#0f172a; margin-bottom:10px;">{req_title}</div>'
         f'<div style="display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px;">{req_cards}</div>'
@@ -877,7 +888,7 @@ def _build_requirements_process_product_layout(ctx: PipelineContext, raw: str) -
     process_cards = ''.join(
         '<div style="background:#f8fafc; border:1px solid #d7e2f0; border-radius:12px; padding:12px;">'
         '<div style="font-size:11px; font-weight:800; color:#1e3a8a; margin-bottom:6px;">{title}</div>'
-        '<ul style="margin:0; padding-left:16px; font-size:9.7px; line-height:1.48; color:#334155;">{items}</ul>'
+        '<ul style="margin:0; padding-left:16px; font-size:9.8px; line-height:1.5; color:#334155;">{items}</ul>'
         '</div>'.format(
             title=group['title'],
             items=''.join(
@@ -887,8 +898,8 @@ def _build_requirements_process_product_layout(ctx: PipelineContext, raw: str) -
         )
         for group in process_groups
     )
-    body_bottom = (
-        '<div style="background:#ffffff; border:1px solid #cbd5e1; border-radius:14px; padding:14px; box-sizing:border-box; flex:1;">'
+    process_block = (
+        '<div style="background:#ffffff; border:1px solid #cbd5e1; border-radius:14px; padding:14px; box-sizing:border-box; height:100%;">'
         f'<div style="font-size:14px; font-weight:900; color:#0f172a; margin-bottom:10px;">{process_title}</div>'
         f'<div style="display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px;">{process_cards}</div>'
         f'<div style="display:flex; justify-content:flex-end; margin-top:10px;">{_popup_button("popup-process", "Process details")}</div>'
@@ -898,7 +909,7 @@ def _build_requirements_process_product_layout(ctx: PipelineContext, raw: str) -
     product_cards = ''.join(
         '<div style="background:#ffffff; border:1px solid #d7e2f0; border-radius:12px; padding:12px;">'
         '<div style="font-size:11px; font-weight:800; color:#0f172a; margin-bottom:6px;">{title}</div>'
-        '<ul style="margin:0; padding-left:16px; font-size:9.7px; line-height:1.48; color:#334155;">{items}</ul>'
+        '<ul style="margin:0; padding-left:16px; font-size:9.8px; line-height:1.5; color:#334155;">{items}</ul>'
         '</div>'.format(
             title=group['title'],
             items=''.join(
@@ -908,21 +919,23 @@ def _build_requirements_process_product_layout(ctx: PipelineContext, raw: str) -
         )
         for group in product_groups
     )
-    sidebar_html = (
-        '<div style="width:100%; height:100%; box-sizing:border-box; font-family:Segoe UI,sans-serif; display:flex; flex-direction:column; gap:10px;">'
-        f'<div style="font-size:12px; font-weight:800; color:#475569; padding:2px 6px;">{product_title}</div>'
-        f'{product_cards}'
-        f'<div style="display:flex; justify-content:flex-end;">{_popup_button("popup-product", "Product details")}</div>'
+    product_block = (
+        '<div style="background:#ffffff; border:1px solid #cbd5e1; border-radius:14px; padding:14px; box-sizing:border-box; height:100%;">'
+        f'<div style="font-size:14px; font-weight:900; color:#0f172a; margin-bottom:10px;">{product_title}</div>'
+        f'<div style="display:grid; grid-template-columns:1fr; gap:10px;">{product_cards}</div>'
+        f'<div style="display:flex; justify-content:flex-end; margin-top:10px;">{_popup_button("popup-product", "Product details")}</div>'
         '</div>'
     )
 
-    body_html = (
-        '<div style="width:100%; height:100%; box-sizing:border-box; font-family:Segoe UI,sans-serif; color:#0f172a; display:flex; flex-direction:column; gap:12px;">'
-        f'{body_top}'
-        f'{body_bottom}'
-        f'{req_popup}{process_popup}{product_popup}'
+    body_inner = (
+        f'{requirements_block}'
+        '<div style="display:grid; grid-template-columns:1.06fr 0.94fr; gap:12px; flex:1;">'
+        f'{process_block}{product_block}'
         '</div>'
+        f'{req_popup}{process_popup}{product_popup}'
     )
+    body_html = _type_b_body_shell(body_inner)
+    sidebar_html = '<div style="width:100%; height:100%; opacity:0; pointer-events:none;"></div>'
     footer_html = '<div style="background:linear-gradient(135deg, #0b6ef3 0%, #17a6f5 100%); border-radius:10px; padding:10px 20px; text-align:center; color:#ffffff; width:100%; height:58px; display:flex; align-items:center; justify-content:center; box-sizing:border-box;">' + f'<div style="font-size:13px; font-weight:900; line-height:1.35;">{_trim_visible_copy(conclusion_text, floor=120, ceiling=320)}</div>' + '</div>'
     return {'body_html': body_html, 'sidebar_html': sidebar_html, 'footer_html': footer_html, 'reasoning': 'requirements-process-product layout selected from document content traits'}