@my-life-buddies/cli 0.2.0 → 0.4.0

package/resources/buddy-creator/scripts/widget_render_v1.py

@@ -0,0 +1,176 @@
+"""Deterministic, portable read-only prototypes. No supplied executable H5."""
+import hashlib
+import html
+import json
+from pathlib import Path
+
+import buddy_core as core
+
+CSS = '''*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font:400 16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#222;background:#fff}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:28px 20px 12px;font-weight:500}main{padding:12px 16px 100px}.bubble{background:#f1f3f4;border-radius:18px;padding:14px 16px;margin:12px 0;max-width:calc(100% - 36px);white-space:pre-wrap;overflow-wrap:anywhere}.user{margin-left:auto;background:#e5f6fc}.buddy{margin-left:32px}.chat-card{margin:16px 0 0 32px;border:1px solid #eee;border-radius:18px;padding:16px;max-width:calc(100% - 32px)}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:500;font-size:var(--title-size)}.chat-card p{margin:12px 0;white-space:pre-wrap;overflow-wrap:anywhere}.open{width:100%;background:#f1f3f4;border:0;border-radius:12px;padding:9px}.caption{color:#73777c;font-size:13px;margin-top:12px}.composer{position:fixed;bottom:20px;left:16px;right:16px;background:#f7f8f9;border:1px solid #eee;border-radius:14px;padding:12px;color:#767b80;font-size:14px}.overlay{position:fixed;inset:0;background:#0003;display:grid;place-items:center}.overlay[hidden],.detail[hidden]{display:none}.sheet{width:calc(100% - 32px);height:65%;background:#fff;border-radius:24px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 80px #0001}.sheet-head{display:flex;align-items:center;gap:12px;padding:16px;flex:none;border-bottom:1px solid #f1f1f1}.sheet-head h2{flex:1;text-align:center;overflow-wrap:anywhere}.close{border:1px solid #eee;background:#fff;border-radius:50%;width:36px;height:36px;flex:none}.spacer{width:36px}.scroll{overflow-y:auto;overscroll-behavior:contain;padding:16px;flex:1;min-height:0}.tabs,.filters{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 14px;flex:none}.tabs button,.filters button{flex:none;border:1px solid #eceff1;background:#f1f3f4;border-radius:28px;padding:10px 16px;font-size:16px}.tabs button[aria-pressed=true],.filters button[aria-pressed=true]{border:2px solid var(--accent);padding:9px 15px;font-weight:500}.section{margin:8px 0 22px}.section h3,summary{margin:0 0 12px;font-size:16px;font-weight:500}summary{cursor:pointer}.row{padding:10px 0;border-bottom:1px solid #f2f3f4;overflow-wrap:anywhere}.row-label{color:#777;margin-bottom:4px}.row-value{white-space:pre-wrap}.detail-open{border:0;background:#f1f3f4;border-radius:8px;padding:6px 10px;margin-top:8px;font-size:14px}.cards .row{padding:14px;border-radius:14px;background:#f7f8f9;margin-bottom:10px;border:0}.timeline .row{border-left:2px solid var(--accent);padding-left:16px;margin-left:4px;border-bottom:0}.detail{position:absolute;inset:0;background:#0003;display:grid;place-items:center}.detail-box{width:calc(100% - 32px);max-height:60%;overflow:auto;border-radius:20px;padding:20px;background:#fff;white-space:pre-wrap;overflow-wrap:anywhere}.detail-box button{float:right}.note{font-size:14px;color:#73777c;margin-top:20px}.screen-title{max-width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(prefers-reduced-motion:no-preference){button{transition:background .15s ease}}'''
+
+JS = '''"use strict";
+const data=JSON.parse(document.getElementById("prototype-data").textContent);
+const params=new URLSearchParams(location.search);
+const index=Math.max(0,data.states.findIndex(s=>s.id===params.get("state")));
+const sample=data.states[index], interactions=data.interactions;
+const make=(tag,text,cls)=>{const e=document.createElement(tag);if(text!==undefined)e.textContent=text;if(cls)e.className=cls;return e;};
+document.documentElement.style.setProperty("--accent",data.design.accent);
+document.documentElement.style.setProperty("--title-size",data.design.titleSize+"px");
+document.querySelector(".screen-title").textContent=data.name;
+const main=document.querySelector("main");
+main.append(make("div",sample.userMessage,"bubble user"),make("div",sample.buddyMessage,"bubble buddy"));
+const card=make("article",undefined,"chat-card");card.append(make("h1",data.name),make("p",sample.summary));
+const open=make("button","去查看","open");card.append(open,make("div","内容随对话更新","caption"));main.append(card);
+const overlay=document.querySelector(".overlay"),scroll=document.querySelector(".scroll"),detail=document.querySelector(".detail");
+document.querySelector(".sheet-head h2").textContent=data.name;
+scroll.classList.add(data.design.layout);
+let selected=interactions.includes("tabs")?sample.sections[0].id:"all";
+function render(){scroll.replaceChildren();
+ for(const mode of ["tabs","filter"]){if(!interactions.includes(mode))continue;
+ const nav=make("nav",undefined,mode==="tabs"?"tabs":"filters");nav.setAttribute("aria-label",mode==="tabs"?"切换阅读分组":"筛选已有内容");
+ const options=mode==="filter"?[{id:"all",title:"全部"},...sample.sections]:sample.sections;
+ for(const section of options){const b=make("button",section.title);b.setAttribute("aria-pressed",String(section.id===selected));b.onclick=()=>{selected=section.id;render();};nav.append(b);}scroll.append(nav);}
+ for(const section of sample.sections){if(selected!=="all"&&section.id!==selected)continue;
+ const group=make(interactions.includes("collapse")?"details":"section",undefined,"section");
+ if(group.tagName==="DETAILS")group.open=true;
+ group.append(make(group.tagName==="DETAILS"?"summary":"h3",section.title));
+ for(const row of section.rows){const cell=make("div",undefined,"row");cell.append(make("div",row.label,"row-label"),make("div",row.value,"row-value"));
+ if(row.detail){const b=make("button","查看说明","detail-open");b.onclick=()=>{document.querySelector(".detail-text").textContent=row.detail;detail.hidden=false;detail.querySelector("button").focus();detail.returnFocus=b;};cell.append(b);}group.append(cell);}scroll.append(group);}
+ scroll.append(make("p","如需修改内容，请回到对话中告诉搭子。","note"));}
+function closeDetail(){detail.hidden=true;if(detail.returnFocus)detail.returnFocus.focus();}
+function closeSheet(){closeDetail();overlay.hidden=true;open.focus();}
+open.onclick=()=>{overlay.hidden=false;overlay.querySelector("button").focus();};
+document.querySelector(".sheet-close").onclick=closeSheet;
+document.querySelector(".detail-close").onclick=closeDetail;
+document.addEventListener("keydown",e=>{if(e.key==="Escape"){if(!detail.hidden)closeDetail();else if(!overlay.hidden)closeSheet();}
+ if(e.key==="Tab"&&!overlay.hidden){const area=detail.hidden?document.querySelector(".sheet"):document.querySelector(".detail-box");const nodes=[...area.querySelectorAll("button,summary")].filter(n=>n.getClientRects().length);const first=nodes[0],last=nodes[nodes.length-1];if(e.shiftKey&&document.activeElement===first){e.preventDefault();last.focus();}else if(!e.shiftKey&&document.activeElement===last){e.preventDefault();first.focus();}}});
+render();overlay.hidden=params.get("view")!=="expanded";
+'''
+
+
+def _svg(data, sample, expanded):
+    """Export two annotated visual views per data state; HTML is the full scrollable view."""
+    d = data['design']
+    w, h = d['screenWidth'], d['screenHeight']
+    parts = ['<svg xmlns="http://www.w3.org/2000/svg" width="%s" height="%s" viewBox="0 0 %s %s"><rect width="100%%" height="100%%" fill="white"/><g font-family="-apple-system, sans-serif" font-size="16" fill="#222">' % (w, h, w, h)]
+    def rect(x, y, width, height, fill, radius=16):
+        parts.append('<rect x="%s" y="%s" width="%s" height="%s" rx="%s" fill="%s"/>' % (x, y, width, height, radius, fill))
+    def lines(text, x, y, width, limit=4, size=16, weight=400):
+        chars, current, measured = [], '', 0
+        for ch in text:
+            measure = size if ord(ch) > 127 else size * .55
+            if measured + measure > width or ch == '\n':
+                chars.append(current); current, measured = '', 0
+            if ch != '\n':
+                current += ch; measured += measure
+        if current:
+            chars.append(current)
+        if len(chars) > limit:
+            chars = chars[:limit]; chars[-1] = chars[-1][:-1] + '…'
+        for i, line in enumerate(chars):
+            parts.append('<text x="%s" y="%s" font-size="%s" font-weight="%s">%s</text>' % (x, y + i * (size + 8), size, weight, html.escape(line)))
+        return y + len(chars) * (size + 8)
+    lines('9:41', 24, 28, 70, 1, 14, 500)
+    lines(data['name'], 48, 73, w-96, 1, 16, 500)
+    rect(64, 106, w-80, 82, '#e5f6fc'); lines(sample['userMessage'], 80, 133, w-112, 2)
+    rect(48, 204, w-64, 106, '#f1f3f4'); lines(sample['buddyMessage'], 64, 230, w-96, 3)
+    rect(48, 326, w-64, 178, '#fafafa'); lines(data['name'], 64, 354, w-96, 1, d['titleSize'], 500)
+    lines(sample['summary'], 64, 386, w-96, 2)
+    rect(64, 442, w-96, 42, '#eff1f3', 10); lines('去查看', w/2-24, 469, 80, 1)
+    rect(16, h-80, w-32, 52, '#f6f7f8', 12); lines('在对话中告诉搭子你的修改', 32, h-48, w-64, 1, 14)
+    if expanded:
+        parts.append('<rect width="100%" height="100%" fill="#000" opacity=".18"/>')
+        height = h*.65; top = (h-height)/2
+        rect(16, top, w-32, height, '#fff', 24)
+        lines('×', 32, top+38, 28, 1, 20); lines(data['name'], 76, top+37, w-128, 1, d['titleSize'], 500)
+        parts.append('<defs><clipPath id="content"><rect x="32" y="%s" width="%s" height="%s"/></clipPath></defs><g clip-path="url(#content)">' % (top+64, w-64, height-100))
+        y = top+89
+        if 'tabs' in data['interactions'] or 'filter' in data['interactions']:
+            x=32
+            for section in sample['sections'][:3]:
+                rect(x, y-21, 84, 42, '#f1f3f4', 20); lines(section['title'], x+10, y+5, 64, 1); x+=92
+            y+=54
+        sections = sample['sections'][:1] if 'tabs' in data['interactions'] else sample['sections']
+        for section in sections:
+            y=lines(section['title'], 32, y, w-64, 2, 16, 500)+8
+            for row in section['rows']:
+                x, width = 32, w-64
+                if d['layout'] == 'cards':
+                    rect(32, y-18, w-64, 116 if row.get('detail') else 92, '#f7f8f9', 14)
+                    x, width, y = 46, w-92, y+4
+                elif d['layout'] == 'timeline':
+                    rect(36, y-16, 2, 84, d['accent'], 0)
+                    x, width = 52, w-84
+                parts.append('<g fill="#777">')
+                y=lines(row['label'], x, y, width, 1)+2
+                parts.append('</g>')
+                y=lines(row['value'], x, y, width, 2)
+                if row.get('detail'):
+                    y=lines('查看说明', x, y+4, width, 1, 14)
+                y+=22
+        parts.append('</g>')
+        lines('上下滚动阅读 · 修改请通过对话', 32, top+height-20, w-64, 1, 14)
+    parts.append('</g></svg>')
+    return ''.join(parts).encode('utf-8')
+
+
+def files(artifact, item=None):
+    data = artifact['data']
+    # The exact template contract travels with the prototype; callers supply the confirmed item.
+    item = item or artifact.get('renderItem')
+    core.require(item, 'WIDGET_RENDER_ITEM', '生成原型需要对应清单项。')
+    value = {**data, 'name': item['name'], 'interactions': item['readInteractions']}
+    raw_json = json.dumps(value, ensure_ascii=False).replace('<', '\\u003c').replace('>', '\\u003e').replace('&', '\\u0026')
+    page = '''<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>小挂件原型</title><link rel="stylesheet" href="style.css"></head><body><header><span>‹</span><span class="screen-title"></span><span>···</span></header><main></main><div class="composer">在对话中告诉搭子你的修改</div><div class="overlay" hidden><section class="sheet" role="dialog" aria-modal="true" aria-label="小挂件展开页"><div class="sheet-head"><button class="close sheet-close" aria-label="关闭小挂件">×</button><h2></h2><span class="spacer"></span></div><div class="scroll"></div></section><div class="detail" hidden><section class="detail-box" role="dialog" aria-modal="true" aria-label="只读详情"><button class="close detail-close" aria-label="关闭详情">×</button><p class="detail-text"></p></section></div></div><script type="application/json" id="prototype-data">''' + raw_json + '''</script><script src="app.js"></script></body></html>'''
+    result = {'index.html': page.encode('utf-8'), 'style.css': CSS.encode('utf-8'), 'app.js': JS.encode('utf-8')}
+    for sample in data['states']:
+        for view in ('chat', 'expanded'):
+            result[view+'-'+sample['id']+'.svg'] = _svg(value, sample, view == 'expanded')
+    return result
+
+
+def directory(workspace, artifact):
+    root = Path(workspace) / 'widget-assets'
+    path = root / artifact['hash']
+    core.require(re_full_hash(artifact['hash']) and not root.is_symlink() and not path.is_symlink(), 'WIDGET_ASSET_PATH', '小挂件资源目录无效。')
+    return path
+
+
+def re_full_hash(value):
+    return isinstance(value, str) and len(value) == 64 and all(c in '0123456789abcdef' for c in value)
+
+
+def render(workspace, state, artifact):
+    import widgets
+    item = next(i for i in widgets.items(state) if i['id'] == artifact['data']['widgetId'])
+    output = directory(workspace, artifact)
+    output.mkdir(parents=True, exist_ok=True)
+    from completion import _atomic
+    for name, raw in files(artifact, item).items():
+        core.require(not (output / name).is_symlink(), 'WIDGET_ASSET_PATH', '资源文件不能为符号链接。')
+        _atomic(output / name, raw)
+
+
+def asset_status(workspace, artifact, state=None):
+    if not artifact:
+        return {'pass': False, 'message': '原型尚未生成'}
+    try:
+        import widgets
+        state = state or core.load(workspace)
+        core.require(artifact['data'].get('rendererVersion') == 1, 'WIDGET_RENDERER_VERSION', '原型模板版本已变化，需要重新生成并确认设计。')
+        item = next(i for i in widgets.items(state) if i['id'] == artifact['data']['widgetId'])
+        core.require(widgets.item_hash(item) == artifact['data']['itemHash'], 'WIDGET_ITEM_STALE', '清单项已更新，需要重绘原型。')
+        output = directory(workspace, artifact)
+        expected = files(artifact, item)
+        for name, raw in expected.items():
+            path = output / name
+            core.require(not path.is_symlink() and path.read_bytes() == raw, 'WIDGET_ASSET_CHANGED', '原型资源缺失或被修改，请用 widget_render 恢复当前版本。', {'file': name})
+        return {'pass': True, 'message': '尺寸、字体、只读控件及两视图三态资源检查通过；内容和阅读体验由开发者单独验收。',
+                'files': [{'name': name, 'sha256': hashlib.sha256(raw).hexdigest()} for name, raw in expected.items()]}
+    except (core.BuddyError, OSError, StopIteration, KeyError, ValueError) as error:
+        return {'pass': False, 'message': str(error) or '当前资源不可用，请重新生成原型。'}
+
+
+def require_assets(workspace, state, artifact):
+    status = asset_status(workspace, artifact, state)
+    core.require(status['pass'], 'WIDGET_ASSETS_REQUIRED', status['message'])

