# \[Product Update\] New Step Output UI

**URL:** <https://discuss.circleci.com/t/product-update-new-step-output-ui/48419>\
**Category:** Build Environment\
**Tags:** ui\
**Created:** [June 20, 2023, 1:58pm UTC](https://discuss.circleci.com/t/product-update-new-step-output-ui/48419 "2023-06-20T13:58:40Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![sebastian-lerner](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/sebastian-lerner/32/27833_2.png) [@sebastian-lerner](https://discuss.circleci.com/u/sebastian-lerner)\
**Post date:** [June 20, 2023, 1:58pm UTC](https://discuss.circleci.com/t/product-update-new-step-output-ui/48419/1 "2023-06-20T13:58:40Z")

</div>

As part of improving the resiliency, scalability and quality of the CircleCI platform, CircleCI has updated the underlying systems that handle how “[steps](https://circleci.com/docs/jobs-steps/#steps-overview)” make it to from the agents that execute work on compute to CircleCI’s storage systems and eventually to the CircleCI UI.

As part of this change, the terminal shown in the UI is being replaced with [Xterm.js](http://xterm.js/), a framework used by VS Code, Eclipse, and other common developer tools.

**Benefits for users:**

- Increased reliability of CircleCI’s platform
- _New UI:_
  - Vastly improved performance and rendering quality / robustness.
  - No cap on log output in the UI
  - Terminal control codes are now processed in the UI
  - URLs are clickable from the step output UI

CircleCI projects will be gradually migrated starting June 23, 2023. If you have any feedback or concerns with the new step output UI, please comment here.

New step output UI examples (better rendering of tables, clickable links, ansci escape codes)

 ![Screen Shot 2023-07-26 at 1.07.26 PM](https://global.discourse-cdn.com/circleci/original/3X/6/6/666f84c06b92f36ec09bf4496651abf6fa6a9161.png)

 ![Screen Shot 2023-07-26 at 1.39.32 PM](https://global.discourse-cdn.com/circleci/original/3X/9/b/9b06d32c6d3e8985488c9eb792447287446ecf08.png)

 ![Screen Shot 2023-07-26 at 1.42.01 PM](https://global.discourse-cdn.com/circleci/original/3X/c/7/c7e11913c727fceada1ca37744d1ff7874d1ed7a.png)

---

<div class="post-metadata">

**Author:** ![mgabeler-lee-6rs](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/mgabeler-lee-6rs/32/23046_2.png) [@mgabeler-lee-6rs](https://discuss.circleci.com/u/mgabeler-lee-6rs)\
**Post date:** [July 24, 2023, 7:35pm UTC](https://discuss.circleci.com/t/product-update-new-step-output-ui/48419/2 "2023-07-24T19:35:16Z")

</div>

This update is visually lovely, but it has removed the ability to search the step output text, which is a significant frustration for larger monorepo projects.

---

<div class="post-metadata">

**Author:** ![sebastian-lerner](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/sebastian-lerner/32/27833_2.png) [@sebastian-lerner](https://discuss.circleci.com/u/sebastian-lerner)\
**Post date:** [July 24, 2023, 7:47pm UTC](https://discuss.circleci.com/t/product-update-new-step-output-ui/48419/3 "2023-07-24T19:47:40Z")

</div>

@mgabeler-lee-6rs the search functionality is a little different but it should still work. cmd/ctrl+f should take you to the search box for the open step. Or you can manually open a search box by clicking on the magnifying glass.

Are you referring to a different kind of search functionality?

---

<div class="post-metadata">

**Author:** ![mgabeler-lee-6rs](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/mgabeler-lee-6rs/32/23046_2.png) [@mgabeler-lee-6rs](https://discuss.circleci.com/u/mgabeler-lee-6rs)\
**Post date:** [July 24, 2023, 8:04pm UTC](https://discuss.circleci.com/t/product-update-new-step-output-ui/48419/4 "2023-07-24T20:04:32Z")

</div>

Nope, that’s what I’m referring to. It does not find any text inside the canvas elements.

---

<div class="post-metadata">

**Author:** ![mgabeler-lee-6rs](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/mgabeler-lee-6rs/32/23046_2.png) [@mgabeler-lee-6rs](https://discuss.circleci.com/u/mgabeler-lee-6rs)\
**Post date:** [July 24, 2023, 8:05pm UTC](https://discuss.circleci.com/t/product-update-new-step-output-ui/48419/5 "2023-07-24T20:05:50Z")

</div>

Correction – ctrl-f opens the browser page search most of the time for me. the custom step search only opens on ctrl-f if I click in the canvas first. confusing.

---

<div class="post-metadata">

**Author:** ![sebastian-lerner](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/sebastian-lerner/32/27833_2.png) [@sebastian-lerner](https://discuss.circleci.com/u/sebastian-lerner)\
**Post date:** [July 24, 2023, 8:36pm UTC](https://discuss.circleci.com/t/product-update-new-step-output-ui/48419/6 "2023-07-24T20:36:10Z")

</div>

Odd, I can try to check with the team to see if that’s expected or not. One clarifying question, is the only difference clicking on the canvas page? Or are you also “expanding” a step? (clicking on the name of the step to open up the terminal output).

---

<div class="post-metadata">

**Author:** ![mgabeler-lee-6rs](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/mgabeler-lee-6rs/32/23046_2.png) [@mgabeler-lee-6rs](https://discuss.circleci.com/u/mgabeler-lee-6rs)\
**Post date:** [July 24, 2023, 10:46pm UTC](https://discuss.circleci.com/t/product-update-new-step-output-ui/48419/7 "2023-07-24T22:46:13Z")

</div>

Yeah, it seems to have to do with where “focus” is after expanding a step. When I first expand it, or if I explicitly click inside it after expanding, focus is in there and ctrl-f redirects to the special search for that single step. But if I say click outside it so the scroll wheel scrolls the page instead of the step (which I personally do a LOT), then ctrl-f goes back to the browser find that can’t search the canvas contents.

This also means that, if I wanted to, I’d be unable to search in multiple step outputs at once, but that’s less of a concern.

---

<div class="post-metadata">

**Author:** ![TaxBusby](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/taxbusby/32/33454_2.png) [@TaxBusby](https://discuss.circleci.com/u/TaxBusby)\
**Post date:** [July 25, 2023, 7:46pm UTC](https://discuss.circleci.com/t/product-update-new-step-output-ui/48419/8 "2023-07-25T19:46:06Z")

</div>

Did this change the API responses for step output? I have some scripts which parse step output and they are now failing to parse outputs.

---

<div class="post-metadata">

**Author:** ![TaxBusby](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/taxbusby/32/33454_2.png) [@TaxBusby](https://discuss.circleci.com/u/TaxBusby)\
**Post date:** [July 25, 2023, 8:08pm UTC](https://discuss.circleci.com/t/product-update-new-step-output-ui/48419/9 "2023-07-25T20:08:18Z")

</div>

I think I was using an undocumented job step output API, but I’ll share the details in case anyone else was as well:

```auto
/api/v1.1/project/{project_slug}/{job_number}/output/{output_number}/0?file=true

```

It looks like console coloring characters are now being returned in this response. e.g. `\x1b[0m`.

I’m now stripping them out and my scripts and they are working again.

---

<div class="post-metadata">

**Author:** ![sebastian-lerner](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/sebastian-lerner/32/27833_2.png) [@sebastian-lerner](https://discuss.circleci.com/u/sebastian-lerner)\
**Post date:** [July 25, 2023, 8:49pm UTC](https://discuss.circleci.com/t/product-update-new-step-output-ui/48419/10 "2023-07-25T20:49:13Z")

</div>

@mgabeler-lee-6rs Thanks for the clarity, I’m talking with my Design & UX team to see what makes the most sense for behavior.

@TaxBusby Apologies for that “breaking change”. We have indeed stopped removing escape characters, so that would explain what you are seeing. Let me know if you run into any other additional issues and I’ll make sure to communicate changes like this ahead of time going forward.

---

<div class="post-metadata">

**Author:** ![benoittgt](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/benoittgt/32/11580_2.png) [@benoittgt](https://discuss.circleci.com/u/benoittgt)\
**Post date:** [July 26, 2023, 1:18pm UTC](https://discuss.circleci.com/t/product-update-new-step-output-ui/48419/11 "2023-07-26T13:18:44Z")

</div>

Hello

What is the status of the rollout? We are waiting for the clickable link since few month and at the moment, it is still not clickable.

Thanks

---

<div class="post-metadata">

**Author:** ![sebastian-lerner](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/sebastian-lerner/32/27833_2.png) [@sebastian-lerner](https://discuss.circleci.com/u/sebastian-lerner)\
**Post date:** [July 26, 2023, 1:40pm UTC](https://discuss.circleci.com/t/product-update-new-step-output-ui/48419/12 "2023-07-26T13:40:56Z")

</div>

@benoittgt it’s currently rolled out to ~30% of all projects across our user base. If you send me a list of projects, I can opt those in right now. Feel free to send them to sebastian @ [circleci.com](http://circleci.com)

---

<div class="post-metadata">

**Author:** ![mgabeler-lee-6rs](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/mgabeler-lee-6rs/32/23046_2.png) [@mgabeler-lee-6rs](https://discuss.circleci.com/u/mgabeler-lee-6rs)\
**Post date:** [July 26, 2023, 5:27pm UTC](https://discuss.circleci.com/t/product-update-new-step-output-ui/48419/13 "2023-07-26T17:27:55Z")

</div>

Another issue I’ve found with this: it has broken the ability to view step output during execution from the VSCode extension. Output from completed steps is visible, but the currently running step displays nothing.

---

<div class="post-metadata">

**Author:** ![sebastian-lerner](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/sebastian-lerner/32/27833_2.png) [@sebastian-lerner](https://discuss.circleci.com/u/sebastian-lerner)\
**Post date:** [July 26, 2023, 8:26pm UTC](https://discuss.circleci.com/t/product-update-new-step-output-ui/48419/14 "2023-07-26T20:26:19Z")

</div>

@mgabeler-lee-6rs thanks for raising that. Checking with the team that owns the VSCode extension on that.

---

<div class="post-metadata">

**Author:** ![mgabeler-lee-6rs](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/mgabeler-lee-6rs/32/23046_2.png) [@mgabeler-lee-6rs](https://discuss.circleci.com/u/mgabeler-lee-6rs)\
**Post date:** [August 2, 2023, 4:53pm UTC](https://discuss.circleci.com/t/product-update-new-step-output-ui/48419/15 "2023-08-02T16:53:51Z")

</div>

One more issue with the “find text in step output” – the “custom” find tool works in the normal job view, but it’s absent from the single-step view (/pipelines/PROVIDER/ORG/REPO/N/workflows/U/jobs/N/parallel-runs/N/steps/N-N), which makes text search there impossible right now

---

<div class="post-metadata">

**Author:** ![sebastian-lerner](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/sebastian-lerner/32/27833_2.png) [@sebastian-lerner](https://discuss.circleci.com/u/sebastian-lerner)\
**Post date:** [August 2, 2023, 5:11pm UTC](https://discuss.circleci.com/t/product-update-new-step-output-ui/48419/16 "2023-08-02T17:11:46Z")

</div>

@mgabeler-lee-6rs Good find, working with the team on an action plan.

Also regarding viewing live output via the VSCode extension, we are planning on fixing that. I’ll update here when it’s fixed.

---

<div class="post-metadata">

**Author:** ![wyardley](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/wyardley/32/19231_2.png) [@wyardley](https://discuss.circleci.com/u/wyardley)\
**Post date:** [August 2, 2023, 6:24pm UTC](https://discuss.circleci.com/t/product-update-new-step-output-ui/48419/17 "2023-08-02T18:24:24Z")

</div>

> [@sebastian-lerner](#):
>
> sebastian @ [circleci.com](http://circleci.com)

I’m curious if this will help by supporting more / extended terminal colors (see [Inspec terminal coloring](https://discuss.circleci.com/t/inspec-terminal-coloring/26308), for example)?

I sent you an email - thanks for the offer of enabling it early for specific projects.

---

<div class="post-metadata">

**Author:** ![wyardley](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/wyardley/32/19231_2.png) [@wyardley](https://discuss.circleci.com/u/wyardley)\
**Post date:** [August 2, 2023, 8:02pm UTC](https://discuss.circleci.com/t/product-update-new-step-output-ui/48419/18 "2023-08-02T20:02:18Z")

</div>

> [@sebastian-lerner](#):
>
> Xterm

ps – Can confirm that it resolved some longstanding terminal issues with CLI output that uses extended colors 🎉

---

<div class="post-metadata">

**Author:** ![wyardley](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/wyardley/32/19231_2.png) [@wyardley](https://discuss.circleci.com/u/wyardley)\
**Post date:** [August 3, 2023, 3:27am UTC](https://discuss.circleci.com/t/product-update-new-step-output-ui/48419/19 "2023-08-03T03:27:26Z")

</div>

Mentioned this on email too, but one minor (but annoying) thing I’m noticing (maybe the VSCode connection) is that there’s often an extra empty line at the end of the output on certain steps (maybe CRLF getting rendered at the end). I can confirm that locally, there’s no extra line in the output.

old:

 ![image](https://global.discourse-cdn.com/circleci/original/3X/1/c/1c932af1fc40b22ab1983194d5c23746d87da1b6.png)

new:

 ![image](https://global.discourse-cdn.com/circleci/original/3X/e/0/e0635ab5b7b9e73bb6f55523638f9c17fd6f4667.png)

Happens on some of the builtin steps too.

---

<div class="post-metadata">

**Author:** ![sebastian-lerner](https://sea2.discourse-cdn.com/circleci/user_avatar/discuss.circleci.com/sebastian-lerner/32/27833_2.png) [@sebastian-lerner](https://discuss.circleci.com/u/sebastian-lerner)\
**Post date:** [August 3, 2023, 3:25pm UTC](https://discuss.circleci.com/t/product-update-new-step-output-ui/48419/20 "2023-08-03T15:25:56Z")

</div>

@wyardley taking a look at that extra line with the team now. It might be expected behavior as most tools tend to end their output with a new line…but I’m double checking.

@mgabeler-lee-6rs single-step view should have search now enabled. Let me know if you run into any other additional issues, appreciate the feedback.

[Next page](https://discuss.circleci.com/t/product-update-new-step-output-ui/48419.md?page=2)
