deepseek-harness/packages/client/ui-conversation/src/client/chat/ToolRow.module.css

/* Tool summary row (figma 122:9479): 24px single line —
   [16 leading] gap6 [title 14/24] gap8 [2x2 dot] gap8 [summary FILL truncate]. */

.root {
  display: flex;
  flex-direction: column;
}

.row {
  position: relative; /* sweep-glare overlay anchor */
  overflow: hidden;
}

/* Running sweep (deepsuite ShimmerText pattern): a fixed-width glare band —
   theme background at 60% — glides over the row content from off-left to
   off-right, washing glyphs and icon toward the background as it passes.
   ease-out with a 10% end hold gives each pass a beat before the next. */
.root[data-state='running'] .row::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--dsw-alias-bg-base) 60%, transparent) 55%,
    transparent 100%
  );
  animation: dsh-tool-row-sweep 2.6s ease-out infinite;
  pointer-events: none;
}

@keyframes dsh-tool-row-sweep {
  0% { left: -300px; }
  90%, 100% { left: 100%; }
}

.leading {
  flex-shrink: 0;
}

/* Cordis lifecycle tools retain their generic row mechanics while carrying a
   shared product accent and tool-owned action title. */
.root[data-tool^='cordis_'] .leading,
.root[data-tool^='cordis_'] .title {
  color: var(--dsw-alias-state-business-primary);
}

.root[data-tool^='cordis_'] .title {
  font-weight: 500;
}

.root[data-tool^='cordis_'] .sep {
  background: var(--dsw-alias-state-business-primary);
}

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

.title {
  font-weight: 400;
}

.sep {
  flex: none;
  width: 2px;
  height: 2px;
  border-radius: 1px;
  margin: 0 8px;
  background: var(--dsw-alias-label-caption);
}

.summary {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 24px;
  color: var(--dsw-alias-label-tertiary);
}

/* File-tool path: same geometry as .summary; hover underline + pointer. */
.fileLink {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  font-size: 14px;
  line-height: 24px;
  color: var(--dsw-alias-label-tertiary);
  cursor: pointer;
}

.fileLink:hover {
  text-decoration: underline;
}

/* Error row's collapsed summary: the failure's first line in the error color. */
.errorSummary {
  color: var(--dsw-alias-state-error-primary);
}

/* Expanded body + Inspect pill wrapper (sibling of .row: clicks never toggle). */
.bodyWrap {
  display: flex;
  flex-direction: column;
}

/* Hover-revealed jump to the trajectory record: a small pill in real flow
   under the expanded body's bottom-left corner (it reserves its line, so
   revealing never shifts layout); revealed by hovering anywhere on the tool
   call — title row included — or by keyboard focus. */
.inspectButton {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  margin: 4px 0 2px 4px;
  padding: 2px 8px;
  border: 1px solid var(--dsw-alias-border-l2);
  border-radius: 999px;
  /* Base background, not bg-overlay: the overlay token is a raised dark
     surface and reads too heavy for a quiet in-flow affordance. */
  background: var(--dsw-alias-bg-base);
  color: var(--dsw-alias-label-secondary);
  font-size: 11px;
  line-height: 16px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 100ms ease;
}

.root:hover .inspectButton,
.inspectButton:focus-visible {
  opacity: 1;
}

/* Solid hover fill (a translucent token would let content bleed through). */
.inspectButton:hover {
  background: var(--dsw-alias-interactive-bg-hover-solid);
  color: var(--dsw-alias-label-primary);
}

/* Expanded-body scroll wrapper for the run_code CodeBlock; the IN/OUT card
   and the terminal card scroll INSIDE their own surface instead, so the
   scrollbar sits within the rounded card. */
.bodyScroll {
  max-height: 260px;
  overflow-y: auto;
}

/* Think expanded body: plain indented gray reasoning prose — no IN/OUT card
   (the reasoning is not an input payload), pre-wrapped at the row's indent.
   Uncapped: reasoning reads as message prose, so it flows with the page
   instead of scrolling in a box. */
