From bf535b62567f8dd188e3a63af94f9f1d09c59488 Mon Sep 17 00:00:00 2001 From: jaakko Date: Tue, 7 Apr 2026 13:10:37 +0300 Subject: [PATCH] =?UTF-8?q?Raportti:=20syntaksikorostus,=20CSS-tooltipsit?= =?UTF-8?q?=20rivityksell=C3=A4,=20parannettu=20layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Lisätty highlightCode() — regex-pohjainen korostus .py, .html, Dockerfile - Swimlane-badget: title-attr → CSS ::after tooltip (white-space:pre-wrap) - Tiedostokortit: kieli + rivimäärä headeriin - Yleinen ilme: pyöristetyt kulmat, monospace-fontti, parempi line-height - Pipeline-vaiheet: selkeämmät erottimet ja väripaletti Co-Authored-By: Claude Opus 4.6 (1M context) --- network-poc/static/index.html | 91 ++++++++++++++++++++++++++--------- 1 file changed, 69 insertions(+), 22 deletions(-) diff --git a/network-poc/static/index.html b/network-poc/static/index.html index c80e4e9..7db35a8 100644 --- a/network-poc/static/index.html +++ b/network-poc/static/index.html @@ -2840,26 +2840,62 @@ ${fixableFiles}`; const agentNames = { manager: 'Manageri', coder: 'Koodari', tester: 'DevOps', qa: 'QA', data: 'Data' }; const agentColors = { manager: '#d29922', coder: '#3fb950', tester: '#58a6ff', qa: '#a371f7', data: '#d2a8ff' }; + // Syntaksikorostus: kevyt regex-pohjainen highlighter + function highlightCode(code, filename) { + let h = code.replace(/&/g,'&').replace(/$1'); + // Stringit (kolmois- ja yksittäiset) + h = h.replace(/("""[\s\S]*?"""|'''[\s\S]*?''')/g, '$1'); + h = h.replace(/((?$1'); + // Avainsanat + h = h.replace(/\b(def|class|import|from|return|if|elif|else|for|in|while|try|except|finally|with|as|raise|yield|async|await|True|False|None|not|and|or|is|lambda)\b/g, '$1'); + // Dekoraattorit + h = h.replace(/^(\s*@\w+)/gm, '$1'); + // Numerot + h = h.replace(/\b(\d+\.?\d*)\b/g, '$1'); + } else if (filename.endsWith('.html')) { + h = h.replace(/(<\/?[\w-]+)/g, '$1'); + h = h.replace(/([\w-]+)=/g, '$1='); + h = h.replace(/((?$1'); + } else if (filename === 'Dockerfile') { + h = h.replace(/^(FROM|RUN|COPY|WORKDIR|EXPOSE|CMD|ENV|ARG|ENTRYPOINT|ADD|VOLUME|LABEL|USER)/gm, '$1'); + h = h.replace(/(#[^\n]*)/g, '$1'); + h = h.replace(/((?$1'); + } + return h; + } + const stepsHtml = steps.map((s, i) => { const color = agentColors[s.agent] || '#8b949e'; const icon = s.status === 'done' ? '✓' : '◷'; const outputPreview = (s.output || '').substring(0, 500); + const highlighted = outputPreview ? highlightCode(outputPreview, s.label) : ''; return ` -
-
- ${icon} ${agentNames[s.agent] || s.agent} — ${s.label} - Vaihe ${i + 1} +
+
+ ${icon} ${agentNames[s.agent] || s.agent} — ${s.label} + Vaihe ${i + 1}
- ${s.input ? `
Prompti
${s.input.replace(/
` : ''} - ${outputPreview ? `
${outputPreview.replace(/` : ''}
+                        ${s.input ? `
▸ Prompti
${s.input.replace(/
` : ''}
+                        ${highlighted ? `
${highlighted}
` : ''}
`; }).join(''); - const filesHtml = fileEntries.map(([name, content]) => ` -
-
${name}
- 
${(content || '').replace(/
-
`).join(''); + const filesHtml = fileEntries.map(([name, content]) => { + const ext = name.split('.').pop(); + const langLabel = {py:'Python',html:'HTML',toml:'TOML',yml:'YAML',yaml:'YAML',md:'Markdown'}[ext] || ext.toUpperCase(); + const lines = (content || '').split('\\n').length; + return ` +
+
+ ${name} + ${langLabel} · ${lines} riviä +
+ 
${highlightCode(content || '', name)}
+
`; + }).join(''); const staticHtml = (staticIssues || []).length > 0 ? `
@@ -2876,14 +2912,18 @@ ${fixableFiles}`; Kipinä Raportti — ${task} @@ -2932,16 +2972,23 @@ ${filesHtml} for (var bi = 0; bi < aSteps.length; bi++) { var st = aSteps[bi]; var desc = stepDescs[st.label] || st.label; - var outPrev = (st.output || '').substring(0, 100).replace(/ 6) tipLines.push('...'); + } var icon = st.status === 'done' ? '✓' : '◷'; - if (bi > 0) badges += '→'; - badges += '' + icon + ' ' + st.label.replace(/'; + if (bi > 0) badges += '→'; + badges += '' + icon + ' ' + st.label.replace(/'; } - rows += '
' + label + '
' + badges + '
'; + rows += '
' + label + '
' + badges + '
'; } - return '
' + rows + '
'; + return '
' + rows + '
'; } // Yksinkertainen pipeline (vanha: manageri → koodari → testaaja)