package/resources/buddy-creator/scripts/widget_render_v2.py

@@ -0,0 +1,98 @@
+"""Composed read-only visual templates, sharing their HTML composition with SVG exports."""
+import html
+from pathlib import Path
+
+import buddy_core as core
+
+ASSETS = Path(__file__).resolve().parents[1] / 'assets/widget-v2'
+ICONS = {
+    'route': '<circle cx="6" cy="6" r="3"/><circle cx="18" cy="18" r="3"/><path d="M9 6h7a4 4 0 0 1 0 8H8a4 4 0 0 0 0 8"/>',
+    'ticket': '<path d="M3 5h18v5a2 2 0 0 0 0 4v5H3v-5a2 2 0 0 0 0-4Z"/><path d="M15 5v3m0 3v2m0 3v3"/>',
+    'wallet': '<path d="M20 8V5H6a3 3 0 0 0 0 6h15v9H5a3 3 0 0 1-3-3V8"/><path d="M21 12h-6v5h6"/><circle cx="17" cy="14.5" r=".5"/>',
+    'bag': '<rect x="4" y="7" width="16" height="14" rx="4"/><path d="M8 7V5a4 4 0 0 1 8 0v2M8 13h8m-8 4h5"/>',
+    'activity': '<path d="M3 12h4l3-7 4 14 3-7h4"/>',
+    'document': '<path d="M5 3h10l4 4v14H5Z"/><path d="M14 3v5h5M8 12h8m-8 4h5"/>',
+    'bed': '<path d="M3 19V8m18 11V8M3 15h18M5 15V6h14v9M7 10h4v5m2-5h4v5"/>',
+    'train': '<rect x="5" y="2" width="14" height="17" rx="5"/><path d="M5 10h14M8 19l-2 3m10-3 2 3M12 3v7"/><circle cx="9" cy="15" r="1"/><circle cx="15" cy="15" r="1"/>',
+    'coffee': '<path d="M3 9h13v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Zm13 1h2a3 3 0 0 1 0 6h-2M7 3v3m5-3v3"/>',
+    'pin': '<path d="M19 10c0 5-7 11-7 11S5 15 5 10a7 7 0 0 1 14 0Z"/><circle cx="12" cy="10" r="2"/>',
+    'check': '<path d="m5 12 4 4L19 6"/>',
+    'clock': '<circle cx="12" cy="12" r="9"/><path d="M12 6v6l4 2"/>',
+    'info': '<circle cx="12" cy="12" r="9"/><path d="M12 11v6m0-11v1"/>',
+    'arrow': '<path d="M4 12h15m-6-6 6 6-6 6"/>',
+    'chevron': '<path d="m9 5 7 7-7 7"/>',
+    'close': '<path d="m6 6 12 12M6 18 18 6"/>',
+    'signal': '<path d="M4 19v-4m5 4v-8m5 8V7m5 12V3"/>',
+    'battery': '<rect x="2" y="6" width="17" height="12" rx="3"/><path d="M22 10v4M5 9h11v6H5Z"/>',
+    'plus': '<path d="M12 4v16M4 12h16"/>',
+}
+
+def esc(value):
+    return html.escape(str(value), quote=True)
+
+def icon(name):
+    return '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" aria-hidden="true">' + ICONS.get(name, ICONS['document']) + '</svg>'
+
+def metrics(values, class_name):
+    cells = ''.join('<div class="metric"><span class="metric-label">'+esc(m['label'])+'</span><span class="metric-value">'+esc(m['value'])+'</span></div>' for m in values)
+    return '<div class="'+class_name+'" style="--metric-count:'+str(max(1,len(values)))+'">'+cells+'</div>' if values else ''
+
+def overview(sample):
+    value = sample['overview']
+    result = '<div class="overview"><p class="eyebrow">'+esc(value['eyebrow'])+'</p><h3 class="overview-title">'+esc(value['title'])+'</h3><p class="overview-subtitle">'+esc(value['subtitle'])+'</p>'
+    result += metrics(value['metrics'], 'overview-metrics')
+    if value.get('progress'):
+        p=value['progress']; percentage=p['value']/p['max']*100
+        result += '<div class="progress-track" role="img" aria-label="'+esc(p['label'])+' '+str(round(percentage,1))+'%"><div class="progress-fill" style="width:'+str(percentage)+'%"></div></div><p class="progress-caption">'+esc(p['label'])+'</p>'
+    return result+'</div>'
+
+def row_html(row, default_icon):
+    status=row.get('status'); tone=status['tone'] if status else ''
+    result='<div class="row '+tone+'"><span class="row-symbol">'+icon(row.get('icon',default_icon))+'</span><div class="row-content"><div class="row-label">'+esc(row['label'])+'</div><p class="row-value">'+esc(row['value'])+'</p>'
+    if row.get('caption'): result+='<p class="row-caption">'+esc(row['caption'])+'</p>'
+    if status: result+='<span class="status '+tone+'">'+esc(status['label'])+'</span>'
+    result+='</div>'
+    if row.get('detail'):
+        result+='<button class="detail-open" aria-label="查看说明：'+esc(row['label'])+'">'+icon('chevron')+'</button><span class="detail-copy" hidden="hidden">'+esc(row['detail'])+'</span>'
+    return result+'</div>'
+
+def screen(data,item,sample,expanded=False):
+    design=data['design']; interactions=item['readInteractions']; ov=sample['overview']
+    selected=sample['sections'][0]['id'] if 'tabs' in interactions else 'all'
+    result='<div class="screen '+design['layout']+'" data-state="'+sample['id']+'" style="--accent:'+design['accent']+';--title-size:'+str(design['titleSize'])+'px">'
+    result+='<div class="statusbar"><span>9:41</span><span class="device">'+icon('signal')+icon('battery')+'</span></div>'
+    result+='<header class="chat-header"><span class="back">‹</span><span class="header-mark">'+esc(design['conversationTitle'][:1])+'</span><div class="buddy-identity"><strong>'+esc(design['conversationTitle'])+'</strong><small>随对话整理，随时回来查看</small></div><span>···</span></header>'
+    result+='<main class="chat-body"><p class="chat-date">对话示例</p><div class="message user"><div class="bubble">'+esc(sample['userMessage'])+'</div></div><div class="message assistant"><span class="avatar">'+esc(design['conversationTitle'][:1])+'</span><div class="bubble">'+esc(sample['buddyMessage'])+'</div></div>'
+    result+='<article class="chat-card"><div class="card-top"><span class="identity-icon">'+icon(design['icon'])+'</span><div><p class="card-kind">'+esc(ov['eyebrow'])+'</p><h1>'+esc(item['name'])+'</h1></div></div><p class="card-summary">'+esc(sample['summary'])+'</p>'
+    result+=metrics(ov['metrics'][:2],'card-meta')+'<button class="open-sheet"><span>去查看</span>'+icon('arrow')+'</button><div class="card-foot">'+icon('clock')+'<span>内容随对话更新</span></div></article></main>'
+    result+='<div class="composer">'+icon('plus')+'<span>修改请在对话中告诉搭子</span>'+icon('arrow')+'</div><div class="home-indicator"></div>'
+    result+='<div class="overlay"'+('' if expanded else ' hidden="hidden"')+'><section class="sheet" role="dialog" aria-modal="true" aria-label="小挂件展开页"><div class="sheet-header"><span class="identity-icon">'+icon(design['icon'])+'</span><h2>'+esc(item['name'])+'</h2><button class="close sheet-close" aria-label="关闭小挂件">'+icon('close')+'</button></div><div class="sheet-body">'
+    result+=overview(sample)
+    if 'tabs' in interactions or 'filter' in interactions:
+        options=sample['sections'] if 'tabs' in interactions else [{'id':'all','title':'全部'}]+sample['sections']
+        result+='<nav class="reading-nav" aria-label="筛选已有内容">'
+        for group in options:
+            result+='<button data-group="'+esc(group['id'])+'" aria-pressed="'+str(group['id']==selected).lower()+'">'+esc(group['title'])+'</button>'
+        result+='</nav>'
+    for group in sample['sections']:
+        collapsed='collapse' in interactions;tag='details' if collapsed else 'section';heading='summary' if collapsed else 'h3'
+        result+='<'+tag+' class="section" data-section="'+esc(group['id'])+'"'+(' open="open"' if collapsed else '')+(' hidden="hidden"' if selected!='all' and selected!=group['id'] else '')+'>'
+        result+='<'+heading+' class="section-heading">'+esc(group['title'])+'<span class="section-count">'+str(len(group['rows']))+'</span>'+(icon('chevron') if collapsed else '')+'</'+heading+'>'
+        result+=''.join(row_html(row,design['icon']) for row in group['rows'])+'</'+tag+'>'
+    result+='<p class="note">'+icon('info')+'<span>如需修改内容，请回到对话中告诉搭子。</span></p></div></section><div class="detail-layer" hidden="hidden"><section class="detail-box" role="dialog" aria-modal="true" aria-label="只读详情"><div class="detail-head"><h3 class="detail-title">详情</h3><button class="close detail-close" aria-label="关闭详情">'+icon('close')+'</button></div><p class="detail-text"></p><p class="detail-foot">只读详情 · 修改通过对话完成</p></section></div></div></div>'
+    return result
+
+def files(artifact,item=None):
+    item=item or artifact.get('renderItem')
+    core.require(item,'WIDGET_RENDER_ITEM','生成原型需要对应清单项。')
+    data=artifact['data'];css=(ASSETS/'style.css').read_bytes();js=(ASSETS/'app.js').read_bytes()
+    screens=''.join(screen(data,item,sample) for sample in data['states'])
+    page='<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>'+esc(item['name'])+' · 小挂件原型</title><link rel="stylesheet" href="style.css"/></head><body>'+screens+'<script src="app.js"></script></body></html>'
+    result={'index.html':page.encode('utf-8'),'style.css':css,'app.js':js}
+    d=data['design'];w,h=d['screenWidth'],d['screenHeight']
+    for sample in data['states']:
+        for view in ('chat','expanded'):
+            content=screen(data,item,sample,view=='expanded')
+            svg='<svg xmlns="http://www.w3.org/2000/svg" width="'+str(w)+'" height="'+str(h)+'" viewBox="0 0 '+str(w)+' '+str(h)+'"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" class="svg-export" style="width:'+str(w)+'px;height:'+str(h)+'px"><style>'+html.escape(css.decode())+'</style>'+content+'</div></foreignObject></svg>'
+            result[view+'-'+sample['id']+'.svg']=svg.encode('utf-8')
+    return result

