feat(workbench): redesign investigation reports and diagrams
This commit is contained in:
+239
@@ -1257,6 +1257,245 @@ button.agent-history-session-trigger:not(:disabled):active {
|
||||
column-gap: 0;
|
||||
}
|
||||
|
||||
/* Investigation reading surface: diagrams and evidence share the report's typography. */
|
||||
.investigation-report {
|
||||
min-width: 0;
|
||||
border: 1px solid var(--surface-divider);
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.investigation-report-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.investigation-report-header > button { flex-shrink: 0; }
|
||||
|
||||
.investigation-report-section {
|
||||
min-width: 0;
|
||||
padding: 1rem;
|
||||
border-top: 1px solid var(--surface-divider);
|
||||
}
|
||||
|
||||
.investigation-report-update {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--action-selection-soft);
|
||||
color: var(--ink);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.investigation-action-summary {
|
||||
display: grid;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
|
||||
.investigation-action-summary-detail {
|
||||
color: var(--ink-muted);
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.investigation-timeline {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
padding-block: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
.investigation-timeline::before {
|
||||
position: absolute;
|
||||
inset-block: 0.65rem 0.9rem;
|
||||
inset-inline-start: 0.1875rem;
|
||||
width: 1px;
|
||||
background: var(--surface-divider);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.investigation-timeline-item {
|
||||
position: relative;
|
||||
padding-inline-start: 1rem;
|
||||
}
|
||||
|
||||
.investigation-timeline-item::before {
|
||||
position: absolute;
|
||||
inset-block-start: 0.45rem;
|
||||
inset-inline-start: 0;
|
||||
width: 0.4375rem;
|
||||
height: 0.4375rem;
|
||||
border: 1px solid var(--action-blue);
|
||||
border-radius: 999px;
|
||||
background: var(--surface-reading);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.investigation-diagram {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--surface-divider);
|
||||
border-radius: 0.75rem;
|
||||
background: var(--palette-paper);
|
||||
}
|
||||
|
||||
.investigation-diagram [data-streamdown="mermaid"] { margin-block: 0; }
|
||||
.investigation-diagram .font-mono { display: none; }
|
||||
.investigation-diagram [data-streamdown="mermaid"] { background: var(--palette-paper); }
|
||||
.investigation-diagram [data-streamdown="mermaid"] [role="img"] { width: 100%; }
|
||||
.investigation-diagram .node { cursor: pointer; }
|
||||
.investigation-diagram .node:hover { filter: brightness(0.97); }
|
||||
|
||||
/* Match Button's compact icon-sm size, including controls portalled to body. */
|
||||
button[type="button"]:has(> .investigation-diagram-control-icon) {
|
||||
--diagram-control-size: 2rem;
|
||||
--diagram-control-icon-size: 1rem;
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: var(--diagram-control-size);
|
||||
height: var(--diagram-control-size);
|
||||
flex: 0 0 auto;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.5rem;
|
||||
background: transparent;
|
||||
color: var(--ink-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button[type="button"]:has(> .investigation-diagram-control-icon)::after {
|
||||
position: absolute;
|
||||
inset: -4px;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.investigation-diagram-control-icon {
|
||||
width: var(--diagram-control-icon-size);
|
||||
height: var(--diagram-control-icon-size);
|
||||
flex-shrink: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
div:has(> button > [data-investigation-diagram-control="zoom-in"]),
|
||||
.investigation-diagram [data-streamdown="mermaid-block-actions"] {
|
||||
gap: 8px;
|
||||
padding: 4px;
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: var(--radius-control);
|
||||
background: var(--surface-control);
|
||||
box-shadow: none;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
|
||||
.investigation-diagram [data-streamdown="mermaid-block"] > div:first-child { display: none; }
|
||||
.investigation-diagram [data-streamdown="mermaid-block"] > div:has(> [data-streamdown="mermaid-block-actions"]) {
|
||||
height: auto;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
button[type="button"]:has(> [data-investigation-diagram-control="close"]) {
|
||||
position: absolute;
|
||||
border-color: var(--surface-border);
|
||||
background: var(--surface-control);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
button[type="button"]:has(> .investigation-diagram-control-icon):hover:not(:disabled) {
|
||||
border-color: var(--action-border-hover);
|
||||
background: var(--action-soft);
|
||||
color: var(--action-blue-hover);
|
||||
}
|
||||
}
|
||||
|
||||
button[type="button"]:has(> .investigation-diagram-control-icon):active:not(:disabled) {
|
||||
border-color: var(--action-border-pressed);
|
||||
background: var(--action-soft-pressed);
|
||||
color: var(--action-blue-pressed);
|
||||
box-shadow: var(--action-shadow-secondary-pressed);
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
button[type="button"]:has(> .investigation-diagram-control-icon):focus-visible {
|
||||
outline: 2px solid var(--action-focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
button[type="button"]:has(> .investigation-diagram-control-icon):disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.investigation-node-link,
|
||||
.investigation-history-row {
|
||||
border: 1px solid var(--surface-divider);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem 0.625rem;
|
||||
color: var(--ink-muted);
|
||||
text-align: left;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25rem;
|
||||
transition: background-color 120ms, color 120ms, transform 120ms;
|
||||
}
|
||||
|
||||
.investigation-node-link[aria-pressed="true"],
|
||||
.investigation-history-row[aria-pressed="true"] {
|
||||
border-color: var(--action-selection-border);
|
||||
background: var(--action-selection-soft);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.investigation-history-row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
margin-block: 0.5rem;
|
||||
}
|
||||
|
||||
.investigation-text-action {
|
||||
padding-block: 0.375rem;
|
||||
color: var(--action-blue-hover);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.investigation-node-link:focus-visible,
|
||||
.investigation-history-row:focus-visible,
|
||||
.investigation-text-action:focus-visible {
|
||||
outline: 2px solid var(--action-focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.investigation-node-link:active,
|
||||
.investigation-history-row:active,
|
||||
.investigation-text-action:active { transform: scale(0.98); }
|
||||
|
||||
@media (hover: hover) {
|
||||
.investigation-node-link:hover,
|
||||
.investigation-history-row:hover { background: var(--action-selection-soft); color: var(--ink); }
|
||||
.investigation-text-action:hover { text-decoration: underline; }
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.investigation-report-header { flex-wrap: wrap; }
|
||||
.investigation-report-section,
|
||||
.investigation-report-header { padding: 0.75rem; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.investigation-node-link,
|
||||
.investigation-history-row { transition: none; }
|
||||
}
|
||||
|
||||
.scheduled-feed-shell-enter {
|
||||
animation:
|
||||
scheduled-feed-shell-show 170ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||
|
||||
Reference in New Issue
Block a user