Add animated tube-plot G-code visualization with playback controls

G-Code Visualization tab overhaul:
- Two render modes: fast line plot, and tube plot with build animation
- Print and travel paths rendered as solid circular tubes with physical
mm diameters that scale with zoom (filament-like appearance)
- Client-side playback: play/pause, 0.25x-10x speed, scrub bar, per-move
frame stepping, nozzle marker, and layer/progress readout
- Width sliders default to layer height and cap at 150% of it
- Travel opacity default lowered to 25%; travel lines made solid
- Side-by-side layout (controls left, chart right); animation controls
and width sliders only shown after a tube render
- Upload box hidden unless "Upload G-Code file" source is selected

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app.py

@@ -81,6 +81,54 @@ APP_CSS = """
 #load-sample-stls-button button:focus-visible {
     box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.35) !important;
 }
+
+#toolpath-anim-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    flex-wrap: wrap;
+    padding: 0.4rem 0.2rem;
+}
+
+#toolpath-anim-controls button,
+#toolpath-anim-controls select {
+    background: var(--button-secondary-background-fill);
+    color: var(--button-secondary-text-color);
+    border: 1px solid var(--border-color-primary);
+    border-radius: 0.4rem;
+    padding: 0.25rem 0.7rem;
+    font-size: 0.85rem;
+    cursor: pointer;
+}
+
+#toolpath-anim-controls button:hover,
+#toolpath-anim-controls select:hover {
+    border-color: #f97316;
+}
+
+#tp-scrub {
+    flex: 1 1 140px;
+    min-width: 120px;
+    accent-color: #f97316;
+}
+
+#tp-readout {
+    font-size: 0.85rem;
+    color: var(--body-text-color-subdued);
+    flex-basis: 100%;
+}
+
+#tp-hint {
+    font-size: 0.78rem;
+    color: var(--body-text-color-subdued);
+    padding: 0 0.2rem 0.3rem;
+}
+
+#tube-render-warning {
+    font-size: 0.8rem;
+    color: var(--body-text-color-subdued);
+    margin-top: -0.3rem !important;
+}
 """
 
 # Gradio 6.10's gr.Model3D leaves the Undo (reset view) button permanently
@@ -126,6 +174,254 @@ APP_HEAD = """
 </script>
 """
 
