v1.2.0
  1. ds
  2. Operations
  3. Terminal

Terminal

Commands and output, always dark.

prod-ap-south-1 · zsh
$kubectl -n payments rollout status deploy/checkout-api
Waiting for deployment "checkout-api" rollout to finish: 2 of 6 updated replicas are available...
Waiting for deployment "checkout-api" rollout to finish: 4 of 6 updated replicas are available...
deployment "checkout-api" successfully rolled out
$kubectl -n payments get pods -l app=checkout-api
NAME                            READY   STATUS             RESTARTS   AGE
checkout-api-7d9f8c6b5d-2xk4p   1/1     Running            0          2m
checkout-api-7d9f8c6b5d-9qz7w   1/1     Running            0          2m
checkout-api-7d9f8c6b5d-mf3lc   0/1     CrashLoopBackOff   4          2m
checkout-api-7d9f8c6b5d-t8hvn   1/1     Running            0          1m
$
Code
<div class="term">
  <div class="term-bar"><span>prod-ap-south-1 · zsh</span><button class="btn xs" data-copy="kubectl -n payments rollout status deploy/checkout-api">Copy</button></div>
<pre><span class="ps">$</span><span class="cmd">kubectl -n payments rollout status deploy/checkout-api</span>
<span class="d">Waiting for deployment "checkout-api" rollout to finish: 2 of 6 updated replicas are available...</span>
<span class="d">Waiting for deployment "checkout-api" rollout to finish: 4 of 6 updated replicas are available...</span>
deployment "checkout-api" successfully rolled out
<span class="ps">$</span><span class="cmd">kubectl -n payments get pods -l app=checkout-api</span>
<span class="hi">NAME                            READY   STATUS             RESTARTS   AGE</span>
checkout-api-7d9f8c6b5d-2xk4p   1/1     <span class="g">Running</span>            0          2m
checkout-api-7d9f8c6b5d-9qz7w   1/1     <span class="g">Running</span>            0          2m
checkout-api-7d9f8c6b5d-mf3lc   0/1     <span class="r">CrashLoopBackOff</span>   4          2m
checkout-api-7d9f8c6b5d-t8hvn   1/1     <span class="g">Running</span>            0          1m
<span class="ps">$</span><span class="cursor"></span></pre>
</div>

A terminal is always dark, in both themes. It is the one surface in ds that ignores the theme, because a light terminal reads as a screenshot of the wrong thing. Colours come from the dark tones, so green, red and amber match the status colours elsewhere on the page. The prompt is the accent and never selectable, so copying a block gives only the commands and output.

Long runs

dbt run --select martsexit 1 · 2m 41s
14:30:02  Running with dbt=1.9.2
14:30:04  Found 48 models, 112 tests, 6 sources
14:30:05  1 of 4 START sql table model marts.fct_orders ............. [RUN]
14:31:12  1 of 4 OK created sql table model marts.fct_orders ........ [SELECT 4120983 in 67.2s]
14:31:12  2 of 4 START sql table model marts.fct_payments ........... [RUN]
14:32:40  2 of 4 ERROR creating sql table model marts.fct_payments .. [ERROR in 88.1s]
14:32:41  3 of 4 SKIP relation marts.dim_merchants .................. [SKIP]
14:32:43  Database Error in model fct_payments
14:32:43    column "settled_at" does not exist
14:32:43  Done. PASS=1 WARN=0 ERROR=1 SKIP=2 TOTAL=4
Show code
<div class="term">
  <div class="term-bar"><span>dbt run --select marts</span><span>exit 1 · 2m 41s</span></div>
<pre><span class="d">14:30:02</span>  Running with dbt=1.9.2
<span class="d">14:30:04</span>  Found 48 models, 112 tests, 6 sources
<span class="d">14:30:05</span>  1 of 4 START sql table model marts.fct_orders ............. [<span class="b">RUN</span>]
<span class="d">14:31:12</span>  1 of 4 OK created sql table model marts.fct_orders ........ [<span class="g">SELECT 4120983</span> in 67.2s]
<span class="d">14:31:12</span>  2 of 4 START sql table model marts.fct_payments ........... [<span class="b">RUN</span>]
<span class="d">14:32:40</span>  2 of 4 ERROR creating sql table model marts.fct_payments .. [<span class="r">ERROR</span> in 88.1s]
<span class="d">14:32:41</span>  3 of 4 SKIP relation marts.dim_merchants .................. [<span class="y">SKIP</span>]
<span class="d">14:32:43</span>  <span class="r">Database Error in model fct_payments</span>
<span class="d">14:32:43</span>    column "settled_at" does not exist
<span class="d">14:32:43</span>  Done. PASS=1 WARN=0 <span class="r">ERROR=1</span> <span class="y">SKIP=2</span> TOTAL=4</pre>
</div>
ClassOnWhat it does
.termdivThe frame, dark in both themes.
.term-bardivTitle on the left, an action or exit status on the right.
.term prepreThe body. Scrolls sideways; never wraps.
.psspanThe prompt, in the accent, not selectable.
.cmd / .hi / .dspanA typed command, bright output such as a header row, dim output.
.g .r .y .b .m .cspanGreen, red, yellow, blue, magenta, cyan: the dark tones.
.cursorspanA blinking block cursor.
Do
  • Real output, trimmed. Keep the lines that matter and say how many were cut.
  • A copy button that copies the command, not the output.
  • Exit status and duration in the bar for finished runs.
Don't
  • Fake window buttons. The frame says terminal already.
  • Colour on everything. Most output is plain.
  • Light terminals in light mode.

Accessibility

  • It is a <pre>, so screen readers read it as text. Status words such as Running and ERROR carry the meaning, not their colour.
  • Reduced motion stops the cursor blinking.