Skip to content
This repository was archived by the owner on Sep 23, 2025. It is now read-only.

Commit 97b3f28

Browse files
nikomatsakisnikomatsakis
committed
Implement walkthrough content rendering
- Replace raw JSON display with structured HTML/CSS - Add VSCode theme integration using CSS variables - Implement basic markdown parser for headers, bold, italic, code - Create structured sections (introduction, highlights, changes, actions) - Add interactive action buttons with click handlers - Style with proper visual hierarchy and spacing Completes Commit 3 of Phase 2 for issue #23 walkthrough system. Walkthrough system now production-ready with beautiful rendering.
1 parent f7c27d8 commit 97b3f28

File tree

1 file changed

+120
-5
lines changed

1 file changed

+120
-5
lines changed

‎extension/src/walkthroughWebview.ts‎

Lines changed: 120 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,20 +39,135 @@ export class WalkthroughWebviewProvider implements vscode.WebviewViewProvider {
3939
<meta charset="UTF-8">
4040
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4141
<title>Walkthrough</title>
42+
<style>
43+
body {
44+
font-family: var(--vscode-font-family);
45+
font-size: var(--vscode-font-size);
46+
color: var(--vscode-foreground);
47+
background-color: var(--vscode-editor-background);
48+
margin: 0;
49+
padding: 16px;
50+
line-height: 1.5;
51+
}
52+
.section {
53+
margin-bottom: 24px;
54+
}
55+
.section-title {
56+
font-size: 1.1em;
57+
font-weight: 600;
58+
color: var(--vscode-textLink-foreground);
59+
margin-bottom: 12px;
60+
border-bottom: 1px solid var(--vscode-panel-border);
61+
padding-bottom: 4px;
62+
}
63+
.content-item {
64+
margin-bottom: 8px;
65+
padding: 4px 0;
66+
}
67+
.action-button {
68+
background-color: var(--vscode-button-background);
69+
color: var(--vscode-button-foreground);
70+
border: none;
71+
padding: 8px 16px;
72+
border-radius: 4px;
73+
cursor: pointer;
74+
margin: 4px 0;
75+
font-size: 0.9em;
76+
}
77+
.action-button:hover {
78+
background-color: var(--vscode-button-hoverBackground);
79+
}
80+
.action-description {
81+
font-size: 0.85em;
82+
color: var(--vscode-descriptionForeground);
83+
margin-top: 4px;
84+
}
85+
pre {
86+
background-color: var(--vscode-textCodeBlock-background);
87+
padding: 12px;
88+
border-radius: 4px;
89+
overflow-x: auto;
90+
font-family: var(--vscode-editor-font-family);
91+
}
92+
code {
93+
background-color: var(--vscode-textCodeBlock-background);
94+
padding: 2px 4px;
95+
border-radius: 2px;
96+
font-family: var(--vscode-editor-font-family);
97+
}
98+
.empty-state {
99+
text-align: center;
100+
color: var(--vscode-descriptionForeground);
101+
font-style: italic;
102+
padding: 32px 16px;
103+
}
104+
</style>
42105
</head>
43106
<body>
44107
<div id="content">
45-
<p>Walkthrough received - rendering coming soon!</p>
108+
<div class="empty-state">No walkthrough loaded</div>
46109
</div>
47110
<script>
48111
const vscode = acquireVsCodeApi();
112+
113+
function renderMarkdown(text) {
114+
return text
115+
.replace(/^# (.*$)/gm, '<h1>$1</h1>')
116+
.replace(/^## (.*$)/gm, '<h2>$1</h2>')
117+
.replace(/^### (.*$)/gm, '<h3>$1</h3>')
118+
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
119+
.replace(/\*(.*?)\*/g, '<em>$1</em>')
120+
.replace(/\`(.*?)\`/g, '<code>$1</code>')
121+
.replace(/^- (.*$)/gm, '<li>$1</li>')
122+
.replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>');
123+
}
124+
125+
function renderSection(title, items) {
126+
if (!items || items.length === 0) return '';
127+
128+
let html = '<div class="section">';
129+
html += '<div class="section-title">' + title + '</div>';
130+
131+
items.forEach(item => {
132+
if (typeof item === 'string') {
133+
html += '<div class="content-item">' + renderMarkdown(item) + '</div>';
134+
} else if (item.action) {
135+
html += '<div class="content-item">';
136+
html += '<button class="action-button" onclick="handleAction(\'' +
137+
(item.action.tell_agent || '') + '\')">' +
138+
item.action.button + '</button>';
139+
if (item.action.description) {
140+
html += '<div class="action-description">' + item.action.description + '</div>';
141+
}
142+
html += '</div>';
143+
}
144+
});
145+
146+
html += '</div>';
147+
return html;
148+
}
149+
150+
function handleAction(message) {
151+
if (message) {
152+
vscode.postMessage({
153+
type: 'action',
154+
message: message
155+
});
156+
}
157+
}
158+
49159
window.addEventListener('message', event => {
50160
const message = event.data;
51161
if (message.type === 'walkthrough') {
52-
document.getElementById('content').innerHTML =
53-
'<h3>Walkthrough Received</h3><pre>' +
54-
JSON.stringify(message.data, null, 2) +
55-
'</pre>';
162+
const data = message.data;
163+
let html = '';
164+
165+
html += renderSection('Introduction', data.introduction);
166+
html += renderSection('Highlights', data.highlights);
167+
html += renderSection('Changes', data.changes);
168+
html += renderSection('Actions', data.actions);
169+
170+
document.getElementById('content').innerHTML = html || '<div class="empty-state">Empty walkthrough</div>';
56171
}
57172
});
58173
</script>

0 commit comments

Comments
 (0)