.thinkBody {
  padding: 4px 0 4px 22px;
  font-size: 14px;
  line-height: 24px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--dsw-alias-label-tertiary);
}

/* Expanded input/output card (figma 1249:35657): the code-block surface and
   radius from the TerminalBlock/CodeBlock family. The card itself is a plain
   column — the padding and the IN/OUT gutter-label grid live on each section
   so the divider spans the full card width and each section scrolls alone. */
.ioCard {
  display: flex;
  flex-direction: column;
  margin: 4px 0 4px 4px;
  border: 1px solid var(--dsw-alias-border-l1);
  border-radius: 12px;
  background: var(--dsw-alias-markdown-code-block);
  font: var(--dsw-font-markdown-code-block-small);
}

/* One card section (IN or OUT): the gutter-label grid, capped and scrolling
   independently so a long input never buries a short output (and vice versa). */
.ioSection {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 14px;
  align-items: baseline;
  padding: 12px 16px;
  max-height: 150px;
  overflow-y: auto;
}

/* Card-internal scrollbar: a 2px transparent border clips the thumb inward so
   it floats off the rounded card edge instead of hugging it (the terminal
   card's own output scroller carries the same treatment in TerminalBlock). */
.ioSection::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 6px;
}

/* Track end-margins keep the thumb's travel out of the rounded corners. */
.ioSection::-webkit-scrollbar-track {
  margin: 6px 0;
}

/* Caption (not tertiary): one step dimmer than the payload text so the
   gutter labels read as labels, not as part of the content. Sticky against
   the section's own scroll so the label stays readable while its payload
   scrolls underneath (top 0 = the section's padding edge inside the
   scrollport; start-aligned because sticky needs a block-start anchor). */
.ioLabel {
  position: sticky;
  top: 0;
  align-self: start;
  color: var(--dsw-alias-label-caption);
}

/* l2 hairline between the IN and OUT sections, spanning the full card width
   (it sits between the padded sections, not inside their grid). */
.ioDivider {
  flex: none;
  height: 1px;
  background: var(--dsw-alias-border-l2);
}

.ioText {
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--dsw-alias-label-secondary);
}

/* A failed call's OUT text shares the collapsed summary's error color. */
.ioText[data-error] {
  color: var(--dsw-alias-state-error-primary);
}

/* The block-shaped expanded bodies: the code variant's run_code program
   through CodeBlock (shiki-highlighted TypeScript), a terminal card's command
   output through TerminalBlock, and a search card's grouped matches or path
   list through SearchBlock. All are drawn by the shared primitive, so only the
   row's indentation is this file's concern — the margin also replaces each
   primitive's own standalone vertical spacing with the flow's row rhythm. */
.codeBody,
.terminalBody,
.searchBody {
  margin: 4px 0 4px 4px;
}

/* The recovery footer for a capped search: the result text (its `Full … stored
   at …` locator) below the card in the muted tone, since the card holds only the
   retained rows. Same column indent as the card body. */
.searchRecovery {
  margin: 4px 0 4px 4px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: var(--dsw-font-xs-13);
  color: var(--dsw-alias-label-tertiary);
}

/* A write/edit diff renders through DiffBlock; like the terminal card it draws
   its own surface, so only the row indentation is this file's concern. */
.diffBody {
  margin: 4px 0 4px 4px;
}

/* In-row code renders at the smaller code size (12/18) via each primitive's
   rebindable content-font seam; standalone markdown code blocks keep 13/22. */
.codeBody {
  --dsl-code-block-content-font: var(--dsw-font-markdown-code-block-small);
}

/* The terminal card scrolls its OUTPUT inside its own surface (same l1
   hairline as the IN/OUT card): the banner stays pinned and the scrollbar
   never rides over it. 224px = the 260px card cap minus the ~36px banner. */
.terminalBody {
  --dsl-terminal-font: var(--dsw-font-markdown-code-block-small);
  --dsl-terminal-line-height: 18px;
  --dsl-terminal-output-max-height: 224px;
  border: 1px solid var(--dsw-alias-border-l1);
}