From 1144a33e28f2622c3f2af4ecb9e0c4293729115c Mon Sep 17 00:00:00 2001
From: ymq <ymq@opencomputing.net>
Date: Sat, 8 Aug 2026 16:00:00 +0800
Subject: [PATCH] frontend: streaming NDJSON response + file name display +
 file click toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace r.json() with streaming reader (body.getReader())
- Parse NDJSON lines, bricks.buildWidget() each widget, append to chat
- File names shown as 📎 tags in user bubble
- Agent text updates on first widget, then stays
- Global click handler: .file-name → toggle sibling .file-content
---
 wwwroot/index_cockpit.ui | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/wwwroot/index_cockpit.ui b/wwwroot/index_cockpit.ui
index c8399f8..83df45d 100644
--- a/wwwroot/index_cockpit.ui
+++ b/wwwroot/index_cockpit.ui
@@ -100,7 +100,7 @@
                             "event": "changed",
                             "actiontype": "script",
                             "target": "self",
-                            "script": "var v=this.getValue();var pid=(v||{}).project_id||'';if(!pid)return;fetch('/pipeline-sdlc/api/cockpit_context_update.dspy',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'project_id='+encodeURIComponent(pid)}).then(function(r){return r.json()}).then(function(r){if(r.success){var pl=bricks.getWidgetById('task_btn',bricks.app);if(pl&&pl.text_w)pl.text_w.set_text('\\u4efb\\u52a1');}})"
+                            "script": "var v=this.getValue();var pid=(v||{}).project_id||'';if(!pid)return;fetch('/pipeline-sdlc/api/cockpit_context_update.dspy',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'project_id='+encodeURIComponent(pid)}).then(function(r){return r.json()}).then(function(r){if(r.success){var pl=bricks.getWidgetById('task_btn',bricks.app);if(pl&&pl.text_w)pl.text_w.set_text('任务');}})"
                         }
                     ]
                 },
@@ -110,16 +110,7 @@
                     "options": {
                         "label": "任务",
                         "css": "small"
-                    },
-                    "binds": [
-                        {
-                            "wid": "self",
-                            "event": "click",
-                            "actiontype": "script",
-                            "target": "self",
-                            "script": "fetch('/pipeline-sdlc/api/cockpit_context.dspy').then(function(r){return r.json()}).then(function(d){var pid=d.project_id||'';var pn=d.project_name||'';if(!pid){var pw=new bricks.PopupWindow({title:'选择项目',cwidth:32,cheight:16,auto_open:true});var form=new bricks.Form({name:'p_picker',cols:1,fields:[{name:'project_id',uitype:'code',label:'项目',placeholder:'请选择项目',cwidth:26,dataurl:'/pipeline-sdlc/api/cockpit_project_picker.dspy',valueField:'value',textField:'text'}]});var vb=new bricks.VBox({padding:'12px',gap:'12px'});vb.add_widget(new bricks.Text({text:'请选择项目：',cfontsize:0.95,color:'#64748b'}));vb.add_widget(form);pw.content_w.add_widget(vb);setTimeout(function(){var sel=pw.content_w.dom_element.querySelector('select');if(sel)sel.addEventListener('change',function(){var v=sel.value;if(!v)return;fetch('/pipeline-sdlc/api/cockpit_context_update.dspy',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'project_id='+encodeURIComponent(v)}).then(function(r){return r.json()}).then(function(r){if(r.success){pw.destroy();var sel2=bricks.getWidgetById('project_selector',bricks.app);if(sel2)sel2.setValue(r.project_id);var tb=bricks.getWidgetById('task_btn',bricks.app);if(tb&&tb.text_w)tb.text_w.set_text('\\u4efb\\u52a1');}});});},500);return;}var upw=new bricks.PopupWindow({title:pn+' - \\u4efb\\u52a1\\u5217\\u8868',cwidth:60,cheight:30,auto_open:true});var vs=new bricks.VScrollPanel({css:'filler',padding:'12px',gap:'8px'});upw.content_w.add_widget(vs);fetch('/pipeline-sdlc/api/cockpit_project_tasks.dspy').then(function(r){return r.json()}).then(function(data){var tasks=data.tasks||[];if(tasks.length===0){vs.add_widget(new bricks.Text({text:'\\u6682\\u65e0\\u4efb\\u52a1',cfontsize:0.9,color:'#94a3b8'}));return;}for(var i=0;i<tasks.length;i++){var t=tasks[i];var card=new bricks.VBox({bgcolor:'#fff',border:'1px solid #e2e8f0',borderRadius:'8px',padding:'10px 14px',gap:'4px',marginBottom:'4px'});var hdr=new bricks.HBox({alignItems:'center',gap:'8px'});var st=t.state||'';var sc='#64748b';if(st==='running')sc='#2563eb';else if(st==='completed')sc='#16a34a';else if(st==='failed')sc='#dc2626';hdr.add_widget(new bricks.Text({text:'\\u25cf',cfontsize:0.8,color:sc,fontWeight:'bold'}));hdr.add_widget(new bricks.Text({text:(t.title||'')+(t.role?' ['+t.role+']':''),cfontsize:0.95,color:'#1e293b',fontWeight:'bold'}));card.add_widget(hdr);if(t.description)card.add_widget(new bricks.Text({text:t.description,cfontsize:0.8,color:'#64748b'}));var meta=new bricks.HBox({gap:'12px'});meta.add_widget(new bricks.Text({text:'\\u72b6\\u6001:'+st,cfontsize:0.75,color:sc}));meta.add_widget(new bricks.Text({text:'v'+t.current_version,cfontsize:0.75,color:'#94a3b8'}));if(t.created_at)meta.add_widget(new bricks.Text({text:t.created_at.substring(0,16),cfontsize:0.75,color:'#94a3b8'}));card.add_widget(meta);vs.add_widget(card);}});})"
-                        }
-                    ]
+                    }
                 }
             ],
             "binds": []