package/resources/buddy-creator/scripts/widget_render_v3.py

@@ -0,0 +1,86 @@
+"""Quiet, content-led prototypes. Earlier renderers remain immutable."""
+import html
+from pathlib import Path
+
+import buddy_core as core
+from widget_render_v2 import esc, icon, metrics
+
+ASSETS = Path(__file__).resolve().parents[1] / 'assets/widget-v3'
+
+
+def overview(sample, layout):
+    value = sample['overview']
+    result = '<div class="overview"><h3>'+esc(value['title'])+'</h3><p class="overview-subtitle">'+esc(value['subtitle'])+'</p>'
+    if layout == 'ledger':
+        result += metrics(value['metrics'], 'overview-metrics')
+    elif layout == 'checklist':
+        result += '<p class="reading-meta">' + esc(' · '.join(m['label']+' '+m['value'] for m in value['metrics'])) + '</p>'
+    if layout in ('ledger', 'checklist') and value.get('progress'):
+        progress = value['progress']
+        percentage = progress['value'] / progress['max'] * 100
+        result += '<div class="progress-track" role="img" aria-label="'+esc(progress['label'])+' '+str(round(percentage, 1))+'%"><div style="width:'+str(percentage)+'%"></div></div>'
+        if layout == 'ledger':
+            result += '<p class="progress-caption">'+esc(progress['label'])+'</p>'
+    return result+'</div>'
+
+
+def row_html(row, layout):
+    status = row.get('status')
+    result = '<div class="row">'
+    if layout == 'timeline':
+        result += '<div class="time">'+esc(row['label'])+'</div>'
+    result += '<div class="row-content">'
+    if layout != 'timeline':
+        result += '<div class="row-label">'+esc(row['label'])+'</div>'
+    result += '<p class="row-value">'+esc(row['value'])+'</p>'
+    if row.get('caption'):
+        result += '<p class="row-caption">'+esc(row['caption'])+'</p>'
+    # A state already written in the sentence does not need a duplicate badge.
+    if status and status['label'] not in row['value'] and status['label'] not in row.get('caption', ''):
+        result += '<span class="status '+status['tone']+'">'+esc(status['label'])+'</span>'
+    result += '</div>'
+    if row.get('detail'):
+        result += '<button class="detail-open" aria-label="查看说明：'+esc(row['label'])+'">'+icon('chevron')+'</button><span class="detail-copy" hidden="hidden">'+esc(row['detail'])+'</span>'
+    return result+'</div>'
+
+
+def screen(data, item, sample, expanded=False):
+    design = data['design']; layout = design['layout']; interactions = item['readInteractions']
+    selected = sample['sections'][0]['id'] if 'tabs' in interactions else 'all'
+    name = design['conversationTitle']
+    result = '<div class="screen '+layout+'" data-state="'+sample['id']+'" style="--accent:'+design['accent']+';--title-size:'+str(design['titleSize'])+'px">'
+    result += '<div class="statusbar"><span>9:41</span><span class="device">'+icon('signal')+icon('battery')+'</span></div><header class="chat-header"><span class="back">‹</span><strong>'+esc(name)+'</strong><span>···</span></header>'
+    result += '<main class="chat-body"><p class="chat-date">对话示例</p><div class="message user"><div class="bubble">'+esc(sample['userMessage'])+'</div></div><div class="message assistant"><span class="avatar">'+esc(name[:1])+'</span><div class="bubble">'+esc(sample['buddyMessage'])+'</div></div>'
+    result += '<article class="chat-card"><div class="card-content"><p class="card-kind">'+esc(item['name'])+'</p><h1>'+esc(sample['overview']['title'])+'</h1><p class="card-summary">'+esc(sample['summary'])+'</p></div><button class="open-sheet"><span>去查看</span>'+icon('arrow')+'</button></article></main>'
+    result += '<div class="composer">'+icon('plus')+'<span>修改请在对话中告诉搭子</span>'+icon('arrow')+'</div><div class="home-indicator"></div>'
+    result += '<div class="overlay"'+('' if expanded else ' hidden="hidden"')+'><section class="sheet" tabindex="-1" role="dialog" aria-modal="true" aria-label="小挂件展开页"><div class="sheet-header"><h2>'+esc(item['name'])+'</h2><button class="close sheet-close" aria-label="关闭小挂件">'+icon('close')+'</button></div><div class="sheet-body">'+overview(sample, layout)
+    if 'tabs' in interactions or 'filter' in interactions:
+        options = sample['sections'] if 'tabs' in interactions else [{'id':'all','title':'全部'}]+sample['sections']
+        result += '<nav class="reading-nav" aria-label="筛选已有内容">'
+        for group in options:
+            result += '<button data-group="'+esc(group['id'])+'" aria-pressed="'+str(group['id']==selected).lower()+'">'+esc(group['title'])+'</button>'
+        result += '</nav>'
+    for group in sample['sections']:
+        collapsible = 'collapse' in interactions
+        tag = 'details' if collapsible else 'section'; heading = 'summary' if collapsible else 'h3'
+        result += '<'+tag+' class="section" data-section="'+esc(group['id'])+'"'+(' open="open"' if collapsible else '')+(' hidden="hidden"' if selected!='all' and selected!=group['id'] else '')+'>'
+        result += '<'+heading+' class="section-heading">'+esc(group['title'])+(icon('chevron') if collapsible else '')+'</'+heading+'>'
+        result += ''.join(row_html(row, layout) for row in group['rows'])+'</'+tag+'>'
+    result += '<p class="note">如需修改，请在对话中告诉搭子。</p></div></section><div class="detail-layer" hidden="hidden"><section class="detail-box" role="dialog" aria-modal="true" aria-label="只读详情"><div class="detail-head"><h3 class="detail-title">详情</h3><button class="close detail-close" aria-label="关闭详情">'+icon('close')+'</button></div><p class="detail-text"></p><p class="detail-foot">修改请通过对话完成</p></section></div></div></div>'
+    return result
+
+
+def files(artifact, item=None):
+    item = item or artifact.get('renderItem')
+    core.require(item, 'WIDGET_RENDER_ITEM', '生成原型需要对应清单项。')
+    data = artifact['data']; css = (ASSETS/'style.css').read_bytes(); js = (ASSETS/'app.js').read_bytes()
+    screens = ''.join(screen(data, item, sample) for sample in data['states'])
+    page = '<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>'+esc(item['name'])+' · 小挂件原型</title><link rel="stylesheet" href="style.css"/></head><body>'+screens+'<script src="app.js"></script></body></html>'
+    result = {'index.html':page.encode('utf-8'), 'style.css':css, 'app.js':js}
+    w, h = data['design']['screenWidth'], data['design']['screenHeight']
+    for sample in data['states']:
+        for view in ('chat', 'expanded'):
+            content = screen(data, item, sample, view=='expanded')
+            svg = '<svg xmlns="http://www.w3.org/2000/svg" width="'+str(w)+'" height="'+str(h)+'" viewBox="0 0 '+str(w)+' '+str(h)+'"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" class="svg-export" style="width:'+str(w)+'px;height:'+str(h)+'px"><style>'+html.escape(css.decode())+'</style>'+content+'</div></foreignObject></svg>'
+            result[view+'-'+sample['id']+'.svg'] = svg.encode('utf-8')
+    return result

