langchain_agentx_stream_ui 0.1.0

package/dist/default.css

@@ -0,0 +1,1364 @@
+/**
+ * langchain_agentx_stream_ui 可选默认样式（.lax-*）
+ *
+ * 消费方：import 'langchain_agentx_stream_ui/styles/default.css'
+ *
+ * 样式系统设计：
+ *   - SDK 提供布局结构、动画、组件样式
+ *   - 所有颜色通过 CSS Variables 定义，由应用层提供实际值
+ *   - 应用层通过覆盖变量实现主题定制
+ *
+ * 必需的 CSS Variables（应用层必须定义）：
+ *   --foreground, --card-bg, --border-color, --muted
+ *   --accent-primary, --highlight
+ *   --font-mono
+ *
+ * 可选的 CSS Variables（应用层可覆盖以自定义状态颜色）：
+ *   --lax-color-done, --lax-color-error, --lax-color-running
+ *   --lax-color-warning, --lax-color-success
+ *   --lax-bg-surface, --lax-bg-warning
+ */
+
+/* ============================================================================
+   CSS Variables 声明（SDK 内部使用，从应用层变量继承）
+   ============================================================================ */
+
+.lax-agent-session {
+  /* 基础颜色（从应用层继承） */
+  --lax-foreground: var(--foreground);
+  --lax-card-bg: var(--card-bg);
+  --lax-border-color: var(--border-color);
+  --lax-muted: var(--muted);
+  --lax-accent-primary: var(--accent-primary);
+  --lax-highlight: var(--highlight);
+  --lax-font-mono: var(--font-mono, ui-monospace, monospace);
+
+  /* 状态颜色（应用层可覆盖，默认使用主题色） */
+  --lax-color-done: var(--accent-primary);
+  --lax-color-error: var(--highlight);
+  --lax-color-running: var(--muted);
+  --lax-color-warning: #b8860b;
+  --lax-color-success: #2d7d46;
+
+  /* 紧凑密度（对齐 CC TUI 一行一事；宿主可覆盖） */
+  --lax-density-line-height: 1.35;
+  --lax-density-timeline-gap: 0.25rem;
+  --lax-density-block-margin-y: 0.125rem;
+  --lax-density-spinner-pad-y: 0.125rem;
+  --lax-density-spinner-margin-top: 0.35rem;
+
+  /* Markdown 紧凑密度（对齐 timeline；与 .lax-markdown* 联动） */
+  --lax-density-md-line-height: 1.35;
+  --lax-density-md-margin-top: 0;
+  --lax-density-md-paragraph-my: 0.0625rem;
+  --lax-density-md-heading-mt: 0.35rem;
+  --lax-density-md-heading-mb: 0.125rem;
+  --lax-density-md-block-my: 0.125rem;
+  --lax-density-md-hr-my: 0.35rem;
+  --lax-density-md-li-my: 0.05rem;
+  --lax-density-md-code-block-my: 0.125rem;
+  --lax-density-md-code-pad: 0.5rem;
+
+  color: var(--lax-foreground);
+}
+
+/* 可选：恢复较松 Web 段落感 */
+.lax-agent-session.lax-density-comfortable {
+  --lax-density-line-height: 1.65;
+  --lax-density-timeline-gap: 1rem;
+  --lax-density-block-margin-y: 0.25rem;
+  --lax-density-spinner-pad-y: 0.5rem;
+  --lax-density-spinner-margin-top: 1rem;
+
+  --lax-density-md-line-height: 1.6;
+  --lax-density-md-margin-top: 0.25rem;
+  --lax-density-md-paragraph-my: 0.25rem;
+  --lax-density-md-heading-mt: 0.75rem;
+  --lax-density-md-heading-mb: 0.25rem;
+  --lax-density-md-block-my: 0.25rem;
+  --lax-density-md-hr-my: 0.75rem;
+  --lax-density-md-li-my: 0.1rem;
+  --lax-density-md-code-block-my: 0.35rem;
+  --lax-density-md-code-pad: 0.75rem;
+}
+
+/* ============================================================================
+   布局与动画
+   ============================================================================ */
+
+.lax-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lax-density-timeline-gap, 0.25rem);
+}
+
+.lax-timeline__item {
+  animation: lax-fade-in 0.25s ease;
+}
+
+@keyframes lax-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ============================================================================
+   卡片基础样式
+   ============================================================================ */
+
+/* 命令行风格：移除边框和圆角，保持简洁自然 */
+.lax-text-bubble,
+.lax-reasoning-bubble,
+.lax-tool-card,
+.lax-subagent-block,
+.lax-error-card,
+.lax-unknown-card,
+.lax-step-card {
+  /* 命令行风格：无边框、无圆角、无背景 */
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+}
+
+/* 命令行风格：只保留必要间距 */
+.lax-text-bubble,
+.lax-tool-card,
+.lax-subagent-block,
+.lax-error-card,
+.lax-unknown-card {
+  padding: 0;
+  margin: var(--lax-density-block-margin-y, 0.125rem) 0;
+}
+
+/* ============================================================================
+   文本气泡
+   ============================================================================ */
+
+.lax-text-bubble__body {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.35rem;
+  line-height: var(--lax-density-line-height, 1.35);
+}
+
+.lax-text-bubble__dot {
+  flex-shrink: 0;
+  font-weight: 700;
+  color: var(--lax-foreground);
+}
+
+.lax-text-bubble[data-status='streaming'] .lax-text-bubble__dot {
+  animation: lax-reasoning-dot-blink 0.96s step-end infinite;
+}
+
+.lax-text-bubble__content {
+  flex: 1;
+  min-width: 0;
+  white-space: pre-wrap;
+  line-height: var(--lax-density-line-height, 1.35);
+}
+
+.lax-text-bubble__content--markdown {
+  white-space: normal;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+/* ============================================================================
+   推理气泡
+   ============================================================================ */
+
+.lax-reasoning-bubble {
+  padding: 0;
+  margin: var(--lax-density-block-margin-y, 0.125rem) 0;
+}
+
+.lax-reasoning-bubble__body {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.35rem;
+  line-height: var(--lax-density-line-height, 1.35);
+}
+
+.lax-reasoning-bubble__dot {
+  flex-shrink: 0;
+  font-weight: 700;
+  color: var(--lax-foreground);
+}
+
+/* 执行中状态：闪烁动画 */
+.lax-reasoning-bubble[data-status='streaming'] .lax-reasoning-bubble__dot {
+  animation: lax-reasoning-dot-blink 0.96s step-end infinite;
+}
+
+.lax-reasoning-bubble__content {
+  flex: 1;
+  min-width: 0;
+  white-space: pre-wrap;
+  color: var(--lax-foreground);
+  font-size: inherit;
+  font-style: normal;
+}
+
+@keyframes lax-reasoning-dot-blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0.2;
+  }
+}
+
+/* ============================================================================
+   Collapsed explore（对齐 CC CollapsedReadSearchContent）
+   ============================================================================ */
+
+.lax-collapsed-explore {
+  margin: var(--lax-density-block-margin-y, 0.125rem) 0;
+  font-size: 0.9rem;
+  line-height: var(--lax-density-line-height, 1.35);
+}
+
+.lax-collapsed-explore--active {
+  color: var(--lax-foreground);
+}
+
+.lax-collapsed-explore--finalized {
+  color: var(--lax-muted);
+}
+
+.lax-collapsed-explore__summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.35rem;
+}
+
+.lax-collapsed-explore__marker {
+  display: inline-block;
+  width: 1ch;
+  font-family: var(--lax-font-mono);
+}
+
+.lax-collapsed-explore--active .lax-collapsed-explore__marker {
+  animation: lax-reasoning-dot-blink 0.96s step-end infinite;
+}
+
+.lax-collapsed-explore__expand-hint {
+  color: var(--lax-muted);
+  font-size: 0.8rem;
+}
+
+.lax-collapsed-explore__summary--clickable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.lax-collapsed-explore__summary--clickable:hover .lax-collapsed-explore__expand-hint {
+  color: var(--lax-primary);
+}
+
+.lax-collapsed-explore__hint {
+  margin-top: 0.2rem;
+  padding-left: 1.35rem;
+  color: var(--lax-muted);
+  font-family: var(--lax-font-mono);
+  font-size: 0.82rem;
+  white-space: pre-wrap;
+}
+
+.lax-collapsed-explore__hint-prefix {
+  margin-right: 0.35rem;
+}
+
+.lax-collapsed-explore__verbose {
+  margin-top: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+/* CC Thought for Ns 摘要行 */
+.lax-thought-summary {
+  color: var(--lax-muted);
+  font-size: 0.875rem;
+  line-height: var(--lax-density-line-height, 1.35);
+  margin: var(--lax-density-block-margin-y, 0.125rem) 0;
+}
+
+.lax-thought-summary__text {
+  color: var(--lax-muted);
+}
+
+.lax-thought-summary__tools {
+  color: var(--lax-muted);
+  opacity: 0.9;
+}
+
+.lax-thought-summary__hint {
+  color: var(--lax-muted);
+  opacity: 0.75;
+  font-size: 0.8125rem;
+}
+
+.lax-system-summary {
+  color: var(--lax-muted);
+  font-size: 0.85rem;
+  margin: var(--lax-density-block-margin-y, 0.125rem) 0;
+}
+
+/* ============================================================================
+   工具卡片
+   ============================================================================ */
+
+.lax-tool-card__header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: var(--lax-density-block-margin-y, 0.125rem) 0;
+}
+
+/* 状态圆点（对齐 CLI ● marker） */
+.lax-tool-card__status-dot {
+  display: inline-block;
+  flex-shrink: 0;
+  font-size: 0.85rem;
+  line-height: 1;
+  color: var(--lax-muted);
+  transition: opacity 0.2s ease;
+}
+
+.lax-tool-card__status-dot[data-status='running'] {
+  animation: lax-pulse 1s ease-in-out infinite;
+}
+
+.lax-tool-card__status-dot[data-status='done'] {
+  color: var(--lax-color-done);
+}
+
+.lax-tool-card__status-dot[data-status='failed'] {
+  color: var(--lax-color-error);
+}
+
+@keyframes lax-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.35;
+  }
+}
+
+/* 工具名称（固定颜色，不随状态变化） */
+.lax-tool-card__name {
+  font-weight: 600;
+  color: var(--lax-foreground);
+  flex: 1;
+}
+
+/* 状态文本（CLI 无独立 running 标签） */
+.lax-tool-card__status {
+  display: none;
+}
+
+/* 摘要 */
+.lax-tool-card__summary {
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+}
+
+/* 代码/输入显示 */
+.lax-tool-card__display-body,
+.lax-tool-card__input pre,
+.lax-tool-card__blocks pre,
+.lax-tool-card__input-stream pre {
+  font-family: var(--lax-font-mono);
+  font-size: 0.75rem;
+  overflow-x: auto;
+  margin: 0.35rem 0 0;
+}
+
+/* 错误信息 */
+.lax-tool-card__error {
+  color: var(--lax-color-error);
+  font-weight: 500;
+  margin-top: 0.5rem;
+}
+
+/* 截断/溢出提示 */
+.lax-tool-card__truncated,
+.lax-tool-card__overflow {
+  font-size: 0.8rem;
+  color: var(--lax-muted);
+  margin-top: 0.35rem;
+}
+
+/* 进度信息 */
+.lax-tool-card__progress {
+  font-size: 0.85rem;
+  color: var(--lax-muted);
+  margin-top: 0.35rem;
+}
+
+/* 详情标签 */
+.lax-tool-card__detail-label {
+  font-size: 0.75rem;
+  color: var(--lax-muted);
+  margin-top: 0.5rem;
+}
+
+/* 步骤列表 */
+.lax-tool-card__steps {
+  margin: 0.35rem 0 0 1rem;
+  font-size: 0.85rem;
+}
+
+/* ============================================================================
+   工具 Shell（容器组件）
+   ============================================================================ */
+
+/* 命令行风格：错误状态通过文字颜色表示，不用边框 */
+.lax-tool-shell[data-error-kind='error'] {
+  /* 移除左侧边框，通过错误文字颜色显示 */
+}
+
+.lax-tool-shell[data-error-kind='permission'] {
+  /* 移除左侧边框 */
+}
+
+.lax-tool-shell--grouped {
+  margin-top: 0;
+  /* 移除左侧边框 */
+  padding-left: 0;
+}
+
+.lax-tool-shell__body {
+  margin-top: 0.25rem;
+}
+
+.lax-tool-shell--bare {
+  border: none;
+  padding: 0;
+  background: transparent;
+}
+
+.lax-tool-shell--bare .lax-tool-shell__body {
+  margin-top: 0;
+}
+
+/* 权限等待态 */
+.lax-tool-shell__permission-wait {
+  margin: 0.35rem 0 0.25rem 1.25rem;
+  padding: 0;
+  /* 移除背景和圆角 */
+  background: transparent;
+}
+
+.lax-tool-shell__permission-wait-text {
+  font-size: 0.85rem;
+  color: var(--lax-muted);
+  font-style: italic;
+}
+
+.lax-tool-shell__permission-wait-detail {
+  font-size: 0.8rem;
+  margin-top: 0.25rem;
+}
+
+.lax-tool-shell__permission-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+/* ============================================================================
+   工具 Body（内容区域）
+   ============================================================================ */
+
+.lax-tool-body__text {
+  font-family: var(--lax-font-mono);
+  font-size: 0.75rem;
+  overflow-x: auto;
+  margin: 0.35rem 0 0;
+  white-space: pre-wrap;
+}
+
+.lax-tool-body__block {
+  padding-left: 1.25rem;
+  position: relative;
+  margin-top: 0.25rem;
+}
+
+.lax-tool-body__block::before {
+  content: '⎿ ';
+  position: absolute;
+  left: 0;
+  color: var(--lax-muted);
+}
+
+.lax-tool-body__block[data-variant='error'] .lax-tool-body__text {
+  color: var(--lax-color-error);
+}
+
+.lax-tool-body__block[data-variant='dim'] .lax-tool-body__text {
+  color: var(--lax-muted);
+}
+
+.lax-tool-body__expand {
+  display: block;
+  margin-top: 0.35rem;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--lax-muted);
+  font-size: 0.8rem;
+  cursor: pointer;
+  text-decoration: underline;
+  transition: color 0.2s ease;
+}
+
+.lax-tool-body__expand:hover {
+  color: var(--lax-accent-primary);
+}
+
+.lax-tool-body__summary {
+  font-size: 0.9rem;
+  color: var(--lax-muted);
+  margin-bottom: 0.25rem;
+}
+
+/* Agent 子工具 progress（方案 A 折叠 — 对齐 CLI ⎿ gutter） */
+.lax-agent-progress {
+  margin: 0.15rem 0 0.35rem;
+  font-family: var(--lax-font-mono);
+  font-size: 0.75rem;
+}
+
+.lax-agent-progress__line {
+  display: flex;
+  align-items: baseline;
+  margin: 0.05rem 0;
+  min-width: 0;
+}
+
+.lax-agent-progress__gutter {
+  flex-shrink: 0;
+  color: var(--lax-muted);
+  white-space: pre;
+  user-select: none;
+}
+
+.lax-agent-progress__text {
+  flex: 1;
+  min-width: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--lax-fg, inherit);
+}
+
+.lax-agent-progress__line--more .lax-agent-progress__text {
+  color: var(--lax-muted);
+}
+
+.lax-agent-progress__more {
+  display: inline;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--lax-muted);
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.lax-agent-progress--transcript {
+  margin-top: 0.5rem;
+}
+
+.lax-agent-progress__label {
+  font-size: 0.72rem;
+  color: var(--lax-muted);
+  margin-bottom: 0.2rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* ============================================================================
+   工具组
+   ============================================================================ */
+
+.lax-tool-group {
+  /* 移除边框和背景 */
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0.5rem 0;
+}
+
+.lax-tool-group__header {
+  display: flex;
+  align-items: baseline;
+  gap: 0.35rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.lax-tool-group__count {
+  color: var(--lax-muted);
+  font-weight: 500;
+}
+
+.lax-tool-group__items {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.lax-tool-group__item {
+  position: relative;
+}
+
+.lax-tool-group__header--active .lax-tool-group__dot {
+  color: var(--lax-accent, #3a6ea5);
+  margin-right: 0.25rem;
+}
+
+.lax-tool-group__header--error .lax-tool-group__label {
+  color: var(--lax-error, #c0392b);
+}
+
+.lax-tool-group__subline {
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
+  font-size: 0.82rem;
+  padding-left: 0.5rem;
+}
+
+.lax-tool-group__tree {
+  color: var(--lax-muted);
+  font-family: ui-monospace, monospace;
+  flex-shrink: 0;
+}
+
+.lax-tool-group__subline-title {
+  font-weight: 600;
+}
+
+.lax-tool-group__subline-status {
+  color: var(--lax-muted);
+  font-weight: 400;
+}
+
+.lax-tool-group__subline::before {
+  content: none;
+}
+
+/* ============================================================================
+   工具 Diff
+   ============================================================================ */
+
+.lax-tool-diff {
+  font-family: var(--lax-font-mono);
+  font-size: 0.75rem;
+  overflow-x: auto;
+  margin-top: 0.35rem;
+  /* 移除边框和圆角 */
+  border: none;
+  border-radius: 0;
+}
+
+.lax-tool-diff__line {
+  display: flex;
+  padding: 0 0.5rem;
+  white-space: pre-wrap;
+  line-height: 1.45;
+}
+
+.lax-tool-diff__prefix {
+  flex-shrink: 0;
+  width: 1.25rem;
+  user-select: none;
+}
+
+.lax-tool-diff__line[data-kind='add'] {
+  background: rgba(45, 125, 70, 0.12);
+  color: var(--lax-color-success);
+}
+
+.lax-tool-diff__line[data-kind='remove'] {
+  background: rgba(192, 57, 43, 0.1);
+  color: var(--lax-color-error);
+}
+
+.lax-tool-diff__line[data-kind='meta'] {
+  color: var(--lax-muted);
+}
+
+/* ============================================================================
+   Markdown 渲染
+   ============================================================================ */
+
+.lax-markdown {
+  font-size: 0.85rem;
+  line-height: var(--lax-density-md-line-height, 1.35);
+  margin-top: var(--lax-density-md-margin-top, 0);
+  color: var(--lax-foreground);
+}
+
+/* P2：块顶不留白（首子元素 / 首标题） */
+.lax-markdown > :first-child {
+  margin-top: 0;
+}
+
+.lax-markdown__heading:first-child {
+  margin-top: 0;
+}
+
+/* 标题 */
+.lax-markdown__heading {
+  font-weight: 600;
+  margin-top: var(--lax-density-md-heading-mt, 0.35rem);
+  margin-bottom: var(--lax-density-md-heading-mb, 0.125rem);
+}
+
+.lax-markdown__h1 { font-size: 1.25rem; }
+.lax-markdown__h2 { font-size: 1.1rem; }
+.lax-markdown__h3 { font-size: 1rem; }
+.lax-markdown__h4 { font-size: 0.95rem; }
+.lax-markdown__h5 { font-size: 0.9rem; }
+.lax-markdown__h6 { font-size: 0.85rem; }
+
+/* 段落 */
+.lax-markdown__paragraph {
+  margin: var(--lax-density-md-paragraph-my, 0.0625rem) 0;
+}
+
+/* P2：列表项内 GFM 包裹的 <p> 不再叠 margin */
+.lax-markdown__li > .lax-markdown__paragraph {
+  margin: 0;
+}
+
+/* 列表 */
+.lax-markdown__list {
+  margin: var(--lax-density-md-block-my, 0.125rem) 0;
+  padding-left: 1.25rem;
+  color: var(--lax-foreground);
+}
+
+.lax-markdown__li {
+  margin: var(--lax-density-md-li-my, 0.05rem) 0;
+  color: var(--lax-foreground);
+}
+
+.lax-markdown__ul {
+  list-style-type: disc;
+}
+
+.lax-markdown__ol {
+  list-style-type: decimal;
+}
+
+/* 嵌套列表标记符号 */
+.lax-markdown__ul .lax-markdown__ul {
+  list-style-type: circle;
+}
+
+.lax-markdown__ul .lax-markdown__ul .lax-markdown__ul {
+  list-style-type: square;
+}
+
+/* 链接 */
+.lax-markdown__link {
+  color: var(--lax-accent-primary);
+  text-decoration: underline;
+}
+
+.lax-markdown__link:hover {
+  color: var(--lax-highlight);
+}
+
+/* 引用 */
+.lax-markdown__blockquote {
+  margin: var(--lax-density-md-block-my, 0.125rem) 0;
+  padding-left: 0.75rem;
+  border-left: 3px solid var(--lax-muted);
+  color: var(--lax-muted);
+  font-style: italic;
+}
+
+.lax-markdown__blockquote > :first-child {
+  margin-top: 0;
+}
+
+/* 分隔线 */
+.lax-markdown__hr {
+  margin: var(--lax-density-md-hr-my, 0.35rem) 0;
+  border: none;
+  border-top: 1px solid var(--lax-border-color);
+}
+
+/* 强调 */
+.lax-markdown__strong {
+  font-weight: 600;
+}
+
+.lax-markdown__em {
+  font-style: italic;
+}
+
+/* 内联代码 */
+.lax-markdown__inline-code {
+  font-family: var(--lax-font-mono);
+  font-size: 0.8em;
+  background: var(--lax-bg-surface);
+  color: var(--lax-foreground);
+  padding: 0.1em 0.35em;
+  border-radius: 3px;
+  border: 1px solid var(--lax-border-color);
+}
+
+/* 代码块容器 */
+.lax-code-block {
+  margin: var(--lax-density-md-code-block-my, 0.125rem) 0;
+  border-radius: 4px;
+  overflow: hidden;
+  background: var(--lax-bg-surface);
+  border: 1px solid var(--lax-border-color);
+}
+
+/* P1：SyntaxHighlighter <pre> 内边距由 token 控制 */
+.lax-code-block pre {
+  margin: 0 !important;
+  padding: var(--lax-density-md-code-pad, 0.5rem) !important;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+/* 代码块头部 */
+.lax-code-block__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.35rem 0.5rem;
+  font-size: 0.7rem;
+  background: rgba(128, 128, 128, 0.1);
+  border-bottom: 1px solid var(--lax-border-color);
+}
+
+.lax-code-block__lang {
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--lax-foreground);
+}
+
+/* 拷贝按钮 */
+.lax-code-block__copy {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.2rem 0.5rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  border-radius: 3px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  background: rgba(99, 102, 241, 0.9);
+  color: white;
+}
+
+.lax-code-block__copy:hover {
+  background: rgba(99, 102, 241, 1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.lax-code-block__copy--copied {
+  background: rgb(34, 197, 94);
+  color: white;
+}
+
+.lax-code-block__icon {
+  width: 0.85rem;
+  height: 0.85rem;
+}
+
+/* 表格 */
+.lax-markdown__table-wrapper {
+  margin: var(--lax-density-md-block-my, 0.125rem) 0;
+  overflow-x: auto;
+  border-radius: 4px;
+  border: 1px solid var(--lax-border-color);
+}
+
+.lax-markdown__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+}
+
+.lax-markdown__thead {
+  background: var(--lax-bg-surface);
+  border-bottom: 1px solid var(--lax-border-color);
+}
+
+.lax-markdown__tbody {
+  border-top: 1px solid var(--lax-border-color);
+}
+
+.lax-markdown__tr {
+  border-bottom: 1px solid var(--lax-border-color);
+}
+
+.lax-markdown__tr:last-child {
+  border-bottom: none;
+}
+
+.lax-markdown__th {
+  padding: 0.4rem 0.6rem;
+  text-align: left;
+  font-weight: 600;
+}
+
+.lax-markdown__td {
+  padding: 0.4rem 0.6rem;
+}
+
+.lax-markdown__tr:nth-child(even) {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.lax-markdown__rich {
+  width: 100%;
+}
+
+/* ============================================================================
+   子 Agent 块
+   ============================================================================ */
+
+.lax-subagent-block {
+  /* 移除左侧边框 */
+  margin-left: 0.5rem;
+}
+
+.lax-subagent-block__header {
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+  color: var(--lax-accent-primary);
+}
+
+.lax-subagent-block__children {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding-left: 0.75rem;
+}
+
+/* ============================================================================
+   错误卡片
+   ============================================================================ */
+
+.lax-error-card {
+  /* 移除边框样式，通过文字颜色表示错误 */
+}
+
+.lax-error-card__message {
+  color: var(--lax-color-error);
+  font-weight: 500;
+}
+
+/* ============================================================================
+   未知卡片
+   ============================================================================ */
+
+.lax-unknown-card__type {
+  font-size: 0.875rem;
+  color: var(--lax-muted);
+  margin-bottom: 0.5rem;
+}
+
+.lax-unknown-card__data {
+  font-family: var(--lax-font-mono);
+  font-size: 0.75rem;
+  overflow-x: auto;
+  margin: 0;
+}
+
+/* ============================================================================
+   调试面板
+   ============================================================================ */
+
+.lax-debug-panel {
+  margin-top: 1rem;
+  padding: 0.75rem;
+  font-size: 0.8rem;
+  /* 移除边框 */
+  border: none;
+  border-radius: 0;
+}
+
+/* ============================================================================
+   权限卡片
+   ============================================================================ */
+
+.lax-permission-card {
+  /* 移除边框和背景 */
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  margin: 0.5rem 0;
+}
+
+.lax-permission-card__header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.lax-permission-card__label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--lax-muted);
+}
+
+.lax-permission-card__tool {
+  font-family: var(--lax-font-mono);
+  font-size: 0.875rem;
+}
+
+.lax-permission-card__message {
+  margin-bottom: 0.75rem;
+  line-height: 1.5;
+}
+
+.lax-permission-card__prompt {
+  font-size: 0.875rem;
+  color: var(--lax-muted);
+  margin-bottom: 0.75rem;
+}
+
+.lax-permission-card__actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.lax-permission-card__allow,
+.lax-permission-card__deny {
+  padding: 0.35rem 0.85rem;
+  /* 移除边框和圆角 */
+  border-radius: 0;
+  border: none;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
+}
+
+.lax-permission-card__allow {
+  background: var(--lax-accent-primary);
+  color: #fff;
+}
+
+.lax-permission-card__deny {
+  background: transparent;
+  color: var(--lax-foreground);
+}
+
+.lax-permission-card__resolved {
+  font-size: 0.875rem;
+  color: var(--lax-muted);
+}
+
+/* ============================================================================
+   虚拟时间线
+   ============================================================================ */
+
+.lax-virtual-timeline {
+  height: 100%;
+  min-height: 24rem;
+  overflow: auto;
+}
+
+/* ============================================================================
+   Spinner（加载动画）
+   ============================================================================ */
+
+.lax-spinner-container {
+  margin-top: var(--lax-density-spinner-margin-top, 0.35rem);
+  display: flex;
+  flex-direction: column;
+}
+
+.lax-spinner {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: var(--lax-density-spinner-pad-y, 0.125rem) 0;
+  color: var(--lax-muted);
+  font-size: 0.875rem;
+}
+
+.lax-spinner-frame {
+  font-family: var(--lax-font-mono);
+  font-weight: 600;
+  color: var(--lax-accent-primary);
+}
+
+.lax-spinner-verb {
+  color: var(--lax-muted);
+}
+
+/* 动词 shimmer（对齐 CC GlimmerMessage requesting 模式） */
+.lax-spinner-verb--shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--lax-muted) 0%,
+    var(--lax-muted) 35%,
+    var(--lax-accent-primary) 50%,
+    var(--lax-muted) 65%,
+    var(--lax-muted) 100%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: lax-verb-shimmer 2.4s linear infinite;
+}
+
+.lax-spinner-verb--shimmer-fast {
+  animation-duration: 1.6s;
+}
+
+@keyframes lax-verb-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
+
+/* tool-use 整词闪烁（对齐 CC flashOpacity） */
+.lax-spinner-verb--tool-use {
+  color: color-mix(
+    in srgb,
+    var(--lax-muted) calc((1 - var(--lax-spinner-flash-opacity, 0)) * 100%),
+    var(--lax-accent-primary)
+  );
+}
+
+/* stall 渐红（对齐 CC stalledIntensity → ERROR_RED） */
+.lax-spinner-verb--stalled {
+  color: color-mix(
+    in srgb,
+    var(--lax-muted) calc((1 - var(--lax-spinner-stall-intensity, 0)) * 100%),
+    var(--lax-color-error)
+  );
+}
+
+.lax-spinner-verb--static {
+  color: var(--lax-muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lax-spinner-verb--shimmer,
+  .lax-spinner-verb--shimmer-fast,
+  .lax-spinner-verb--tool-use {
+    animation: none;
+    background: none;
+    -webkit-background-clip: unset;
+    background-clip: unset;
+    color: var(--lax-muted);
+  }
+}
+
+.lax-spinner-status {
+  color: var(--lax-muted);
+  font-weight: 500;
+}
+
+.lax-spinner-status-part {
+  font-family: var(--lax-font-mono);
+  font-size: 0.8rem;
+}
+
+/* Thinking shimmer 动画（对齐 CC thinkingStatus） */
+.lax-spinner-status-part--thinking {
+  animation: lax-thinking-shimmer 2s ease-in-out infinite;
+}
+
+@keyframes lax-thinking-shimmer {
+  0%, 100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+/* ============================================================================
+   TaskList（任务列表，对齐 CC TaskListV2）
+   ============================================================================ */
+
+.lax-task-list {
+  font-size: 0.875rem;
+}
+
+.lax-task-list__stats {
+  color: var(--lax-muted);
+  margin-bottom: 0.25rem;
+}
+
+.lax-task-list__stat-count {
+  font-weight: 600;
+}
+
+.lax-task-list__hidden-summary {
+  color: var(--lax-muted);
+}
+
+.lax-task-list__items {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.lax-task-item {
+  display: flex;
+  align-items: baseline;
+  gap: 0.35rem;
+  padding: 0.1rem 0.25rem;
+}
+
+/* 待办：空心方块图标（◻） */
+.lax-task-item--pending .lax-task-item__icon {
+  color: var(--lax-muted);
+}
+
+.lax-task-item--pending .lax-task-item__subject:not(.lax-task-item__subject--blocked) {
+  color: var(--lax-muted);
+}
+
+.lax-task-item__icon {
+  flex-shrink: 0;
+  font-family: var(--lax-font-mono);
+  width: 1.5ch;
+}
+
+/* 进行中：红色实心方块 bold icon；subject 保持常规字重（对齐 CC 终端） */
+.lax-task-item__icon--in-progress {
+  color: var(--lax-color-error);
+  font-weight: 700;
+}
+
+.lax-task-item__subject--in-progress {
+  color: var(--lax-foreground);
+}
+
+/* blocked pending：dim + strikethrough（对齐 CC openBlockers） */
+.lax-task-item__subject--blocked {
+  color: var(--lax-muted);
+  text-decoration: line-through;
+}
+
+.lax-task-item__owner {
+  color: var(--lax-muted);
+  font-size: 0.85em;
+  flex-shrink: 0;
+}
+
+@media (max-width: 640px) {
+  .lax-task-item__owner {
+    display: none;
+  }
+}
+
+/* 已完成任务：绿色勾勾 + 删除线（对齐 CC） */
+.lax-task-item--completed .lax-task-item__icon {
+  color: var(--lax-color-success);
+}
+
+.lax-task-item--completed .lax-task-item__subject {
+  color: var(--lax-color-success);
+  text-decoration: line-through;
+}
+
+.lax-task-item__meta {
+  color: var(--lax-muted);
+  font-size: 0.8em;
+  font-family: var(--lax-font-mono);
+}
+
+/* TaskListFooter（对齐 CC BackgroundTaskStatus pill） */
+.lax-task-list-footer {
+  margin-top: 0.75rem;
+}
+
+.lax-task-list-footer__pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  padding: 0.2rem 0.5rem;
+  border: none;
+  border-radius: 3px;
+  background: var(--lax-foreground);
+  color: var(--lax-background);
+  font-size: 0.8125rem;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.lax-task-list-footer__pill:hover {
+  opacity: 0.92;
+}
+
+.lax-task-list-footer__hint {
+  color: var(--lax-muted);
+  font-weight: 400;
+  opacity: 0.85;
+}
+
+/* MessageResponse 标记（对齐 CC ⎿） */
+.lax-message-response {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.35rem;
+  margin-top: var(--lax-density-block-margin-y, 0.125rem);
+}
+
+.lax-message-response__marker {
+  flex-shrink: 0;
+  color: var(--lax-muted);
+  font-family: var(--lax-font-mono);
+  user-select: none;
+}
+
+.lax-message-response__content {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Spinner Next 副行（对齐 CC Text dimColor） */
+.lax-spinner-next-line {
+  color: var(--lax-muted);
+  font-size: 0.875rem;
+}