d2582b8dc1
The write/edit tools already declare card:'diff' with applied hunks on callView/resultView, but the Web client discarded it: a mutation landed on GenericToolCard and the details panel flattened the result to a <pre>. Add DiffBlock (ui-primitives), diff-card-model (the single callView/resultView derivation), and FileMutationRow (keyed under write and edit), and make the generic fallback row and the details panel diff-aware. The +/- block form, per-file path header, same-file gap, and footer mirror the TUI diff card; the chat row caps at CHAT_DIFF_MAX_LINES against the panel's full height.
103 lines
2.7 KiB
CSS
103 lines
2.7 KiB
CSS
/* Geometry mirrors CodeBlock/TerminalBlock (12px radius, code-block surface +
|
|
banner row, markdown code-block font) so a diff card reads as one family with
|
|
a fenced block and a terminal card. The deliberate divergence, shared with
|
|
TerminalBlock: the body keeps `white-space: pre` and scrolls horizontally,
|
|
because folding a source line destroys the indentation a diff is read by. */
|
|
|
|
.block {
|
|
--dsl-diff-radius: 12px;
|
|
--dsl-diff-line-height: 22px;
|
|
|
|
position: relative;
|
|
margin: 16px 0;
|
|
color: var(--dsw-alias-label-primary);
|
|
background: var(--dsw-alias-markdown-code-block);
|
|
border-radius: var(--dsl-diff-radius);
|
|
}
|
|
|
|
/* The copy control floats in the top-right corner over the body, so the card
|
|
has no empty banner row above its first diff line (the TUI diff card has no
|
|
banner either — only the footer). The block is position: relative, so this
|
|
anchors to the card. */
|
|
.copyButton {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 12px;
|
|
z-index: 1;
|
|
background-color: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
color: var(--dsw-alias-label-secondary);
|
|
cursor: pointer;
|
|
font: var(--dsw-font-xs-13);
|
|
}
|
|
|
|
.body {
|
|
padding: 12px 14px;
|
|
font: var(--dsw-font-markdown-code-block);
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
/* No wrapping, no word-break: a diff is read by its indentation. */
|
|
.line {
|
|
min-height: var(--dsl-diff-line-height);
|
|
white-space: pre;
|
|
}
|
|
|
|
/* A file header: the path in the primary tone, set apart by weight. */
|
|
.path {
|
|
color: var(--dsw-alias-label-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* A same-file second hunk's separator (a scattered edit), in the dim tone. */
|
|
.gap {
|
|
color: var(--dsw-alias-label-tertiary);
|
|
}
|
|
|
|
/* The diff's own meaning-carrying colors: removed on the error token, added on
|
|
the success token. A `- `/`+ ` prefix is drawn here so a copied line and the
|
|
shown line agree, and so the sign reads without relying on color alone. */
|
|
.del::before {
|
|
content: '- ';
|
|
color: var(--dsw-alias-state-error-primary);
|
|
}
|
|
|
|
.del {
|
|
color: var(--dsw-alias-state-error-primary);
|
|
}
|
|
|
|
.add::before {
|
|
content: '+ ';
|
|
color: var(--dsw-alias-state-success-primary);
|
|
}
|
|
|
|
.add {
|
|
color: var(--dsw-alias-state-success-primary);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* The change summary, dim under the body: `└ +A -R · N file(s)`, the same
|
|
footer the TUI transcript's diff card draws. */
|
|
.footer {
|
|
padding: 0 14px 12px;
|
|
font: var(--dsw-font-markdown-code-block);
|
|
color: var(--dsw-alias-label-tertiary);
|
|
}
|