+# Client-side build animation for the G-Code Visualization tab. The rendered
+# Plotly figure carries per-point timestamps (cumulative path length) in
+# layout.meta.animation; this script reveals the print/travel traces up to a
+# moving time cutoff via Plotly.restyle, entirely in the browser. Event
+# listeners are delegated from document so they survive Gradio re-renders.
+TOOLPATH_ANIM_HEAD = """
+<script>
+(function () {
+    var anim = {
+        gd: null, meta: null, cache: null,
+        playing: false, scrubbing: false,
+        cutoff: 0, speed: 1,
+        lastTick: null, lastDraw: 0, raf: null
+    };
+
+    function findPlot() {
+        var container = document.getElementById('toolpath_plot');
+        return container ? container.querySelector('.js-plotly-plot') : null;
+    }
+
+    function ensureInit() {
+        var gd = findPlot();
+        if (!gd || !gd.data || !gd.layout || !gd.layout.meta || !gd.layout.meta.animation) {
+            return false;
+        }
+        var meta = gd.layout.meta.animation;
+        if (gd === anim.gd && meta === anim.meta && anim.cache) return true;
+
+        var cache = { printIdx: -1, travelIdx: -1, nozzleIdx: -1 };
+        for (var i = 0; i < gd.data.length; i++) {
+            var name = gd.data[i].name;
+            if (gd.data[i].type === 'mesh3d' && name === 'Print (G1)') cache.printIdx = i;
+            else if (gd.data[i].type === 'mesh3d' && name === 'Travel (G0)') cache.travelIdx = i;
+            else if (name === 'Nozzle') cache.nozzleIdx = i;
+        }
+        function snapMesh(idx, t) {
+            if (idx < 0 || !t || !t.length) return null;
+            var tr = gd.data[idx];
+            return {
+                i: Array.from(tr.i),
+                j: Array.from(tr.j),
+                k: Array.from(tr.k),
+                t: t
+            };
+        }
+        cache.printMesh = snapMesh(cache.printIdx, meta.print_face_t);
+        cache.travelMesh = snapMesh(cache.travelIdx, meta.travel_face_t);
+        cache.path = (meta.path_t && meta.path_t.length)
+            ? { x: meta.path_x, y: meta.path_y, z: meta.path_z, t: meta.path_t }
+            : null;
+
+        // Deduplicated move-boundary timestamps for frame stepping.
+        var times = cache.path ? cache.path.t : [];
+        cache.times = times.filter(function (v, j) { return j === 0 || v !== times[j - 1]; });
+
+        anim.gd = gd;
+        anim.meta = meta;
+        anim.cache = cache;
+        anim.cutoff = meta.total_length;
+        anim.playing = false;
+        return true;
+    }
+
+    function upperBound(arr, v) {
+        var lo = 0, hi = arr.length;
+        while (lo < hi) {
+            var mid = (lo + hi) >> 1;
+            if (arr[mid] <= v) lo = mid + 1; else hi = mid;
+        }
+        return lo;
+    }
+
+    function nozzlePos(path, cutoff) {
+        var n = upperBound(path.t, cutoff);
+        if (n <= 0) return [path.x[0], path.y[0], path.z[0]];
+        if (n >= path.t.length) {
+            var m = path.t.length - 1;
+            return [path.x[m], path.y[m], path.z[m]];
+        }
+        var t0 = path.t[n - 1], t1 = path.t[n];
+        var f = t1 > t0 ? (cutoff - t0) / (t1 - t0) : 1;
+        return [
+            path.x[n - 1] + (path.x[n] - path.x[n - 1]) * f,
+            path.y[n - 1] + (path.y[n] - path.y[n - 1]) * f,
+            path.z[n - 1] + (path.z[n] - path.z[n - 1]) * f
+        ];
+    }
+
+    function applyCutoff() {
+        if (!ensureInit()) return;
+        var c = anim.cache, cutoff = anim.cutoff;
+
+        if (c.nozzleIdx >= 0 && c.path) {
+            var pos = nozzlePos(c.path, cutoff);
+            Plotly.restyle(anim.gd, { x: [[pos[0]]], y: [[pos[1]]], z: [[pos[2]]] }, [c.nozzleIdx]);
+        }
+
+        var idxs = [], fis = [], fjs = [], fks = [];
+        [['travelMesh', c.travelIdx], ['printMesh', c.printIdx]].forEach(function (pair) {
+            var mesh = c[pair[0]], idx = pair[1];
+            if (!mesh || idx < 0) return;
+            var nf = upperBound(mesh.t, cutoff);
+            idxs.push(idx);
+            fis.push(mesh.i.slice(0, nf));
+            fjs.push(mesh.j.slice(0, nf));
+            fks.push(mesh.k.slice(0, nf));
+        });
+        if (idxs.length) Plotly.restyle(anim.gd, { i: fis, j: fjs, k: fks }, idxs);
+        syncUI();
+    }
+
+    function syncUI() {
+        if (!anim.meta) return;
+        var total = anim.meta.total_length || 1;
+        var frac = Math.max(0, Math.min(1, anim.cutoff / total));
+
+        var scrub = document.getElementById('tp-scrub');
+        if (scrub && !anim.scrubbing) scrub.value = String(Math.round(frac * 1000));
+
+        var readout = document.getElementById('tp-readout');
+        if (readout) {
+            var text = Math.round(frac * 100) + '% of path';
+            var ends = anim.meta.layer_t_end || [];
+            if (ends.length) {
+                var k = upperBound(ends, anim.cutoff);
+                if (k >= ends.length) k = ends.length - 1;
+                var start = k > 0 ? ends[k - 1] : 0;
+                var span = ends[k] - start;
+                var lp = span > 0 ? Math.round(((anim.cutoff - start) / span) * 100) : 100;
+                lp = Math.max(0, Math.min(100, lp));
+                text = 'Layer ' + (k + 1) + '/' + ends.length + ' \\u00b7 ' + lp + '% \\u2014 ' + text;
+            }
+            readout.textContent = text;
+        }
+    }
+
+    function setPlaying(on) {
+        anim.playing = on;
+        var btn = document.getElementById('tp-play');
+        if (btn) btn.innerHTML = on ? '&#9208; Pause' : '&#9654; Play';
+        if (on) {
+            anim.lastTick = null;
+            anim.raf = requestAnimationFrame(tick);
+        } else if (anim.raf) {
+            cancelAnimationFrame(anim.raf);
+            anim.raf = null;
+        }
+    }
+
+    function tick(ts) {
+        if (!anim.playing) return;
+        if (!ensureInit()) { setPlaying(false); return; }
+        if (anim.lastTick == null) anim.lastTick = ts;
+        var dt = (ts - anim.lastTick) / 1000;
+        anim.lastTick = ts;
+
+        // 1x speed plays the full build in 60 seconds.
+        var rate = (anim.meta.total_length / 60) * anim.speed;
+        anim.cutoff = Math.min(anim.meta.total_length, anim.cutoff + dt * rate);
+
+        if (anim.cutoff >= anim.meta.total_length) {
+            applyCutoff();
+            setPlaying(false);
+            return;
+        }
+        if (ts - anim.lastDraw >= 33) {  // cap redraws at ~30 fps
+            anim.lastDraw = ts;
+            applyCutoff();
+        }
+        anim.raf = requestAnimationFrame(tick);
+    }
+
+    document.addEventListener('click', function (e) {
+        var target = e.target.closest
+            ? e.target.closest('#tp-play, #tp-restart, #tp-step-back, #tp-step-fwd')
+            : null;
+        if (!target) return;
+        if (!ensureInit()) return;
+        var times = anim.cache.times || [];
+        if (target.id === 'tp-play') {
+            if (!anim.playing && anim.cutoff >= anim.meta.total_length) anim.cutoff = 0;
+            setPlaying(!anim.playing);
+        } else if (target.id === 'tp-step-fwd') {
+            setPlaying(false);
+            var i = upperBound(times, anim.cutoff);
+            if (i < times.length) { anim.cutoff = times[i]; applyCutoff(); }
+        } else if (target.id === 'tp-step-back') {
+            setPlaying(false);
+            // First index with times[i] >= cutoff, then step to the boundary before it.
+            var lo = 0, hi = times.length;
+            while (lo < hi) {
+                var mid = (lo + hi) >> 1;
+                if (times[mid] < anim.cutoff) lo = mid + 1; else hi = mid;
+            }
+            anim.cutoff = lo > 0 ? times[lo - 1] : 0;
+            applyCutoff();
+        } else {
+            setPlaying(false);
+            anim.cutoff = 0;
+            applyCutoff();
+        }
+    });
+
+    document.addEventListener('input', function (e) {
+        if (e.target && e.target.id === 'tp-scrub') {
+            if (!ensureInit()) return;
+            setPlaying(false);
+            anim.scrubbing = true;
+            anim.cutoff = (parseFloat(e.target.value) / 1000) * anim.meta.total_length;
+            applyCutoff();
+            anim.scrubbing = false;
+        }
+    });
+
+    document.addEventListener('change', function (e) {
+        if (e.target && e.target.id === 'tp-speed') {
+            anim.speed = parseFloat(e.target.value) || 1;
+        }
+    });
+})();
+</script>
+"""
+
+TOOLPATH_CONTROLS_HTML = """
+<div id="toolpath-anim-controls">
+    <button id="tp-restart" type="button" title="Back to start">&#9198;</button>
+    <button id="tp-step-back" type="button" title="Step back one move">&#9204;</button>
+    <button id="tp-play" type="button">&#9654; Play</button>
+    <button id="tp-step-fwd" type="button" title="Step forward one move">&#9205;</button>
+    <select id="tp-speed" title="Playback speed">
+        <option value="0.25">0.25&times;</option>
+        <option value="0.5">0.5&times;</option>
+        <option value="1" selected>1&times;</option>
+        <option value="2">2&times;</option>
+        <option value="5">5&times;</option>
+        <option value="10">10&times;</option>
+    </select>
+    <input id="tp-scrub" type="range" min="0" max="1000" value="1000" step="1"
+           title="Build progress">
+    <span id="tp-readout">Render a tool path, then press Play.</span>
+</div>
+<div id="tp-hint">
+    Tip: drag the plot to rotate and scroll to zoom &mdash; easiest while the
+    animation is paused. The &#9204; / &#9205; buttons step through the path
+    one move at a time.
+</div>
+"""
+
 
 def _read_slice_preview(path: str) -> Image.Image:
     with Image.open(path) as image:
