langchain_agentx_stream_ui 0.1.0 → 0.1.2

package/dist/default.css

@@ -292,6 +292,7 @@
   font-size: 0.875rem;
   line-height: var(--lax-density-line-height, 1.35);
   margin: var(--lax-density-block-margin-y, 0.125rem) 0;
+  white-space: nowrap;
 }
 
 .lax-thought-summary__text {
@@ -717,6 +718,16 @@
   color: var(--lax-foreground);
 }
 
+.lax-markdown--rich {
+  font-size: 0.9375rem;
+  line-height: 1.55;
+}
+
+.lax-text-bubble__content--markdown.lax-markdown--rich,
+.lax-text-bubble__content .lax-markdown--rich {
+  font-size: 0.9375rem;
+}
+
 /* P2：块顶不留白（首子元素 / 首标题） */
 .lax-markdown > :first-child {
   margin-top: 0;
@@ -948,6 +959,396 @@
   width: 100%;
 }
 
+/* Rich Markdown — Mermaid */
+.lax-mermaid {
+  margin: 0.75rem 0;
+  border: 1px solid var(--lax-border, rgba(0, 0, 0, 0.1));
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--lax-background, #fff);
+}
+
+.lax-mermaid--loading {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  font-size: 0.8125rem;
+  color: var(--lax-muted, #666);
+}
+
+.lax-mermaid__loading-dots {
+  display: inline-flex;
+  gap: 0.2rem;
+}
+
+.lax-mermaid__loading-dots span {
+  width: 0.35rem;
+  height: 0.35rem;
+  border-radius: 50%;
+  background: var(--lax-accent-primary, #6366f1);
+  opacity: 0.7;
+  animation: lax-mermaid-pulse 1.2s ease-in-out infinite;
+}
+
+.lax-mermaid__loading-dots span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.lax-mermaid__loading-dots span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+@keyframes lax-mermaid-pulse {
+  0%, 80%, 100% { opacity: 0.35; transform: scale(0.9); }
+  40% { opacity: 1; transform: scale(1); }
+}
+
+.lax-mermaid__loading-text {
+  font-style: italic;
+}
+
+.lax-mermaid__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  border-bottom: 1px solid var(--lax-border-color, rgba(0, 0, 0, 0.1));
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.lax-mermaid__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.lax-mermaid__label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--lax-muted, #666);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.lax-mermaid__expand,
+.lax-mermaid__copy {
+  font-size: 0.75rem;
+  padding: 0.15rem 0.4rem;
+  border: 1px solid var(--lax-border-color, rgba(0, 0, 0, 0.15));
+  border-radius: 4px;
+  background: var(--lax-card-bg, #fff);
+  color: var(--lax-foreground);
+  cursor: pointer;
+}
+
+.lax-mermaid__expand:hover,
+.lax-mermaid__copy:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.lax-mermaid__canvas {
+  overflow: auto;
+  max-height: 480px;
+  padding: 0.5rem;
+}
+
+.lax-mermaid__canvas--zoom {
+  min-height: 320px;
+}
+
+.lax-mermaid__canvas--clickable {
+  cursor: zoom-in;
+}
+
+.lax-mermaid__canvas--clickable:focus-visible {
+  outline: 2px solid var(--lax-accent-primary, #6366f1);
+  outline-offset: 2px;
+}
+
+.lax-mermaid__canvas svg {
+  display: block;
+  margin: 0 auto;
+  min-width: min-content;
+}
+
+.lax-mermaid__fallback {
+  padding: 0.75rem;
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--lax-muted, #666);
+  white-space: pre-wrap;
+  font-family: var(--lax-font-mono, monospace);
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.lax-mermaid__error-text {
+  padding: 0.5rem 0.75rem;
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--lax-color-error, #c00);
+}
+
+/* Mermaid 全屏预览 */
+.lax-mermaid-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: rgba(0, 0, 0, 0.65);
+}
+
+.lax-mermaid-modal__panel {
+  display: flex;
+  flex-direction: column;
+  width: min(64rem, 100%);
+  max-height: 90vh;
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--lax-card-bg, #fff);
+  border: 1px solid var(--lax-border-color, rgba(0, 0, 0, 0.12));
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
+}
+
+.lax-mermaid-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--lax-border-color, rgba(0, 0, 0, 0.1));
+}
+
+.lax-mermaid-modal__title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--lax-foreground);
+}
+
+.lax-mermaid-modal__controls {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.lax-mermaid-modal__zoom {
+  min-width: 3rem;
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--lax-muted, #666);
+}
+
+.lax-mermaid-modal__btn {
+  font-size: 0.8125rem;
+  min-width: 1.75rem;
+  padding: 0.2rem 0.45rem;
+  border: 1px solid var(--lax-border-color, rgba(0, 0, 0, 0.15));
+  border-radius: 4px;
+  background: var(--lax-card-bg, #fff);
+  color: var(--lax-foreground);
+  cursor: pointer;
+}
+
+.lax-mermaid-modal__btn:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.lax-mermaid-modal__body {
+  flex: 1;
+  overflow: auto;
+  padding: 1rem;
+  background: rgba(0, 0, 0, 0.02);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.lax-mermaid-modal__canvas {
+  transition: transform 0.2s ease-out;
+}
+
+/* Rich Markdown — PlantUML */
+.lax-plantuml {
+  margin: 0.75rem 0;
+  border: 1px solid var(--lax-border-color, rgba(0, 0, 0, 0.1));
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--lax-card-bg, #fff);
+}
+
+.lax-plantuml--loading {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  font-size: 0.8125rem;
+  color: var(--lax-muted, #666);
+}
+
+.lax-plantuml__loading-dots {
+  display: inline-flex;
+  gap: 0.2rem;
+}
+
+.lax-plantuml__loading-dots span {
+  width: 0.35rem;
+  height: 0.35rem;
+  border-radius: 50%;
+  background: var(--lax-accent-primary, #6366f1);
+  opacity: 0.7;
+  animation: lax-mermaid-pulse 1.2s ease-in-out infinite;
+}
+
+.lax-plantuml__loading-dots span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.lax-plantuml__loading-dots span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+.lax-plantuml__loading-text {
+  font-style: italic;
+}
+
+.lax-plantuml__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  border-bottom: 1px solid var(--lax-border-color, rgba(0, 0, 0, 0.1));
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.lax-plantuml__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.lax-plantuml__label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--lax-muted, #666);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.lax-plantuml__expand,
+.lax-plantuml__copy {
+  font-size: 0.75rem;
+  padding: 0.15rem 0.4rem;
+  border: 1px solid var(--lax-border-color, rgba(0, 0, 0, 0.15));
+  border-radius: 4px;
+  background: var(--lax-card-bg, #fff);
+  color: var(--lax-foreground);
+  cursor: pointer;
+}
+
+.lax-plantuml__expand:hover,
+.lax-plantuml__copy:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.lax-plantuml__canvas {
+  overflow: auto;
+  max-height: 480px;
+  padding: 0.5rem;
+}
+
+.lax-plantuml__canvas--clickable {
+  cursor: zoom-in;
+}
+
+.lax-plantuml__canvas svg {
+  display: block;
+  margin: 0 auto;
+  min-width: min-content;
+}
+
+.lax-plantuml__fallback {
+  padding: 0.75rem;
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--lax-muted, #666);
+  white-space: pre-wrap;
+  font-family: var(--lax-font-mono, monospace);
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.lax-plantuml__error-text {
+  padding: 0.5rem 0.75rem;
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--lax-color-error, #c00);
+}
+
+/* Rich Markdown — code highlight */
+.lax-markdown--rich pre {
+  overflow-x: auto;
+  padding: 0.75rem 1rem;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.04);
+  font-size: 0.8125rem;
+  line-height: 1.45;
+}
+
+.lax-markdown--rich code {
+  font-family: var(--lax-font-mono, ui-monospace, monospace);
+  font-size: 0.875em;
+}
+
+.lax-markdown--rich :not(pre) > code {
+  padding: 0.1em 0.35em;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.lax-markdown--rich h1,
+.lax-markdown--rich h2,
+.lax-markdown--rich h3,
+.lax-markdown--rich h4 {
+  margin-top: 1.25em;
+  margin-bottom: 0.5em;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.lax-markdown--rich h1 { font-size: 1.5em; }
+.lax-markdown--rich h2 { font-size: 1.25em; }
+.lax-markdown--rich h3 { font-size: 1.1em; }
+
+.lax-markdown--rich blockquote {
+  margin: 0.75em 0;
+  padding-left: 1em;
+  border-left: 3px solid var(--lax-border, rgba(0, 0, 0, 0.15));
+  color: var(--lax-muted-foreground, #555);
+}
+
+.lax-markdown--rich table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 0.75em 0;
+  font-size: 0.875em;
+}
+
+.lax-markdown--rich th,
+.lax-markdown--rich td {
+  border: 1px solid var(--lax-border, rgba(0, 0, 0, 0.12));
+  padding: 0.4rem 0.6rem;
+  text-align: left;
+}
+
+.lax-markdown--rich th {
+  background: rgba(0, 0, 0, 0.03);
+  font-weight: 600;
+}
+
 /* ============================================================================
    子 Agent 块
    ============================================================================ */
@@ -1362,3 +1763,424 @@
   color: var(--lax-muted);
   font-size: 0.875rem;
 }
+
+/* Model API retry（对齐 CC SystemAPIErrorMessage / ⎿ 折叠块） */
+.lax-model-retry {
+  margin-bottom: var(--lax-density-block-margin-y, 0.125rem);
+}
+
+.lax-model-retry__toggle {
+  width: 100%;
+  text-align: left;
+}
+
+.lax-model-retry__summary {
+  color: var(--lax-muted);
+  font-family: var(--lax-font-mono);
+}
+
+.lax-model-retry__inline-countdown {
+  color: var(--lax-muted);
+  opacity: 0.85;
+}
+
+.lax-model-retry__body {
+  padding-left: 1.1rem;
+  margin-top: 0.125rem;
+}
+
+.lax-model-retry__error-text {
+  margin: 0.25rem 0 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--lax-font-mono);
+  font-size: 0.82rem;
+  color: var(--lax-color-error, #c0392b);
+}
+
+.lax-model-retry__category,
+.lax-model-retry__category-only {
+  color: var(--lax-muted);
+  font-size: 0.875rem;
+}
+
+.lax-model-retry__countdown {
+  color: var(--lax-muted);
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}
+
+.lax-model-retry__hint {
+  color: var(--lax-muted);
+  font-size: 0.82rem;
+  margin-left: 0.35rem;
+}
+
+/* ============================================================================
+   Workflow 容器树（D23 P2）
+   ============================================================================ */
+
+.lax-workflow-session.lax-agent-session {
+  --lax-workflow-indent-unit: 1rem;
+  --lax-workflow-indent: calc(var(--lax-workflow-depth, 0) * var(--lax-workflow-indent-unit, 1rem));
+}
+
+.lax-workflow-chrome {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.lax-workflow-container-line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.25rem 0.35rem;
+  width: 100%;
+  font-size: 0.9375rem;
+}
+
+.lax-workflow-container-line--interactive {
+  padding: 0.125rem 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.lax-workflow-container-line--root .lax-workflow-container-line__title {
+  font-weight: 600;
+}
+
+.lax-workflow-container-line__desc {
+  color: var(--lax-muted);
+  font-weight: 400;
+  font-size: 0.875rem;
+}
+
+.lax-workflow-container-line__meta,
+.lax-workflow-container-line__debug {
+  color: var(--lax-muted);
+  font-size: 0.8125rem;
+}
+
+.lax-workflow-container-line__status {
+  margin-left: auto;
+  font-size: 0.8125rem;
+  text-transform: lowercase;
+  color: var(--lax-muted);
+}
+
+.lax-workflow-container-line--static-toggle {
+  cursor: pointer;
+}
+
+.lax-workflow-expand-trigger {
+  display: block;
+  width: 100%;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  padding: 0.125rem 0;
+  padding-left: 1.1rem;
+  margin-top: 0.125rem;
+}
+
+.lax-workflow-expand-trigger:hover .lax-workflow-expand-trigger__summary,
+.lax-workflow-expand-trigger:hover .lax-workflow-expand-trigger__hint {
+  text-decoration: underline;
+  text-decoration-color: var(--lax-muted);
+}
+
+.lax-workflow-expand-trigger:focus-visible {
+  outline: 2px solid var(--lax-highlight);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.lax-workflow-expand-trigger__summary {
+  display: block;
+  color: var(--lax-muted);
+  font-size: 0.8125rem;
+}
+
+.lax-workflow-expand-trigger__teaser {
+  display: block;
+  padding-left: 0.5rem;
+  margin-top: 0.125rem;
+  font-size: 0.875rem;
+  color: var(--lax-foreground);
+}
+
+.lax-workflow-expand-trigger__hint {
+  display: block;
+  padding-left: 0.5rem;
+  margin-top: 0.125rem;
+  color: var(--lax-muted);
+  font-size: 0.75rem;
+}
+
+.lax-workflow-stage-container__done-teaser {
+  padding-left: 1.1rem;
+  margin-top: 0.125rem;
+}
+
+.lax-workflow-stage-container__done-teaser-line {
+  display: block;
+  font-size: 0.875rem;
+  color: var(--lax-foreground);
+}
+
+.lax-workflow-stage-container__empty-hint {
+  padding-left: 1.1rem;
+}
+
+.lax-workflow-stage-container__empty-hint-text {
+  color: var(--lax-muted);
+  font-size: 0.8125rem;
+  font-style: italic;
+}
+
+.lax-workflow-stage-list {
+  list-style: none;
+  margin: 0.35rem 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.lax-workflow-stage-list__item {
+  margin: 0;
+  padding: 0;
+}
+
+/*
+ * D25 Phase 1：.lax-workflow-virtual-list 及其变体不再被 workflow 主链路引用。
+ * 保留样式定义以兼容仍可能引用 WorkflowVirtualRowList 的回滚路径（风险 R1）。
+ */
+.lax-workflow-virtual-list {
+  position: relative;
+  overflow: auto;
+  max-height: min(70vh, 720px);
+}
+
+.lax-workflow-stage-list--virtual,
+.lax-workflow-parallel-list--virtual {
+  list-style: none;
+  margin: 0.35rem 0 0;
+  padding: 0;
+}
+
+.lax-workflow-stage-list__show-all {
+  display: block;
+  margin: 0.5rem 0 0;
+  padding: 0.35rem 0.5rem;
+  border: 1px dashed var(--lax-border, rgba(128, 128, 128, 0.35));
+  border-radius: 0.25rem;
+  background: transparent;
+  color: var(--lax-muted);
+  font: inherit;
+  font-size: 0.8125rem;
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+}
+
+.lax-workflow-stage-list__show-all:hover {
+  color: var(--lax-fg, inherit);
+  border-color: var(--lax-accent-primary, currentColor);
+}
+
+.lax-workflow-stage-list__hidden-hint {
+  margin: 0.35rem 0 0;
+  font-size: 0.75rem;
+  color: var(--lax-muted);
+  font-style: italic;
+}
+
+.lax-workflow-loop-replay-pending__hint {
+  color: var(--lax-muted);
+  font-size: 0.8125rem;
+  font-style: italic;
+  margin: 0.25rem 0 0;
+}
+
+.lax-workflow-stage-container {
+  padding-left: var(--lax-workflow-indent, 0);
+}
+
+.lax-workflow-stage-container__header,
+.lax-workflow-parallel-item__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.25rem 0.5rem;
+  width: 100%;
+  padding: 0.125rem 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.lax-workflow-stage-container__status-dot[data-status='running'],
+.lax-workflow-container-line__status-dot[data-status='running'] {
+  color: var(--lax-color-success, #2d7d46);
+  animation: lax-pulse 1s ease-in-out infinite;
+}
+
+.lax-workflow-stage-container__status-dot[data-status='done'] {
+  color: var(--lax-color-done, var(--lax-accent-primary));
+}
+
+.lax-workflow-stage-container__status-dot[data-status='pending'] {
+  color: var(--lax-muted);
+  opacity: 0.5;
+}
+
+.lax-workflow-stage-container__status-dot[data-status='failed'] {
+  color: var(--lax-color-error, var(--lax-highlight));
+}
+
+.lax-workflow-stage-container__status-dot::before {
+  content: '●';
+}
+
+.lax-workflow-stage-container__status-dot[data-status='pending']::before {
+  content: '◻';
+}
+
+.lax-workflow-stage-container__status-dot[data-status='skipped'] {
+  color: var(--lax-muted);
+  opacity: 0.35;
+}
+
+.lax-workflow-stage-container__status-dot[data-status='skipped']::before {
+  content: '◌';
+}
+
+.lax-workflow-stage-container__title {
+  font-weight: 500;
+}
+
+.lax-workflow-stage-container__progress,
+.lax-workflow-stage-container__run-status {
+  color: var(--lax-muted);
+  font-size: 0.8125rem;
+}
+
+.lax-workflow-stage-container__subtitle {
+  color: var(--lax-muted);
+  font-size: 0.8125rem;
+  padding-left: 1.1rem;
+  margin-top: 0.125rem;
+}
+
+.lax-workflow-stage-container__body,
+.lax-workflow-parallel-item__body {
+  padding-left: 1.1rem;
+  margin-top: 0.25rem;
+}
+
+.lax-workflow-stage-container__done-block {
+  padding-left: 1.1rem;
+  margin-top: 0.125rem;
+}
+
+.lax-workflow-stage-container__done-label {
+  color: var(--lax-muted);
+  font-size: 0.8125rem;
+}
+
+.lax-workflow-stage-container__teaser {
+  padding-left: 0.5rem;
+  margin-top: 0.125rem;
+  font-size: 0.875rem;
+}
+
+.lax-workflow-stage-container__expand-hint {
+  color: var(--lax-muted);
+  font-size: 0.75rem;
+  padding-left: 0.5rem;
+}
+
+.lax-workflow-parallel-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  margin-top: 0.35rem;
+}
+
+.lax-workflow-parallel-item {
+  border-left: 2px solid var(--lax-border-color);
+  padding-left: 0.5rem;
+}
+
+.lax-workflow-parallel-group {
+  margin-top: 0.35rem;
+  padding-left: 1.1rem;
+}
+
+.lax-workflow-parallel-group__summary {
+  display: block;
+  width: 100%;
+  padding: 0.125rem 0;
+  border: none;
+  background: transparent;
+  color: var(--lax-muted);
+  font: inherit;
+  font-size: 0.8125rem;
+  text-align: left;
+  cursor: pointer;
+}
+
+.lax-workflow-parallel-group__hint {
+  opacity: 0.85;
+}
+
+.lax-workflow-container-children {
+  padding-left: var(--lax-workflow-indent-unit, 1rem);
+  margin-top: 0.25rem;
+}
+
+.lax-workflow-subworkflow {
+  padding-left: var(--lax-workflow-indent, 0);
+}
+
+.lax-workflow-subworkflow-boundary {
+  border-left: 2px solid var(--lax-border-color);
+  margin-left: 0.35rem;
+  padding-left: calc(var(--lax-workflow-indent-unit, 1rem) - 0.35rem);
+  margin-top: 0.25rem;
+}
+
+.lax-workflow-nested-block {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.lax-workflow-aggregate__waiting-teaser {
+  color: var(--lax-muted);
+  font-size: 0.8125rem;
+  padding-left: 1.1rem;
+  margin-top: 0.125rem;
+}
+
+.lax-workflow-route-branch--skipped,
+.lax-workflow-stage-container--skipped {
+  opacity: 0.55;
+}
+
+.lax-workflow-route-branch--skipped .lax-workflow-container-line {
+  cursor: default;
+}