Skip to content

Commit 712c945

Browse files
hyperpolymathclaude
hyperpolymath
and
claude
committed
feat(frontend): wire Pipeline Designer into app + fix build errors
- Add Pipeline tab (9th view) connecting the 3-panel node-graph editor (PipelineDesigner, PipelinePalette, PipelineOutput, PipelineCanvas) - Create PipelineUpdate.res with full pure state transitions (450+ lines) - Break Model ↔ PipelineModel circular dependency by moving pipeline state to App.appState and giving PipelineModel its own position type - Fix StackView.view signature mismatch (missing isDark parameter) - Add Tailwind CSS via CDN for Pipeline Designer components - Fix PipelineCanvas Dom.element ref typing for ReScript 12 - Fix Float.toFixed unavailability caused by Belt shadowing - Reconcile duplicate pipelineMsg types (remove stale Msg.res copy) Clean build: 50 modules, 0 errors. Dev server verified serving. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 670fd82 commit 712c945

20 files changed

Lines changed: 6124 additions & 252 deletions

‎frontend/index.html‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" class="dark">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,6 +11,23 @@
1111

1212
<title>stapeln - Container Stack Designer</title>
1313

14+
<!-- Tailwind CSS (used by Pipeline Designer components) -->
15+
<script src="https://cdn.tailwindcss.com"></script>
16+
<script>
17+
tailwind.config = {
18+
darkMode: 'class',
19+
theme: {
20+
extend: {
21+
colors: {
22+
gray: {
23+
950: '#0a0e1a',
24+
},
25+
},
26+
},
27+
},
28+
};
29+
</script>
30+
1431
<!-- Application Styles -->
1532
<link rel="stylesheet" href="./src/App.css">
1633

‎frontend/src/App.res‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ open Update
1111
type page =
1212
| NetworkView // Cisco-style topology (TopologyView.res)
1313
| StackView // Paragon-style vertical (View.res)
14+
| PipelineView // Assembly pipeline designer (node-graph editor)
1415
| LagoGreyView // Lago Grey image designer
1516
| PortConfigView // Port configuration with ephemeral pinholes
1617
| SecurityView // Security inspector with attack surface analysis
@@ -21,12 +22,14 @@ type page =
2122
type appState = {
2223
currentPage: page,
2324
model: model, // TEA model for stack designer
25+
pipelineDesigner: PipelineModel.pipelineDesignerState,
2426
isDark: bool,
2527
}
2628

2729
let initialAppState = {
2830
currentPage: NetworkView,
2931
model: initialModel,
32+
pipelineDesigner: PipelineModel.initialState(),
3033
isDark: true,
3134
}
3235

@@ -235,6 +238,14 @@ let make = () => {
235238
}
236239
}
237240

241+
| Pipeline(pipelineMsg) => {
242+
// Update pipeline designer state directly in appState
243+
setState(prev => {
244+
let newPState = PipelineUpdate.update(prev.pipelineDesigner, pipelineMsg)
245+
{...prev, pipelineDesigner: newPState}
246+
})
247+
}
248+
238249
| _ => ()
239250
}
240251
}
@@ -258,6 +269,12 @@ let make = () => {
258269
>
259270
{"📚 Stack"->React.string}
260271
</button>
272+
<button
273+
className={state.currentPage == PipelineView ? "tab active" : "tab"}
274+
onClick={_ => switchPage(PipelineView)}
275+
>
276+
{"🔧 Pipeline"->React.string}
277+
</button>
261278
<button
262279
className={state.currentPage == LagoGreyView ? "tab active" : "tab"}
263280
onClick={_ => switchPage(LagoGreyView)}
@@ -316,7 +333,12 @@ let make = () => {
316333
<div className="content">
317334
{switch state.currentPage {
318335
| NetworkView => TopologyView.view(state.model, state.isDark, dispatch)
319-
| StackView => StackView.view(state.model)
336+
| StackView => StackView.view(state.model, ~isDark=state.isDark)
337+
| PipelineView =>
338+
<PipelineDesigner
339+
state={state.pipelineDesigner}
340+
dispatch={pMsg => dispatch(Pipeline(pMsg))}
341+
/>
320342
| LagoGreyView => <LagoGreyImageDesigner />
321343
| PortConfigView => <PortConfigPanel />
322344
| SecurityView =>

0 commit comments

Comments
 (0)