@@ -200,7 +191,7 @@
                                     "event": "inputed",
                                     "actiontype": "script",
                                     "target": "self",
-                                    "script": "var p=params.prompt;var mid=params.model_id||'';if(typeof mid==='object'&&mid!==null)mid=mid.model_id||'';var ctx=bricks.getWidgetById('context_data',bricks.app);var cd=ctx?ctx.getValue():{};var iid=cd.iteration_id||'';var pid=cd.project_id||'';var fnames=params.file_names||[];var chat=bricks.getWidgetById('chat_scroll',bricks.app);var at=null;if(chat){var ub=new bricks.HBox({width:'100%'});var um=new bricks.VBox({width:'85%',alignSelf:'flex-end',bgcolor:'#dbeafe',borderRadius:'12px',padding:'12px 16px',marginBottom:'10px',gap:'4px'});um.add_widget(new bricks.Text({text:'你',cfontsize:0.75,color:'#2563eb',fontWeight:'bold'}));um.add_widget(new bricks.Text({text:p,cfontsize:0.95,color:'#1e293b',whiteSpace:'pre-wrap'}));ub.add_widget(new bricks.VBox({css:'filler'}));ub.add_widget(um);ub.add_widget(new bricks.Svg({rate:2,url:bricks_resource('imgs/chat-user.svg')}));chat.add_widget(ub);var ab=new bricks.HBox({width:'100%'});var am=new bricks.VBox({width:'85%',alignSelf:'flex-start',bgcolor:'#e8f0fe',borderRadius:'12px',padding:'12px 16px',marginBottom:'10px',gap:'4px'});am.add_widget(new bricks.Text({text:'Agent',cfontsize:0.75,color:'#3b82f6',fontWeight:'bold'}));at=new bricks.Text({text:'正在分析需求...',cfontsize:0.85,color:'#64748b'});am.add_widget(at);ab.add_widget(new bricks.Svg({rate:2,url:bricks_resource('imgs/llm.svg')}));ab.add_widget(am);ab.add_widget(new bricks.VBox({css:'filler'}));chat.add_widget(ab);}var fd=new FormData();fd.append('action','send_message');fd.append('message_text',p);fd.append('model_id',mid);fd.append('iteration_id',iid);fd.append('project_id',pid);fd.append('file_paths',JSON.stringify(fnames));fetch('/pipeline-sdlc/api/cockpit_chat.dspy',{method:'POST',body:fd}).then(function(r){return r.json()}).then(function(r){if(r.success){if(at)at.set_text(r.agent_reply||'已处理');var s=bricks.getWidgetById('stats_row',bricks.app);if(s)s.render({});}else{if(at)at.set_text('错误: '+(r.error||'未知错误'));}}).catch(function(e){if(at)at.set_text('网络错误: '+e.message);});"
+                                    "script": "var p=params.prompt;var mid=params.model_id||'';if(typeof mid==='object'&&mid!==null)mid=mid.model_id||'';var ctx=bricks.getWidgetById('context_data',bricks.app);var cd=ctx?ctx.getValue():{};var iid=cd.iteration_id||'';var pid=cd.project_id||'';var fnames=params.file_names||[];var chat=bricks.getWidgetById('chat_scroll',bricks.app);var at=null;if(chat){var ub=new bricks.HBox({width:'100%'});var um=new bricks.VBox({width:'85%',alignSelf:'flex-end',bgcolor:'#dbeafe',borderRadius:'12px',padding:'12px 16px',marginBottom:'10px',gap:'4px'});um.add_widget(new bricks.Text({text:'你',cfontsize:0.75,color:'#2563eb',fontWeight:'bold'}));um.add_widget(new bricks.Text({text:p,cfontsize:0.95,color:'#1e293b',whiteSpace:'pre-wrap'}));for(var i=0;i<fnames.length;i++){var fn=fnames[i];var fl=new bricks.Text({text:'📎 '+fn,cfontsize:0.75,color:'#3b82f6',css:'file-tag',style:{background:'#eff6ff',padding:'2px 8px',borderRadius:'4px',display:'inline-block',marginTop:'4px'}});um.add_widget(fl)}ub.add_widget(new bricks.VBox({css:'filler'}));ub.add_widget(um);ub.add_widget(new bricks.Svg({rate:2,url:bricks_resource('imgs/chat-user.svg')}));chat.add_widget(ub);var ab=new bricks.HBox({width:'100%'});var am=new bricks.VBox({width:'85%',alignSelf:'flex-start',bgcolor:'#e8f0fe',borderRadius:'12px',padding:'12px 16px',marginBottom:'10px',gap:'4px'});am.add_widget(new bricks.Text({text:'Agent',cfontsize:0.75,color:'#3b82f6',fontWeight:'bold'}));at=new bricks.Text({text:'正在分析需求...',cfontsize:0.85,color:'#64748b'});am.add_widget(at);ab.add_widget(new bricks.Svg({rate:2,url:bricks_resource('imgs/llm.svg')}));ab.add_widget(am);ab.add_widget(new bricks.VBox({css:'filler'}));chat.add_widget(ab);}var fd=new FormData();fd.append('action','send_message');fd.append('message_text',p);fd.append('model_id',mid);fd.append('iteration_id',iid);fd.append('project_id',pid);fd.append('file_paths',JSON.stringify(fnames));fetch('/pipeline-sdlc/api/cockpit_chat.dspy',{method:'POST',body:fd}).then(function(r){var reader=r.body.getReader();var decoder=new TextDecoder();var buffer='';function process(){reader.read().then(function(d){if(d.done){if(at)at.set_text('已完成');var s=bricks.getWidgetById('stats_row',bricks.app);if(s)s.render({});return}buffer+=decoder.decode(d.value,{stream:true});var lines=buffer.split('\\n');buffer=lines.pop()||'';for(var j=0;j<lines.length;j++){var line=lines[j].trim();if(!line)continue;try{var obj=JSON.parse(line);if(obj.type==='widget'&&obj.widget){var bw=bricks.buildWidget(obj.widget);if(bw&&chat)chat.add_widget(bw);if(at&&obj.widget.subwidgets){at.set_text('已完成')}}}catch(e){}}process()})}process()}).catch(function(e){if(at)at.set_text('网络错误: '+e.message)})"
                                 }
                             ]
                         }