package/resources/buddy-creator/scripts/widget_render_v4.py

@@ -0,0 +1,121 @@
+"""Task-specific layouts and chat previews within one visual family."""
+import html
+from pathlib import Path
+
+import buddy_core as core
+from widget_render_v2 import esc, icon, metrics
+
+ASSETS = Path(__file__).resolve().parents[1] / 'assets/widget-v4'
+
+
+def change_pair(row):
+    change = row['change']
+    proposed = row['status']['tone'] == 'pending'
+    before_label, after_label = ('原安排', '建议调整') if proposed else ('调整前', '调整后')
+    return '<div class="change-pair"><div class="before"><small>'+before_label+'</small><p>'+esc(change['before'])+'</p></div><span class="change-arrow" aria-hidden="true">→</span><div class="after"><small>'+after_label+'</small><p>'+esc(change['after'])+'</p></div></div>'
+
+
+def card_preview(data, sample):
+    layout = data['design']['layout']
+    groups = sample['sections']
+    if layout == 'timeline':
+        return '<div class="calendar-strip">'+''.join('<div><span>'+esc(group['title'])+'</span><small>'+esc(group['rows'][0]['label'])+'</small></div>' for group in groups[:4])+'</div>'
+    if layout == 'cards':
+        return '<div class="booking-reference"><span>'+esc(groups[0]['title'])+'</span><p>'+esc(groups[0]['rows'][0]['label'])+'</p></div>'
+    if layout == 'ledger':
+        return metrics(sample['overview']['metrics'][:2], 'receipt-totals')
+    if layout == 'checklist':
+        return '<div class="packing-index">'+''.join('<div><small>'+esc(group['title'])+'</small><p>'+esc(group['rows'][0]['label'])+'</p></div>' for group in groups[:4])+'</div>'
+    if layout == 'changes':
+        row = next((row for group in groups for row in group['rows'] if row.get('change')), None)
+        if row:
+            return '<div class="change-preview"><div class="change-preview-label">'+esc(row['value'])+' · '+esc(row['status']['label'])+'</div>'+change_pair(row)+'</div>'
+    return ''
+
+
+def chat_card(data, item, sample):
+    return '<article class="chat-card"><div class="card-content"><p class="card-kind">'+esc(item['name'])+'</p><h1>'+esc(sample['overview']['title'])+'</h1>'+card_preview(data, sample)+'<p class="card-summary">'+esc(sample['summary'])+'</p></div><button class="open-sheet"><span>去查看</span>'+icon('arrow')+'</button></article>'
+
+
+def overview(sample, layout):
+    value = sample['overview']
+    result = '<div class="overview"><h3>'+esc(value['title'])+'</h3><p class="overview-subtitle">'+esc(value['subtitle'])+'</p>'
+    if layout == 'ledger':
+        result += metrics(value['metrics'], 'overview-metrics')
+    elif layout == 'checklist':
+        result += '<p class="reading-meta">' + esc(' · '.join(m['label']+' '+m['value'] for m in value['metrics'])) + '</p>'
+    if layout in ('ledger', 'checklist') and value.get('progress'):
+        progress = value['progress']
+        percentage = progress['value'] / progress['max'] * 100
+        result += '<div class="progress-track" role="img" aria-label="'+esc(progress['label'])+' '+str(round(percentage, 1))+'%"><div style="width:'+str(percentage)+'%"></div></div>'
+        if layout == 'ledger':
+            result += '<p class="progress-caption">'+esc(progress['label'])+'</p>'
+    return result+'</div>'
+
+
+def row_html(row, layout):
+    status = row.get('status')
+    result = '<div class="row">'
+    if layout == 'timeline':
+        result += '<div class="time">'+esc(row['label'])+'</div>'
+    result += '<div class="row-content">'
+    if layout == 'changes':
+        result += '<div class="change-heading"><div class="row-label">'+esc(row['value'])+'</div><span class="change-time">'+esc(row['label'])+'</span></div>'
+    elif layout != 'timeline':
+        result += '<div class="row-label">'+esc(row['label'])+'</div>'
+    if layout != 'changes':
+        result += '<p class="row-value">'+esc(row['value'])+'</p>'
+    if row.get('change'):
+        result += change_pair(row)
+    if row.get('caption'):
+        result += '<p class="row-caption">'+esc(row['caption'])+'</p>'
+    # A state already written in the sentence does not need a duplicate badge.
+    if status and status['label'] not in row['value'] and status['label'] not in row.get('caption', ''):
+        result += '<span class="status '+status['tone']+'">'+esc(status['label'])+'</span>'
+    result += '</div>'
+    if row.get('detail'):
+        result += '<button class="detail-open" aria-label="查看说明：'+esc(row['label'])+'">'+icon('chevron')+'</button><span class="detail-copy" hidden="hidden">'+esc(row['detail'])+'</span>'
+    return result+'</div>'
+
+
+def screen(data, item, sample, expanded=False):
+    design = data['design']; layout = design['layout']; interactions = item['readInteractions']
+    selected = sample['sections'][0]['id'] if 'tabs' in interactions else 'all'
+    name = design['conversationTitle']
+    result = '<div class="screen '+layout+'" data-state="'+sample['id']+'" style="--accent:'+design['accent']+';--title-size:'+str(design['titleSize'])+'px">'
+    result += '<div class="statusbar"><span>9:41</span><span class="device">'+icon('signal')+icon('battery')+'</span></div><header class="chat-header"><span class="back">‹</span><strong>'+esc(name)+'</strong><span>···</span></header>'
+    result += '<main class="chat-body"><p class="chat-date">对话示例</p><div class="message user"><div class="bubble">'+esc(sample['userMessage'])+'</div></div><div class="message assistant"><span class="avatar">'+esc(name[:1])+'</span><div class="bubble">'+esc(sample['buddyMessage'])+'</div></div>'
+    result += chat_card(data, item, sample)+'</main>'
+    result += '<div class="composer">'+icon('plus')+'<span>修改请在对话中告诉搭子</span>'+icon('arrow')+'</div><div class="home-indicator"></div>'
+    result += '<div class="overlay"'+('' if expanded else ' hidden="hidden"')+'><section class="sheet" tabindex="-1" role="dialog" aria-modal="true" aria-label="小挂件展开页"><div class="sheet-header"><h2>'+esc(item['name'])+'</h2><button class="close sheet-close" aria-label="关闭小挂件">'+icon('close')+'</button></div><div class="sheet-body">'+overview(sample, layout)
+    if 'tabs' in interactions or 'filter' in interactions:
+        options = sample['sections'] if 'tabs' in interactions else [{'id':'all','title':'全部'}]+sample['sections']
+        result += '<nav class="reading-nav" aria-label="筛选已有内容">'
+        for index, group in enumerate(options):
+            label = '<span class="day-number">'+str(index+1).zfill(2)+'</span><span>'+esc(group['title'])+'</span>' if layout == 'timeline' and 'tabs' in interactions else esc(group['title'])
+            result += '<button data-group="'+esc(group['id'])+'" aria-pressed="'+str(group['id']==selected).lower()+'">'+label+'</button>'
+        result += '</nav>'
+    for group in sample['sections']:
+        collapsible = 'collapse' in interactions
+        tag = 'details' if collapsible else 'section'; heading = 'summary' if collapsible else 'h3'
+        result += '<'+tag+' class="section" data-section="'+esc(group['id'])+'"'+(' open="open"' if collapsible else '')+(' hidden="hidden"' if selected!='all' and selected!=group['id'] else '')+'>'
+        result += '<'+heading+' class="section-heading">'+esc(group['title'])+(icon('chevron') if collapsible else '')+'</'+heading+'>'
+        result += '<div class="section-rows">'+''.join(row_html(row, layout) for row in group['rows'])+'</div></'+tag+'>'
+    result += '<p class="note">如需修改，请在对话中告诉搭子。</p></div></section><div class="detail-layer" hidden="hidden"><section class="detail-box" role="dialog" aria-modal="true" aria-label="只读详情"><div class="detail-head"><h3 class="detail-title">详情</h3><button class="close detail-close" aria-label="关闭详情">'+icon('close')+'</button></div><p class="detail-text"></p><p class="detail-foot">修改请通过对话完成</p></section></div></div></div>'
+    return result
+
+
+def files(artifact, item=None):
+    item = item or artifact.get('renderItem')
+    core.require(item, 'WIDGET_RENDER_ITEM', '生成原型需要对应清单项。')
+    data = artifact['data']; css = (ASSETS/'style.css').read_bytes(); js = (ASSETS/'app.js').read_bytes()
+    screens = ''.join(screen(data, item, sample) for sample in data['states'])
+    page = '<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>'+esc(item['name'])+' · 小挂件原型</title><link rel="stylesheet" href="style.css"/></head><body>'+screens+'<script src="app.js"></script></body></html>'
+    result = {'index.html':page.encode('utf-8'), 'style.css':css, 'app.js':js}
+    w, h = data['design']['screenWidth'], data['design']['screenHeight']
+    for sample in data['states']:
+        for view in ('chat', 'expanded'):
+            content = screen(data, item, sample, view=='expanded')
+            svg = '<svg xmlns="http://www.w3.org/2000/svg" width="'+str(w)+'" height="'+str(h)+'" viewBox="0 0 '+str(w)+' '+str(h)+'"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" class="svg-export" style="width:'+str(w)+'px;height:'+str(h)+'px"><style>'+html.escape(css.decode())+'</style>'+content+'</div></foreignObject></svg>'
+            result[view+'-'+sample['id']+'.svg'] = svg.encode('utf-8')
+    return result