deepseek-harness/packages/client/ui-primitives/src/TerminalBlock.module.css

/* Geometry mirrors CodeBlock (12px radius, code-block surface + banner rows,
   markdown code-block font) so a terminal card and a fenced code block read as
   one family. The one deliberate divergence: output keeps `white-space: pre`
   and scrolls horizontally, because folding a column-aligned command's output
   destroys its alignment. */

.block {
  --dsl-terminal-radius: 12px;
  --dsl-terminal-line-height: 22px;
  /* Reserved strip to the left of the card for the per-line run-state dots.
     The dots sit outside the card surface, so a reader scans command state
     down one column without the dots competing with the commands themselves. */
  --dsl-terminal-gutter: 30px;

  position: relative;
  margin: 16px 0 16px var(--dsl-terminal-gutter);
  color: var(--dsw-alias-label-primary);
  background: var(--dsw-alias-markdown-code-block);
  border-radius: var(--dsl-terminal-radius);
}

/* Top-aligned: the status pill and copy control stay on the first prompt row
   however many command lines the card carries. */
.header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 14px;
  background: var(--dsw-alias-markdown-code-block-banner);
  border-top-left-radius: var(--dsl-terminal-radius);
  border-top-right-radius: var(--dsl-terminal-radius);
}

/* One row per command line. The prompt column is the only element allowed to
   shrink; the status pill and the copy control keep their intrinsic width. */
.prompt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  font: var(--dsw-font-markdown-code-block);
}

.promptLine {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  line-height: var(--dsl-terminal-line-height);
}

/* Out of flow in the gutter, so a dot neither indents its command nor depends
   on the command's own text metrics to line up with it. Centered against the
   row's line box rather than sitting on the code font's baseline. */
.runState {
  position: absolute;
  left: calc(-1 * var(--dsl-terminal-gutter));
  top: 50%;
  transform: translateY(-50%);
}

/* The dot is aria-hidden; this is its text label for assistive technology. */
.runStateLabel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cwd {
  flex: none;
  color: var(--dsw-alias-label-tertiary);
}

/* `pre`, not `nowrap`: the prompt row renders the command verbatim, and
   `nowrap` collapses the repeated spaces, tabs, and alignment of an indented
   continuation. Both hold the single row and the ellipsis. */
.command {
  min-width: 0;
  color: var(--dsw-alias-label-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
}

.status {
  flex: none;
  color: var(--dsw-alias-state-error-primary);
}

.copyButton {
  flex: none;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--dsw-alias-label-secondary);
  cursor: pointer;
  font: var(--dsw-font-xs-13);
}

.output {
  padding: 12px 14px;
  font: var(--dsw-font-markdown-code-block);
  overflow-x: auto;
  overflow-y: hidden;
}

/* No wrapping, no word-break: alignment is the payload of terminal output. */
.line {
  min-height: var(--dsl-terminal-line-height);
  white-space: pre;
}

.expand {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background-color: transparent;
  color: var(--dsw-alias-label-tertiary);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.expand:hover {
  color: var(--dsw-alias-label-secondary);
}

.empty {
  padding: 12px 14px;
  font: var(--dsw-font-markdown-code-block);
  color: var(--dsw-alias-label-tertiary);
}