Spaces:
Paused
Paused
| /* Coding Trace Display Styles | |
| * | |
| * Uses parent design system tokens (var(--font-sans), var(--border), etc.) | |
| * with domain-specific colors for diffs, terminal, and tool badges. | |
| */ | |
| /* Layout */ | |
| .coding-trace-display { | |
| font-family: var(--font-sans, inherit); | |
| font-size: 14px; | |
| line-height: 1.5; | |
| } | |
| .coding-trace-with-sidebar .coding-trace-layout { | |
| display: flex; | |
| gap: 16px; | |
| } | |
| .coding-trace-sidebar { | |
| flex: 0 0 220px; | |
| min-width: 180px; | |
| transition: flex-basis 0.2s, min-width 0.2s, opacity 0.2s; | |
| } | |
| .coding-trace-sidebar.ct-sidebar-collapsed { | |
| flex: 0 0 0px; | |
| min-width: 0; | |
| overflow: hidden; | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .coding-trace-main { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| /* Summary bar */ | |
| .ct-summary { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 12px; | |
| margin-bottom: 12px; | |
| background: var(--secondary, #f4f4f5); | |
| border-radius: var(--radius, 0.5rem); | |
| font-size: 0.9em; | |
| flex-wrap: wrap; | |
| } | |
| .ct-summary-total { | |
| font-weight: 600; | |
| color: var(--foreground, #09090b); | |
| } | |
| .ct-summary-sep { | |
| color: var(--muted-foreground, #71717a); | |
| } | |
| .ct-summary-tools { | |
| color: var(--muted-foreground, #71717a); | |
| } | |
| .ct-summary-badge { | |
| padding: 2px 8px; | |
| border-radius: 12px; | |
| font-size: 0.85em; | |
| font-weight: 500; | |
| } | |
| /* Collapse/Expand toggle in summary */ | |
| .ct-toggle-tools { | |
| margin-left: auto; | |
| padding: 3px 10px; | |
| font-size: 0.8em; | |
| font-weight: 500; | |
| border: 1px solid var(--border, #e4e4e7); | |
| border-radius: 4px; | |
| background: var(--card, #fff); | |
| color: var(--muted-foreground, #71717a); | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| } | |
| .ct-toggle-tools:hover { | |
| background: var(--secondary, #f4f4f5); | |
| color: var(--foreground, #09090b); | |
| } | |
| .ct-toggle-tools:focus-visible { | |
| outline: 2px solid var(--ring, #6e56cf); | |
| outline-offset: 2px; | |
| } | |
| /* File tree toggle */ | |
| .ct-sidebar-toggle { | |
| padding: 3px 8px; | |
| font-size: 0.8em; | |
| border: 1px solid var(--border, #e4e4e7); | |
| border-radius: 4px; | |
| background: var(--card, #fff); | |
| color: var(--muted-foreground, #71717a); | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| } | |
| .ct-sidebar-toggle:hover { | |
| background: var(--secondary, #f4f4f5); | |
| color: var(--foreground, #09090b); | |
| } | |
| .ct-sidebar-toggle:focus-visible { | |
| outline: 2px solid var(--ring, #6e56cf); | |
| outline-offset: 2px; | |
| } | |
| /* Turns */ | |
| .ct-turn { | |
| margin: 8px 0; | |
| } | |
| .ct-turn-user { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 8px; | |
| padding: 10px 14px; | |
| background: var(--secondary, #f4f4f5); | |
| border-radius: var(--radius, 0.5rem); | |
| border-left: 4px solid var(--primary, #6e56cf); | |
| } | |
| .ct-user-badge { | |
| flex: 0 0 auto; | |
| padding: 2px 8px; | |
| background: color-mix(in srgb, var(--primary, #6e56cf) 12%, transparent); | |
| border-radius: 4px; | |
| font-size: 0.8em; | |
| font-weight: 600; | |
| color: var(--primary, #6e56cf); | |
| } | |
| .ct-user-text { | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| color: var(--foreground, #09090b); | |
| } | |
| .ct-turn-assistant { | |
| padding: 4px 0; | |
| } | |
| .ct-turn-header { | |
| margin-bottom: 4px; | |
| } | |
| .ct-step-num { | |
| font-size: 0.85em; | |
| font-weight: 600; | |
| color: var(--muted-foreground, #71717a); | |
| padding: 2px 8px; | |
| background: var(--secondary, #f4f4f5); | |
| border-radius: 4px; | |
| } | |
| /* Reasoning text */ | |
| .ct-reasoning { | |
| padding: 8px 12px; | |
| margin: 4px 0 8px; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| color: var(--foreground, #09090b); | |
| line-height: 1.6; | |
| background: var(--muted, #f4f4f5); | |
| border-radius: var(--radius, 0.5rem); | |
| border-left: 3px solid var(--border, #e4e4e7); | |
| } | |
| /* Tool calls */ | |
| .ct-tool-call { | |
| margin: 6px 0; | |
| border: 1px solid var(--border, #e4e4e7); | |
| border-radius: var(--radius, 0.5rem); | |
| overflow: hidden; | |
| } | |
| /* Collapsed tool calls */ | |
| .ct-tool-call.ct-tool-collapsed .ct-tool-body { | |
| display: none; | |
| } | |
| .ct-tool-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 6px 10px; | |
| background: var(--secondary, #f4f4f5); | |
| border-bottom: 1px solid var(--border, #e4e4e7); | |
| } | |
| .ct-tool-badge { | |
| display: inline-block; | |
| padding: 2px 8px; | |
| border-radius: 4px; | |
| font-size: 0.8em; | |
| font-weight: 600; | |
| font-family: var(--font-mono, monospace); | |
| } | |
| .ct-file-path { | |
| font-family: var(--font-mono, monospace); | |
| font-size: 0.85em; | |
| color: var(--muted-foreground, #71717a); | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .ct-tool-body { | |
| padding: 0; | |
| } | |
| /* Diff rendering — domain-specific colors (GitHub conventions) */ | |
| .ct-diff { | |
| font-family: var(--font-mono, monospace); | |
| font-size: 13px; | |
| line-height: 1.4; | |
| } | |
| .ct-diff-line { | |
| display: flex; | |
| padding: 1px 10px; | |
| min-height: 20px; | |
| cursor: pointer; | |
| transition: filter 0.1s; | |
| } | |
| .ct-diff-line:hover { | |
| filter: brightness(0.95); | |
| } | |
| .ct-diff-removed { | |
| background: #ffeef0; | |
| color: #cb2431; | |
| } | |
| .ct-diff-added { | |
| background: #e6ffed; | |
| color: #22863a; | |
| } | |
| .ct-diff-marker { | |
| flex: 0 0 20px; | |
| font-weight: 700; | |
| user-select: none; | |
| color: inherit; | |
| opacity: 0.7; | |
| } | |
| .ct-diff-text { | |
| flex: 1; | |
| white-space: pre-wrap; | |
| overflow-wrap: break-word; | |
| tab-size: 4; | |
| } | |
| .ct-edit-status { | |
| padding: 4px 10px; | |
| font-size: 0.85em; | |
| color: var(--muted-foreground, #71717a); | |
| background: var(--muted, #f4f4f5); | |
| border-top: 1px solid var(--border, #e4e4e7); | |
| } | |
| /* Terminal blocks — dark theme is domain-specific */ | |
| .ct-terminal { | |
| background: #1e1e1e; | |
| border-radius: 0 0 6px 6px; | |
| overflow: hidden; | |
| } | |
| .ct-terminal-cmd { | |
| padding: 8px 12px; | |
| font-family: var(--font-mono, monospace); | |
| font-size: 13px; | |
| color: #d4d4d4; | |
| background: #2d2d2d; | |
| border-bottom: 1px solid #3a3a3a; | |
| } | |
| .ct-terminal-prompt { | |
| color: #4ec9b0; | |
| font-weight: 700; | |
| margin-right: 4px; | |
| } | |
| .ct-terminal-output { | |
| margin: 0; | |
| padding: 8px 12px; | |
| font-family: var(--font-mono, monospace); | |
| font-size: 12px; | |
| color: #cccccc; | |
| background: #1e1e1e; | |
| white-space: pre-wrap; | |
| overflow-wrap: break-word; | |
| max-height: 400px; | |
| overflow-y: auto; | |
| line-height: 1.4; | |
| } | |
| .ct-terminal-truncated { | |
| display: block; | |
| } | |
| .ct-terminal-output-details { | |
| display: none; | |
| } | |
| .ct-terminal-output-details[open] + .ct-terminal-truncated { | |
| display: none; | |
| } | |
| .ct-terminal-output-details[open] { | |
| display: block; | |
| } | |
| .ct-terminal-output-details summary { | |
| padding: 4px 12px; | |
| font-size: 12px; | |
| color: #888; | |
| cursor: pointer; | |
| font-family: var(--font-mono, monospace); | |
| } | |
| .ct-terminal-output-details summary:hover { | |
| color: #4ec9b0; | |
| } | |
| /* Code blocks */ | |
| .ct-code-block { | |
| overflow-x: auto; | |
| } | |
| .ct-code-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-family: var(--font-mono, monospace); | |
| font-size: 13px; | |
| line-height: 1.4; | |
| } | |
| .ct-code-line td { | |
| padding: 1px 0; | |
| } | |
| .ct-code-line { | |
| cursor: pointer; | |
| transition: background 0.1s; | |
| } | |
| .ct-code-line:hover { | |
| background: color-mix(in srgb, var(--primary, #6e56cf) 6%, transparent); | |
| } | |
| .ct-line-num { | |
| width: 45px; | |
| min-width: 45px; | |
| padding: 1px 8px 1px 12px; | |
| text-align: right; | |
| color: var(--muted-foreground, #71717a); | |
| background: var(--muted, #f4f4f5); | |
| user-select: none; | |
| border-right: 1px solid var(--border, #e4e4e7); | |
| font-size: 12px; | |
| } | |
| .ct-line-content { | |
| padding: 1px 12px; | |
| white-space: pre-wrap; | |
| overflow-wrap: break-word; | |
| tab-size: 4; | |
| } | |
| .ct-line-content code { | |
| background: none; | |
| padding: 0; | |
| font-size: inherit; | |
| color: inherit; | |
| } | |
| .ct-code-truncated { | |
| padding: 6px 12px; | |
| font-size: 0.85em; | |
| color: var(--muted-foreground, #71717a); | |
| background: var(--muted, #f4f4f5); | |
| border-top: 1px solid var(--border, #e4e4e7); | |
| font-style: italic; | |
| } | |
| .ct-code-empty { | |
| padding: 8px 12px; | |
| color: var(--muted-foreground, #71717a); | |
| font-style: italic; | |
| } | |
| /* Write blocks */ | |
| .ct-write-block { | |
| overflow-x: auto; | |
| } | |
| .ct-write-label { | |
| padding: 3px 10px; | |
| font-size: 0.8em; | |
| font-weight: 600; | |
| color: #2e7d32; | |
| background: #e8f5e9; | |
| border-bottom: 1px solid #c8e6c9; | |
| } | |
| .ct-write-block .ct-code-line { | |
| background: #f6fff6; | |
| } | |
| .ct-write-block .ct-line-num { | |
| background: #e8f5e9; | |
| border-right-color: #c8e6c9; | |
| } | |
| /* Generic tool display */ | |
| .ct-generic-input, | |
| .ct-generic-output { | |
| padding: 8px 12px; | |
| } | |
| .ct-generic-input + .ct-generic-output { | |
| border-top: 1px solid var(--border, #e4e4e7); | |
| } | |
| .ct-generic-label { | |
| font-size: 0.75em; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| color: var(--muted-foreground, #71717a); | |
| letter-spacing: 0.5px; | |
| margin-bottom: 4px; | |
| } | |
| .ct-generic-pre { | |
| margin: 0; | |
| padding: 8px; | |
| background: var(--muted, #f4f4f5); | |
| border-radius: 4px; | |
| font-family: var(--font-mono, monospace); | |
| font-size: 12px; | |
| white-space: pre-wrap; | |
| overflow-wrap: break-word; | |
| max-height: 300px; | |
| overflow-y: auto; | |
| } | |
| .ct-generic-empty { | |
| padding: 8px 12px; | |
| color: var(--muted-foreground, #71717a); | |
| font-style: italic; | |
| } | |
| /* File tree sidebar */ | |
| .ct-file-tree { | |
| background: var(--card, #fff); | |
| border: 1px solid var(--border, #e4e4e7); | |
| border-radius: var(--radius, 0.5rem); | |
| overflow: hidden; | |
| position: sticky; | |
| top: 16px; | |
| } | |
| .ct-file-tree-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 8px 12px; | |
| font-weight: 600; | |
| font-size: 0.85em; | |
| color: var(--foreground, #09090b); | |
| background: var(--secondary, #f4f4f5); | |
| border-bottom: 1px solid var(--border, #e4e4e7); | |
| } | |
| .ct-file-list { | |
| list-style: none; | |
| margin: 0; | |
| padding: 4px 0; | |
| max-height: 500px; | |
| overflow-y: auto; | |
| } | |
| .ct-file-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 4px 12px; | |
| font-size: 0.85em; | |
| cursor: default; | |
| border-bottom: 1px solid var(--secondary, #f4f4f5); | |
| } | |
| .ct-file-item:last-child { | |
| border-bottom: none; | |
| } | |
| .ct-file-item:hover { | |
| background: var(--secondary, #f4f4f5); | |
| } | |
| .ct-file-name { | |
| font-family: var(--font-mono, monospace); | |
| font-size: 0.9em; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| flex: 1; | |
| } | |
| .ct-file-op { | |
| flex: 0 0 auto; | |
| font-size: 0.75em; | |
| font-weight: 700; | |
| width: 16px; | |
| text-align: center; | |
| } | |
| /* Focus states */ | |
| .ct-toggle-tools:focus-visible, | |
| .ct-sidebar-toggle:focus-visible, | |
| .ct-diff-line:focus-visible, | |
| .ct-code-line:focus-visible { | |
| outline: 2px solid var(--ring, #6e56cf); | |
| outline-offset: -2px; | |
| } | |
| /* ===== Live Coding Agent Viewer ===== */ | |
| .live-coding-agent-viewer { | |
| font-family: var(--font-sans, inherit); | |
| } | |
| /* Start form */ | |
| .lca-start-form { | |
| padding: 20px; | |
| background: var(--card, #fff); | |
| border: 1px solid var(--border, #e4e4e7); | |
| border-radius: var(--radius, 0.5rem); | |
| text-align: center; | |
| } | |
| .lca-start-header { | |
| font-weight: 600; | |
| font-size: 1.1em; | |
| margin-bottom: 12px; | |
| color: var(--foreground, #09090b); | |
| } | |
| .lca-task-input { | |
| width: 100%; | |
| padding: 8px 12px; | |
| border: 1px solid var(--border, #e4e4e7); | |
| border-radius: var(--radius, 0.5rem); | |
| font-size: 0.95em; | |
| resize: vertical; | |
| box-sizing: border-box; | |
| margin-bottom: 12px; | |
| font-family: var(--font-sans, inherit); | |
| } | |
| .lca-task-input:focus { | |
| outline: 2px solid var(--ring, #6e56cf); | |
| outline-offset: -1px; | |
| } | |
| /* Buttons */ | |
| .lca-btn { | |
| padding: 6px 16px; | |
| border: 1px solid var(--border, #e4e4e7); | |
| border-radius: var(--radius, 0.5rem); | |
| background: var(--card, #fff); | |
| color: var(--foreground, #09090b); | |
| cursor: pointer; | |
| font-size: 0.9em; | |
| font-family: var(--font-sans, inherit); | |
| transition: all 0.15s; | |
| } | |
| .lca-btn:hover { | |
| background: var(--secondary, #f4f4f5); | |
| } | |
| .lca-btn:focus-visible { | |
| outline: 2px solid var(--ring, #6e56cf); | |
| outline-offset: 2px; | |
| } | |
| .lca-btn-start { | |
| background: var(--primary, #6e56cf); | |
| color: var(--primary-foreground, #fff); | |
| border-color: var(--primary, #6e56cf); | |
| } | |
| .lca-btn-start:hover { | |
| opacity: 0.9; | |
| } | |
| .lca-btn-stop { | |
| color: var(--destructive, #ef4444); | |
| border-color: var(--destructive, #ef4444); | |
| } | |
| .lca-btn-stop:hover { | |
| background: #fef2f2; | |
| } | |
| /* Status bar */ | |
| .lca-status-bar { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 12px; | |
| background: var(--secondary, #f4f4f5); | |
| border-radius: var(--radius, 0.5rem); | |
| margin-bottom: 8px; | |
| flex-wrap: wrap; | |
| } | |
| .lca-status-indicator { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: #999; | |
| } | |
| .lca-status-running { background: #4caf50; animation: lca-pulse 1.5s infinite; } | |
| .lca-status-paused { background: #ff9800; } | |
| .lca-status-completed { background: #2196f3; } | |
| .lca-status-error { background: #f44336; } | |
| @keyframes lca-pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.4; } | |
| } | |
| .lca-status-text { | |
| font-weight: 500; | |
| font-size: 0.9em; | |
| } | |
| .lca-turn-counter { | |
| color: var(--muted-foreground, #71717a); | |
| font-size: 0.85em; | |
| margin-left: auto; | |
| } | |
| .lca-controls { | |
| display: flex; | |
| gap: 6px; | |
| } | |
| /* Instruction input */ | |
| .lca-instruction { | |
| display: flex; | |
| gap: 6px; | |
| margin-bottom: 8px; | |
| } | |
| .lca-instruction-input { | |
| flex: 1; | |
| padding: 6px 10px; | |
| border: 1px solid var(--border, #e4e4e7); | |
| border-radius: var(--radius, 0.5rem); | |
| font-size: 0.9em; | |
| font-family: var(--font-sans, inherit); | |
| } | |
| .lca-instruction-input:focus { | |
| outline: 2px solid var(--ring, #6e56cf); | |
| outline-offset: -1px; | |
| } | |
| /* Thinking indicator */ | |
| .lca-thinking { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 12px; | |
| color: var(--muted-foreground, #71717a); | |
| font-size: 0.9em; | |
| font-style: italic; | |
| } | |
| .lca-thinking-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--primary, #6e56cf); | |
| animation: lca-pulse 1s infinite; | |
| } | |
| /* Streaming turns container */ | |
| .lca-turns { | |
| max-height: 600px; | |
| overflow-y: auto; | |
| scroll-behavior: smooth; | |
| } | |
| /* Pending tool call */ | |
| .lca-tool-pending { | |
| opacity: 0.7; | |
| } | |
| .lca-tool-spinner { | |
| font-size: 0.8em; | |
| color: var(--muted-foreground, #71717a); | |
| font-style: italic; | |
| margin-left: auto; | |
| } | |
| /* Error message */ | |
| .lca-error-msg { | |
| padding: 8px 12px; | |
| margin: 6px 0; | |
| background: #ffebee; | |
| border: 1px solid #ef5350; | |
| border-radius: var(--radius, 0.5rem); | |
| color: #c62828; | |
| font-size: 0.9em; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .coding-trace-with-sidebar .coding-trace-layout { | |
| flex-direction: column; | |
| } | |
| .coding-trace-sidebar { | |
| flex: none; | |
| } | |
| .ct-file-tree { | |
| position: static; | |
| } | |
| } | |