@@ -691,17 +987,20 @@ GCODE_SOURCE_UPLOAD = "Upload G-Code file"
 
 
 def toggle_gcode_source(source: str) -> dict[str, Any]:
-    return gr.update(interactive=(source == GCODE_SOURCE_UPLOAD))
+    return gr.update(visible=(source == GCODE_SOURCE_UPLOAD))
 
 
 def render_toolpath(
     source: str,
     uploaded_path: str | None,
     shape1_path: str | None,
-    travel_opacity: float = 0.55,
+    travel_opacity: float = 0.25,
     print_opacity: float = 1.0,
     travel_color: str = "#969696",
     print_color: str = "#ff7f0e",
+    print_width: float = 0.8,
+    travel_width: float = 0.8,
+    tube: bool = True,
 ) -> tuple[Any, str, dict]:
     if source == GCODE_SOURCE_UPLOAD:
         path = uploaded_path
@@ -721,7 +1020,7 @@ def render_toolpath(
     if parsed["point_count"] == 0:
         return None, "No G0/G1 movement lines found in the file.", {}
 
-    figure = build_toolpath_figure(parsed, travel_opacity=travel_opacity, print_opacity=print_opacity, travel_color=travel_color, print_color=print_color)
+    figure = build_toolpath_figure(parsed, travel_opacity=travel_opacity, print_opacity=print_opacity, travel_color=travel_color, print_color=print_color, print_width=print_width, travel_width=travel_width, tube=tube)
     (x_min, y_min, z_min), (x_max, y_max, z_max) = parsed["bounds"]
     summary = (
         f"**{parsed['point_count']} moves parsed** — "
@@ -734,6 +1033,63 @@ def render_toolpath(
     return figure, summary, parsed
 
 
+def render_toolpath_lines(
+    source: str,
+    uploaded_path: str | None,
+    shape1_path: str | None,
+    travel_opacity: float,
+    print_opacity: float,
+    travel_color: str,
+    print_color: str,
+    print_width: float,
+    travel_width: float,
+) -> tuple[Any, str, dict, str, dict[str, Any], dict[str, Any]]:
+    figure, status, parsed = render_toolpath(
+        source, uploaded_path, shape1_path, travel_opacity, print_opacity,
+        travel_color, print_color, print_width, travel_width, tube=False,
+    )
+    return figure, status, parsed, "line", gr.update(visible=False), gr.update(visible=False)
+
+
+def render_toolpath_tubes(
+    source: str,
+    uploaded_path: str | None,
+    shape1_path: str | None,
+    travel_opacity: float,
+    print_opacity: float,
+    travel_color: str,
+    print_color: str,
+    print_width: float,
+    travel_width: float,
+) -> tuple[Any, str, dict, str, dict[str, Any], dict[str, Any]]:
+    figure, status, parsed = render_toolpath(
+        source, uploaded_path, shape1_path, travel_opacity, print_opacity,
+        travel_color, print_color, print_width, travel_width, tube=True,
+    )
+    # Playback controls and mm width sliders only apply to the tube figure.
+    has_animation = bool(parsed.get("point_count"))
+    return figure, status, parsed, "tube", gr.update(visible=has_animation), gr.update(visible=has_animation)
+
+
+def rerender_toolpath_current_mode(
+    mode: str,
+    source: str,
+    uploaded_path: str | None,
+    shape1_path: str | None,
+    travel_opacity: float,
+    print_opacity: float,
+    travel_color: str,
+    print_color: str,
+    print_width: float,
+    travel_width: float,
+) -> tuple[Any, str, dict]:
+    return render_toolpath(
+        source, uploaded_path, shape1_path, travel_opacity, print_opacity,
+        travel_color, print_color, print_width, travel_width,
+        tube=(mode != "line"),
+    )
+
+
 def update_toolpath_opacity(
     parsed: dict,
     travel_opacity: float,
@@ -870,7 +1226,7 @@ def generate_reference_stack(
     return ref_state, slider, label, preview
 
 def build_demo() -> gr.Blocks:
-    with gr.Blocks(title="STL TIFF Slicer", css=APP_CSS, head=APP_HEAD) as demo:
+    with gr.Blocks(title="STL TIFF Slicer", css=APP_CSS, head=APP_HEAD + TOOLPATH_ANIM_HEAD) as demo:
         with gr.Tab("STL to TIFF Slicer"):
             gr.Markdown(
                 """
@@ -1227,60 +1583,145 @@ def build_demo() -> gr.Blocks:
                 "### 3D Tool-Path Viewer\n"
                 "Choose a G-code source, then click **Render Tool Path** to visualize the nozzle path."
             )
+            # --- G-code source selection, above the controls/chart area ---
             with gr.Row():
                 gcode_source = gr.Radio(
                     choices=[GCODE_SOURCE_SHAPE1, GCODE_SOURCE_UPLOAD],
                     value=GCODE_SOURCE_SHAPE1,
                     label="G-Code source",
                 )
-                gcode_upload = gr.File(
-                    label="Upload G-Code",
-                    file_types=[".txt", ".gcode", ".nc"],
-                    interactive=False,
-                )
-            render_button = gr.Button("Render Tool Path", variant="primary")
+                # Visibility is toggled on this wrapper column rather than the
+                # File itself: a File that is the output of the toggle event
+                # gets stuck showing a progress overlay when first revealed.
+                with gr.Column(visible=False) as upload_col:
+                    gcode_upload = gr.File(
+                        label="Upload G-Code",
+                        file_types=[".txt", ".gcode", ".nc"],
+                        interactive=True,
+                        height=110,
+                    )
+
             with gr.Row():
-                travel_opacity_slider = gr.Slider(
-                    label="Travel (G0) opacity",
-                    minimum=0.0,
-                    maximum=1.0,
-                    value=0.55,
-                    step=0.05,
-                )
-                travel_color_picker = gr.Dropdown(
-                    label="Travel (G0) color",
-                    choices=[("Grey", "#969696"), ("Orange", "#ff7f0e"), ("Green", "#2ca02c"), ("Red", "#d62728"), ("Purple", "#9467bd"), ("Pink", "#e377c2"), ("Black", "#000000"), ("White", "#ffffff")],
-                    value="#969696",
-                    allow_custom_value=False,
-                )
-                print_opacity_slider = gr.Slider(
-                    label="Print (G1) opacity",
-                    minimum=0.0,
-                    maximum=1.0,
-                    value=1.0,
-                    step=0.05,
-                )
-                print_color_picker = gr.Dropdown(
-                    label="Print (G1) color",
-                    choices=[("Blue", "#1f77b4"), ("Orange", "#ff7f0e"), ("Green", "#2ca02c"), ("Red", "#d62728"), ("Purple", "#9467bd"), ("Pink", "#e377c2"), ("Black", "#000000"), ("White", "#ffffff")],
-                    value="#ff7f0e",
-                    allow_custom_value=False,
-                )
-            toolpath_plot = gr.Plot(label="Tool Path", elem_id="toolpath_plot")
-            toolpath_status = gr.Markdown("")
+                # --- Left column: render buttons and plot controls ---
+                with gr.Column(scale=1, min_width=340):
+                    render_line_button = gr.Button(
+                        "Render Tool Path - Line Plot", variant="primary"
+                    )
+                    render_tube_button = gr.Button(
+                        "Render Tool Path - Tube Plot with Animation", variant="primary"
+                    )
+                    gr.Markdown(
+                        "&#9888;&#65039; For high-resolution models (small layer "
+                        "heights), the tube plot can take a while to build and render.",
+                        elem_id="tube-render-warning",
+                    )
+                    anim_controls = gr.HTML(TOOLPATH_CONTROLS_HTML, visible=False)
+                    with gr.Row():
+                        travel_opacity_slider = gr.Slider(
+                            label="Travel (G0) opacity",
+                            minimum=0.0,
+                            maximum=1.0,
+                            value=0.25,
+                            step=0.05,
+                            min_width=150,
+                        )
+                        print_opacity_slider = gr.Slider(
+                            label="Print (G1) opacity",
+                            minimum=0.0,
+                            maximum=1.0,
+                            value=1.0,
+                            step=0.05,
+                            min_width=150,
+                        )
+                    with gr.Row():
+                        travel_color_picker = gr.Dropdown(
+                            label="Travel (G0) color",
+                            choices=[("Grey", "#969696"), ("Orange", "#ff7f0e"), ("Green", "#2ca02c"), ("Red", "#d62728"), ("Purple", "#9467bd"), ("Pink", "#e377c2"), ("Black", "#000000"), ("White", "#ffffff")],
+                            value="#969696",
+                            allow_custom_value=False,
+                            min_width=150,
+                        )
+                        print_color_picker = gr.Dropdown(
+                            label="Print (G1) color",
+                            choices=[("Blue", "#1f77b4"), ("Orange", "#ff7f0e"), ("Green", "#2ca02c"), ("Red", "#d62728"), ("Purple", "#9467bd"), ("Pink", "#e377c2"), ("Black", "#000000"), ("White", "#ffffff")],
+                            value="#ff7f0e",
+                            allow_custom_value=False,
+                            min_width=150,
+                        )
+                    with gr.Row(visible=False) as width_row:
+                        travel_width_slider = gr.Slider(
+                            label="Travel width (mm)",
+                            minimum=0.1,
+                            maximum=1.2,
+                            value=0.8,
+                            step=0.05,
+                            min_width=150,
+                        )
+                        print_width_slider = gr.Slider(
+                            label="Filament width (mm)",
+                            minimum=0.1,
+                            maximum=1.2,
+                            value=0.8,
+                            step=0.05,
+                            min_width=150,
+                        )
+                    toolpath_status = gr.Markdown("")
+
+                # --- Right column: the chart ---
+                with gr.Column(scale=3, min_width=500):
+                    toolpath_plot = gr.Plot(label="Tool Path", elem_id="toolpath_plot")
+
             parsed_state = gr.State({})
+            render_mode = gr.State("tube")
 
             gcode_source.change(
                 fn=toggle_gcode_source,
                 inputs=[gcode_source],
-                outputs=[gcode_upload],
+                outputs=[upload_col],
                 queue=False,
             )
-            render_button.click(
-                fn=render_toolpath,
-                inputs=[gcode_source, gcode_upload, gcode_file_1, travel_opacity_slider, print_opacity_slider, travel_color_picker, print_color_picker],
+            render_inputs = [gcode_source, gcode_upload, gcode_file_1, travel_opacity_slider, print_opacity_slider, travel_color_picker, print_color_picker, print_width_slider, travel_width_slider]
+            render_line_button.click(
+                fn=render_toolpath_lines,
+                inputs=render_inputs,
+                outputs=[toolpath_plot, toolpath_status, parsed_state, render_mode, anim_controls, width_row],
+            )
+            render_tube_button.click(
+                fn=render_toolpath_tubes,
+                inputs=render_inputs,
+                outputs=[toolpath_plot, toolpath_status, parsed_state, render_mode, anim_controls, width_row],
+            )
+            # Changing the travel width rebuilds the figure in the last-used mode.
+            travel_width_slider.release(
+                fn=rerender_toolpath_current_mode,
+                inputs=[render_mode] + render_inputs,
                 outputs=[toolpath_plot, toolpath_status, parsed_state],
             )
+            # Changing the filament width rebuilds the figure in the last-used mode.
+            print_width_slider.release(
+                fn=rerender_toolpath_current_mode,
+                inputs=[render_mode] + render_inputs,
+                outputs=[toolpath_plot, toolpath_status, parsed_state],
+            )
+            # Keep the filament and travel width sliders in sync with the
+            # Layer Height chosen on the slicing tab: default value equals the
+            # layer height, maximum is 50% above it.
+            def sync_width_sliders(v: float):
+                height = float(v or 0.8)
+                def width_update():
+                    return gr.update(
+                        value=height,
+                        minimum=min(0.1, height),
+                        maximum=height * 1.5,
+                    )
+                return width_update(), width_update()
+
+            layer_height.change(
+                fn=sync_width_sliders,
+                inputs=[layer_height],
+                outputs=[print_width_slider, travel_width_slider],
+                queue=False,
+            )
             travel_opacity_slider.release(
                 fn=None,
                 inputs=[travel_opacity_slider],
@@ -1322,10 +1763,11 @@ def build_demo() -> gr.Blocks:
                     if (!container) return [];
                     const plotDiv = container.querySelector(".js-plotly-plot");
                     if (!plotDiv || !plotDiv.data) return [];
-                    const indices = plotDiv.data
-                        .map((t, i) => t.name === "Travel (G0)" ? i : -1)
-                        .filter(i => i >= 0);
-                    if (indices.length > 0) Plotly.restyle(plotDiv, {"line.color": color}, indices);
+                    plotDiv.data.forEach((t, i) => {
+                        if (t.name !== "Travel (G0)") return;
+                        const attr = t.type === "mesh3d" ? {"color": color} : {"line.color": color};
+                        Plotly.restyle(plotDiv, attr, [i]);
+                    });
                     return [];
                 }"""
             )
@@ -1338,10 +1780,11 @@ def build_demo() -> gr.Blocks:
                     if (!container) return [];
                     const plotDiv = container.querySelector(".js-plotly-plot");
                     if (!plotDiv || !plotDiv.data) return [];
-                    const indices = plotDiv.data
-                        .map((t, i) => t.name === "Print (G1)" ? i : -1)
-                        .filter(i => i >= 0);
-                    if (indices.length > 0) Plotly.restyle(plotDiv, {"line.color": color}, indices);
+                    plotDiv.data.forEach((t, i) => {
+                        if (t.name !== "Print (G1)") return;
+                        const attr = t.type === "mesh3d" ? {"color": color} : {"line.color": color};
+                        Plotly.restyle(plotDiv, attr, [i]);
+                    });
                     return [];
                 }"""
             )

gcode_viewer.py

@@ -1,8 +1,10 @@
 from __future__ import annotations
 
+import math
 import re
 from pathlib import Path
 
+import numpy as np
 import plotly.graph_objects as go
 
 
@@ -19,6 +21,7 @@ def parse_gcode_path(gcode_text: str) -> dict:
 
     print_segments: list[list[tuple[float, float, float]]] = []
     travel_segments: list[list[tuple[float, float, float]]] = []
+    moves: list[dict] = []
     current_kind: str | None = None
     current_segment: list[tuple[float, float, float]] = []
 
@@ -71,6 +74,7 @@ def parse_gcode_path(gcode_text: str) -> dict:
                 z = dz
 
         kind = "print" if gcmd == "G1" else "travel"
+        moves.append({"kind": kind, "start": prev_pos, "end": (x, y, z)})
 
         if kind != current_kind:
             flush_segment()
@@ -92,14 +96,243 @@ def parse_gcode_path(gcode_text: str) -> dict:
     else:
         bounds = ((0.0, 0.0, 0.0), (0.0, 0.0, 0.0))
 
+    # Assign a layer index to every move. Layers are the distinct Z heights at
+    # which printing (G1) happens; travel moves (including the Z lift between
+    # layers) are attributed to the layer of the next print move so a layer's
+    # timeline starts with the approach travel and ends with its last print.
+    print_z = sorted({round(m["end"][2], 6) for m in moves if m["kind"] == "print"})
+    z_to_layer = {z: i for i, z in enumerate(print_z)}
+    next_print_layer = len(print_z) - 1 if print_z else 0
+    for move in reversed(moves):
+        if move["kind"] == "print":
+            next_print_layer = z_to_layer[round(move["end"][2], 6)]
+        move["layer"] = next_print_layer
+
     return {
         "print_segments": print_segments,
         "travel_segments": travel_segments,
+        "moves": moves,
+        "layer_count": len(print_z),
         "bounds": bounds,
         "point_count": len(all_x),
     }
 
 
+def _move_length(move: dict) -> float:
+    (x0, y0, z0), (x1, y1, z1) = move["start"], move["end"]
+    return math.sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2 + (z1 - z0) ** 2)
+
+
+def _chronological_trace_arrays(moves: list[dict]) -> dict:
+    """Build per-kind polyline arrays with a shared time axis for animation.
+
+    Each point gets a timestamp equal to the cumulative path length (print +
+    travel) at which the nozzle reaches it, so the browser can reveal both
+    traces in lockstep by slicing at a time cutoff. Gap markers (None) close a
+    trace's polyline whenever the move kind switches and carry the timestamp
+    of the segment they terminate.
+    """
+    arrays: dict[str, dict[str, list]] = {
+        "print": {"x": [], "y": [], "z": [], "t": []},
+        "travel": {"x": [], "y": [], "z": [], "t": []},
+    }
+    cum = 0.0
+    prev_kind: str | None = None
+    layer_end: dict[int, float] = {}
+
+    for move in moves:
+        trace = arrays[move["kind"]]
+        if move["kind"] != prev_kind:
+            if prev_kind is not None:
+                prev_trace = arrays[prev_kind]
+                prev_trace["x"].append(None)
+                prev_trace["y"].append(None)
+                prev_trace["z"].append(None)
+                prev_trace["t"].append(cum)
+            sx, sy, sz = move["start"]
+            trace["x"].append(sx)
+            trace["y"].append(sy)
+            trace["z"].append(sz)
+            trace["t"].append(cum)
+            prev_kind = move["kind"]
+        cum += _move_length(move)
+        ex, ey, ez = move["end"]
+        trace["x"].append(ex)
+        trace["y"].append(ey)
+        trace["z"].append(ez)
+        trace["t"].append(cum)
+        layer_end[move["layer"]] = cum
+
+    layer_count = (max(layer_end) + 1) if layer_end else 0
+    layer_t_end: list[float] = []
+    last = 0.0
+    for i in range(layer_count):
+        last = max(last, layer_end.get(i, last))
+        layer_t_end.append(last)
+
+    return {
+        "print": arrays["print"],
+        "travel": arrays["travel"],
+        "total_length": cum,
+        "layer_t_end": layer_t_end,
+    }
+
+
+def _path_arrays(moves: list[dict]) -> dict:
+    """Chronological nozzle positions with cumulative-length timestamps."""
+    xs = [moves[0]["start"][0]]
+    ys = [moves[0]["start"][1]]
+    zs = [moves[0]["start"][2]]
+    ts = [0.0]
+    cum = 0.0
+    for move in moves:
+        cum += _move_length(move)
+        ex, ey, ez = move["end"]
+        xs.append(ex)
+        ys.append(ey)
+        zs.append(ez)
+        ts.append(cum)
+    return {"x": xs, "y": ys, "z": zs, "t": ts}
+
+
+def _build_path_tube(
+    moves: list[dict],
+    radius: float,
+    kind: str = "print",
+    sides: int = 12,
+    max_rings: int = 5000,
+) -> dict:
+    """Extrude a tube of physical radius along the moves of the given kind.
+
+    Returns Mesh3d-ready vertex and face arrays. Rings are laid down in
+    chronological order and long moves are subdivided, so faces can be
+    revealed progressively by slicing the (sorted) per-face timestamps.
+    """
+    # Group consecutive moves of this kind into continuous runs (global times).
+    runs: list[tuple[list, list]] = []
+    cur_pts: list | None = None
+    cur_ts: list | None = None
+    cum = 0.0
+    for move in moves:
+        length = _move_length(move)
+        if move["kind"] == kind:
+            if cur_pts is None:
+                cur_pts = [move["start"]]
+                cur_ts = [cum]
+            cur_pts.append(move["end"])
+            cur_ts.append(cum + length)
+        elif cur_pts is not None:
+            runs.append((cur_pts, cur_ts))
+            cur_pts = cur_ts = None
+        cum += length
+    if cur_pts is not None:
+        runs.append((cur_pts, cur_ts))
+
+    total_print = sum(ts[-1] - ts[0] for _pts, ts in runs)
+    step = max(radius * 2.0, total_print / max_rings) if total_print > 0 else radius
+
+    xs: list[float] = []
+    ys: list[float] = []
+    zs: list[float] = []
+    fi: list[int] = []
+    fj: list[int] = []
+    fk: list[int] = []
+    face_t: list[float] = []
+    angles = np.linspace(0.0, 2.0 * np.pi, sides, endpoint=False)
+    cos_a, sin_a = np.cos(angles), np.sin(angles)
+
+    for pts, ts in runs:
+        # Subdivide long moves so the tube grows smoothly during playback.
+        sub_p = [np.asarray(pts[0], dtype=float)]
+        sub_t = [ts[0]]
+        for a in range(len(pts) - 1):
+            p0 = np.asarray(pts[a], dtype=float)
+            p1 = np.asarray(pts[a + 1], dtype=float)
+            seg = float(np.linalg.norm(p1 - p0))
+            pieces = max(1, math.ceil(seg / step))
+            for s in range(1, pieces + 1):
+                f = s / pieces
+                sub_p.append(p0 + (p1 - p0) * f)
+                sub_t.append(ts[a] + (ts[a + 1] - ts[a]) * f)
+
+        points = np.vstack(sub_p)
+        n_rings = len(points)
+        if n_rings < 2:
+            continue
+
+        # Per-ring tangents (averaged at interior points) and a perpendicular
+        # frame; vertical tangents fall back to the X axis for the side vector.
+        tangents = np.zeros_like(points)
+        tangents[1:-1] = points[2:] - points[:-2]
+        tangents[0] = points[1] - points[0]
+        tangents[-1] = points[-1] - points[-2]
+        norms = np.linalg.norm(tangents, axis=1, keepdims=True)
+        norms[norms == 0] = 1.0
+        tangents /= norms
+
+        side_vec = np.cross(tangents, np.array([0.0, 0.0, 1.0]))
+        side_norm = np.linalg.norm(side_vec, axis=1)
+        vertical = side_norm < 1e-6
+        if vertical.any():
+            side_vec[vertical] = np.cross(tangents[vertical], np.array([1.0, 0.0, 0.0]))
+        side_vec /= np.maximum(np.linalg.norm(side_vec, axis=1, keepdims=True), 1e-12)
+        up_vec = np.cross(side_vec, tangents)
+
+        base = len(xs)
+        rings = (
+            points[:, None, :]
+            + radius * (cos_a[None, :, None] * side_vec[:, None, :]
+                        + sin_a[None, :, None] * up_vec[:, None, :])
+        )
+        flat = np.round(rings.reshape(-1, 3), 4)
+        xs.extend(flat[:, 0].tolist())
+        ys.extend(flat[:, 1].tolist())
+        zs.extend(flat[:, 2].tolist())
+
+        # Center vertices for the end caps that close the tube.
+        cap_start = len(xs)
+        xs.append(round(float(points[0][0]), 4))
+        ys.append(round(float(points[0][1]), 4))
+        zs.append(round(float(points[0][2]), 4))
+        cap_end = len(xs)
+        xs.append(round(float(points[-1][0]), 4))
+        ys.append(round(float(points[-1][1]), 4))
+        zs.append(round(float(points[-1][2]), 4))
+
+        t_start = round(sub_t[0], 4)
+        t_end = round(sub_t[-1], 4)
+
+        # Start cap (fan around the first ring).
+        for k in range(sides):
+            k_next = (k + 1) % sides
+            fi.append(cap_start)
+            fj.append(base + k_next)
+            fk.append(base + k)
+            face_t.append(t_start)
+
+        for r in range(n_rings - 1):
+            r0 = base + r * sides
+            r1 = r0 + sides
+            t_face = round(sub_t[r + 1], 4)
+            for k in range(sides):
+                k_next = (k + 1) % sides
+                fi.extend((r0 + k, r0 + k))
+                fj.extend((r1 + k, r1 + k_next))
+                fk.extend((r1 + k_next, r0 + k_next))
+                face_t.extend((t_face, t_face))
+
+        # End cap (fan around the last ring).
+        last_ring = base + (n_rings - 1) * sides
+        for k in range(sides):
+            k_next = (k + 1) % sides
+            fi.append(cap_end)
+            fj.append(last_ring + k)
+            fk.append(last_ring + k_next)
+            face_t.append(t_end)
+
+    return {"x": xs, "y": ys, "z": zs, "i": fi, "j": fj, "k": fk, "face_t": face_t}
+
+
 def _segments_to_xyz(
     segments: list[list[tuple[float, float, float]]],
 ) -> tuple[list[float | None], list[float | None], list[float | None]]:
@@ -119,46 +352,116 @@ def _segments_to_xyz(
 
 def build_toolpath_figure(
     parsed: dict,
-    travel_opacity: float = 0.55,
+    travel_opacity: float = 0.25,
     print_opacity: float = 1.0,
     travel_color: str = "#969696",
     print_color: str = "#1f77b4",
+    print_width: float = 0.8,
+    travel_width: float = 0.8,
+    tube: bool = True,
 ) -> go.Figure:
-    print_xs, print_ys, print_zs = _segments_to_xyz(parsed["print_segments"])
-    travel_xs, travel_ys, travel_zs = _segments_to_xyz(parsed["travel_segments"])
+    moves = parsed.get("moves") or []
 
     fig = go.Figure()
+    meta = None
 
-    if travel_xs:
+    def add_tube_trace(tube: dict, name: str, color: str, opacity: float) -> None:
         fig.add_trace(
-            go.Scatter3d(
-                x=travel_xs,
-                y=travel_ys,
-                z=travel_zs,
-                mode="lines",
-                name="Travel (G0)",
-                opacity=travel_opacity,
-                line=dict(color=travel_color, width=2, dash="dot"),
+            go.Mesh3d(
+                x=tube["x"],
+                y=tube["y"],
+                z=tube["z"],
+                i=tube["i"],
+                j=tube["j"],
+                k=tube["k"],
+                color=color,
+                opacity=opacity,
+                name=name,
+                showlegend=True,
                 hoverinfo="skip",
+                lighting=dict(ambient=0.55, diffuse=0.8, specular=0.15, roughness=0.6),
             )
         )
 
-    if print_xs:
+    if moves and tube:
+        chrono = _chronological_trace_arrays(moves)
+
+        # Physical-width tubes along both paths: filament-like rendering whose
+        # thickness scales with zoom (widths are diameters in mm).
+        travel_tube = _build_path_tube(
+            moves, radius=max(travel_width, 0.05) / 2.0, kind="travel"
+        )
+        if travel_tube["i"]:
+            add_tube_trace(travel_tube, "Travel (G0)", travel_color, travel_opacity)
+
+        print_tube = _build_path_tube(
+            moves, radius=max(print_width, 0.05) / 2.0, kind="print"
+        )
+        if print_tube["i"]:
+            add_tube_trace(print_tube, "Print (G1)", print_color, print_opacity)
+
+        # Nozzle position marker, driven client-side during playback.
+        end_x, end_y, end_z = moves[-1]["end"]
         fig.add_trace(
             go.Scatter3d(
-                x=print_xs,
-                y=print_ys,
-                z=print_zs,
-                mode="lines",
-                name="Print (G1)",
-                opacity=print_opacity,
-                line=dict(color=print_color, width=4),
-                hovertemplate="X=%{x:.2f}<br>Y=%{y:.2f}<br>Z=%{z:.2f}<extra></extra>",
+                x=[end_x],
+                y=[end_y],
+                z=[end_z],
+                mode="markers",
+                name="Nozzle",
+                marker=dict(size=5, color="#d62728"),
+                showlegend=False,
+                hoverinfo="skip",
             )
         )
 
+        path = _path_arrays(moves)
+        meta = {
+            "animation": {
+                "travel_face_t": travel_tube["face_t"],
+                "print_face_t": print_tube["face_t"],
+                "path_x": path["x"],
+                "path_y": path["y"],
+                "path_z": path["z"],
+                "path_t": path["t"],
+                "layer_t_end": chrono["layer_t_end"],
+                "total_length": chrono["total_length"],
+            }
+        }
+    else:
+        travel_xs, travel_ys, travel_zs = _segments_to_xyz(parsed["travel_segments"])
+        if travel_xs:
+            fig.add_trace(
+                go.Scatter3d(
+                    x=travel_xs,
+                    y=travel_ys,
+                    z=travel_zs,
+                    mode="lines",
+                    name="Travel (G0)",
+                    opacity=travel_opacity,
+                    line=dict(color=travel_color, width=2),
+                    hoverinfo="skip",
+                )
+            )
+        print_xs, print_ys, print_zs = _segments_to_xyz(parsed["print_segments"])
+        if print_xs:
+            fig.add_trace(
+                go.Scatter3d(
+                    x=print_xs,
+                    y=print_ys,
+                    z=print_zs,
+                    mode="lines",
+                    name="Print (G1)",
+                    opacity=print_opacity,
+                    line=dict(color=print_color, width=4),
+                    hovertemplate="X=%{x:.2f}<br>Y=%{y:.2f}<br>Z=%{z:.2f}<extra></extra>",
+                )
+            )
+
     (x_min, y_min, z_min), (x_max, y_max, z_max) = parsed["bounds"]
     fig.update_layout(
+        meta=meta,
+        height=700,
         uirevision="toolpath",
         scene=dict(
             xaxis_title="X (mm)",