| |
|
|
| :root { |
| --bg: #0a0e14; |
| --bg-2: #0d1219; |
| --panel: #11161f; |
| --panel-2: #161d29; |
| --panel-3: #1d2533; |
| --border: #232b3a; |
| --border-soft: #1a2230; |
| --text: #e6e8eb; |
| --text-2: #c9ccd1; |
| --muted: #6b7380; |
| --muted-2: #4d5462; |
| --accent: #4fc3f7; |
| --accent-2: #7dd3fc; |
| --accent-soft: rgba(79, 195, 247, 0.12); |
| --violet: #a78bfa; |
| --warn: #f59e0b; |
| --bad: #f87171; |
| --ok: #4ade80; |
| --code-bg: #0d1219; |
| --shadow: 0 4px 24px rgba(0, 0, 0, 0.4); |
| } |
|
|
| @media (prefers-color-scheme: light) { |
| :root { |
| --bg: #fafbfc; |
| --bg-2: #f1f3f5; |
| --panel: #ffffff; |
| --panel-2: #f6f8fa; |
| --panel-3: #eef1f4; |
| --border: #d8dce2; |
| --border-soft: #e6e9ee; |
| --text: #1a1d22; |
| --text-2: #3a3f47; |
| --muted: #6b7380; |
| --muted-2: #9aa1ad; |
| --accent: #0284c7; |
| --accent-2: #0369a1; |
| --accent-soft: rgba(2, 132, 199, 0.1); |
| --violet: #7c3aed; |
| --warn: #b45309; |
| --bad: #dc2626; |
| --ok: #16a34a; |
| --code-bg: #f6f8fa; |
| --shadow: 0 2px 8px rgba(0, 0, 0, 0.06); |
| } |
| } |
|
|
| * { box-sizing: border-box; } |
| html, body { margin: 0; padding: 0; height: 100%; } |
| body { |
| background: |
| radial-gradient(circle at 0% 0%, rgba(79, 195, 247, 0.06), transparent 50%), |
| radial-gradient(circle at 100% 100%, rgba(167, 139, 250, 0.05), transparent 50%), |
| var(--bg); |
| color: var(--text); |
| font: 15px/1.55 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; |
| font-feature-settings: "cv11", "ss01", "ss03"; |
| display: flex; |
| flex-direction: column; |
| -webkit-font-smoothing: antialiased; |
| } |
|
|
| |
|
|
| header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 14px 24px; |
| border-bottom: 1px solid var(--border-soft); |
| background: rgba(10, 14, 20, 0.85); |
| backdrop-filter: blur(8px); |
| -webkit-backdrop-filter: blur(8px); |
| position: sticky; |
| top: 0; |
| z-index: 10; |
| } |
| @media (prefers-color-scheme: light) { |
| header { background: rgba(255, 255, 255, 0.85); } |
| } |
|
|
| .brand { |
| display: flex; |
| align-items: center; |
| gap: 14px; |
| } |
| .logo-link { |
| display: inline-flex; |
| align-items: center; |
| text-decoration: none; |
| transition: opacity 150ms; |
| } |
| .logo-link:hover { opacity: 0.85; } |
| .logo-img { |
| height: 28px; |
| width: auto; |
| display: block; |
| } |
| @media (max-width: 700px) { |
| .logo-img { height: 24px; } |
| } |
|
|
| .agent-status { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| margin-left: 8px; |
| padding: 3px 10px; |
| background: var(--panel); |
| border: 1px solid var(--border); |
| border-radius: 999px; |
| font-size: 11px; |
| letter-spacing: 0.5px; |
| color: var(--muted); |
| text-transform: uppercase; |
| } |
| .status-dot { |
| width: 7px; |
| height: 7px; |
| border-radius: 50%; |
| background: var(--muted-2); |
| } |
| .status-dot.idle { background: var(--muted-2); } |
| .status-dot.thinking { |
| background: var(--accent); |
| animation: pulse 1.2s infinite ease-in-out; |
| } |
| .status-dot.working { |
| background: var(--violet); |
| animation: pulse 0.8s infinite ease-in-out; |
| } |
| .status-dot.error { background: var(--bad); } |
|
|
| @keyframes pulse { |
| 0%, 100% { opacity: 0.45; transform: scale(0.8); } |
| 50% { opacity: 1; transform: scale(1.15); } |
| } |
|
|
| .repo-link { |
| color: var(--muted); |
| text-decoration: none; |
| font-size: 12px; |
| letter-spacing: 0.5px; |
| text-transform: uppercase; |
| padding: 5px 10px; |
| border: 1px solid var(--border); |
| border-radius: 6px; |
| transition: all 150ms; |
| } |
| .repo-link:hover { color: var(--accent); border-color: var(--accent); } |
|
|
| |
|
|
| main#chat { |
| flex: 1; |
| overflow-y: auto; |
| padding: 0 22px 12px; |
| width: 100%; |
| max-width: 880px; |
| margin: 0 auto; |
| } |
|
|
| #thread { padding-top: 8px; } |
| #thread:empty { display: none; } |
|
|
| |
|
|
| #hero { |
| padding: 48px 0 40px; |
| text-align: left; |
| animation: hero-in 500ms ease-out; |
| } |
| #hero.hidden { display: none; } |
|
|
| @keyframes hero-in { |
| from { opacity: 0; transform: translateY(8px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| .hero-mark { |
| height: 64px; |
| width: auto; |
| display: block; |
| margin-bottom: 18px; |
| filter: drop-shadow(0 4px 16px rgba(79, 195, 247, 0.18)); |
| animation: float 4s ease-in-out infinite; |
| } |
| @keyframes float { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-3px); } |
| } |
|
|
| .hero-tag { |
| display: inline-block; |
| padding: 4px 10px; |
| font-size: 11px; |
| letter-spacing: 1.5px; |
| text-transform: uppercase; |
| color: var(--accent); |
| border: 1px solid var(--accent); |
| border-radius: 999px; |
| background: var(--accent-soft); |
| margin-bottom: 22px; |
| } |
|
|
| #hero h1 { |
| margin: 0 0 14px; |
| font-size: 38px; |
| font-weight: 700; |
| letter-spacing: -1px; |
| line-height: 1.1; |
| } |
| .cursor { |
| color: var(--accent); |
| animation: blink 1.1s step-end infinite; |
| font-weight: 400; |
| margin-left: 4px; |
| } |
| @keyframes blink { |
| 0%, 50% { opacity: 1; } |
| 51%, 100% { opacity: 0; } |
| } |
|
|
| .hero-sub { |
| color: var(--text-2); |
| font-size: 16px; |
| max-width: 620px; |
| margin: 0 0 24px; |
| line-height: 1.55; |
| } |
| .kbd { |
| font: 13px ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace; |
| background: var(--panel-2); |
| border: 1px solid var(--border); |
| border-radius: 4px; |
| padding: 1px 6px; |
| color: var(--accent); |
| } |
|
|
| .quick-actions { |
| display: flex; |
| gap: 8px; |
| flex-wrap: wrap; |
| margin-bottom: 32px; |
| } |
| .chip { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| padding: 8px 14px; |
| background: var(--panel); |
| border: 1px solid var(--border); |
| color: var(--text); |
| border-radius: 8px; |
| font: inherit; |
| font-size: 13.5px; |
| cursor: pointer; |
| transition: all 150ms; |
| } |
| .chip:hover { |
| border-color: var(--accent); |
| background: var(--accent-soft); |
| transform: translateY(-1px); |
| } |
| .chip-key { |
| color: var(--accent); |
| font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, monospace; |
| font-size: 12px; |
| } |
|
|
| |
|
|
| .hero-demo { |
| position: relative; |
| margin: 4px 0 28px; |
| background: var(--panel); |
| border: 1px solid var(--border); |
| border-radius: 12px; |
| overflow: hidden; |
| cursor: pointer; |
| transition: border-color 200ms, transform 200ms, box-shadow 200ms; |
| box-shadow: var(--shadow); |
| } |
| .hero-demo:hover, .hero-demo:focus-visible { |
| border-color: var(--accent); |
| transform: translateY(-2px); |
| box-shadow: 0 8px 32px rgba(79, 195, 247, 0.18); |
| outline: none; |
| } |
| .hero-demo-tag { |
| position: absolute; |
| top: 10px; |
| right: 12px; |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| font: 10px ui-monospace, "JetBrains Mono", SFMono-Regular, monospace; |
| color: var(--accent); |
| letter-spacing: 1px; |
| text-transform: uppercase; |
| z-index: 2; |
| pointer-events: none; |
| } |
| .hd-pulse { |
| width: 6px; |
| height: 6px; |
| border-radius: 50%; |
| background: var(--accent); |
| box-shadow: 0 0 8px var(--accent); |
| animation: now-pulse 1s infinite ease-in-out; |
| } |
|
|
| .demo-grid { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); |
| gap: 0; |
| } |
| @media (max-width: 700px) { |
| .demo-grid { grid-template-columns: 1fr; } |
| } |
|
|
| .demo-code { |
| position: relative; |
| background: var(--code-bg); |
| border-right: 1px solid var(--border-soft); |
| padding: 16px 18px 18px; |
| } |
| @media (max-width: 700px) { |
| .demo-code { border-right: none; border-bottom: 1px solid var(--border-soft); } |
| } |
| .demo-code-head { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| margin-bottom: 12px; |
| } |
| .demo-file { |
| font: 11px ui-monospace, "JetBrains Mono", SFMono-Regular, monospace; |
| color: var(--muted); |
| } |
| .demo-lang { |
| padding: 1px 6px; |
| border: 1px solid var(--border); |
| border-radius: 3px; |
| color: var(--accent); |
| font: 10px ui-monospace, "JetBrains Mono", SFMono-Regular, monospace; |
| letter-spacing: 0.5px; |
| } |
| .demo-src { |
| margin: 0; |
| background: transparent; |
| border: none; |
| padding: 0; |
| font: 12.5px/1.7 ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace; |
| color: var(--text-2); |
| white-space: pre; |
| overflow-x: auto; |
| } |
| .demo-src .ln { |
| display: inline-block; |
| width: 18px; |
| color: var(--muted-2); |
| user-select: none; |
| text-align: right; |
| margin-right: 8px; |
| } |
| .demo-src .kw { color: var(--violet); } |
| .demo-src .fn { color: var(--accent); font-weight: 600; } |
| .demo-src .str { color: var(--ok); } |
| .demo-caret { |
| position: absolute; |
| left: 38px; |
| height: 14px; |
| width: 7px; |
| background: var(--accent); |
| opacity: 0; |
| transition: top 350ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms; |
| border-radius: 1px; |
| pointer-events: none; |
| top: 70px; |
| } |
| .demo-caret.visible { |
| opacity: 0.65; |
| animation: caret-blink 1.1s step-end infinite; |
| } |
| @keyframes caret-blink { |
| 0%, 50% { opacity: 0.65; } |
| 51%, 100% { opacity: 0.15; } |
| } |
|
|
| .demo-pipe { |
| padding: 16px 18px 18px; |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
| .demo-phases { |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| flex-wrap: nowrap; |
| overflow: hidden; |
| } |
| .demo-phase { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| padding: 4px 7px; |
| font: 10.5px ui-monospace, "JetBrains Mono", SFMono-Regular, monospace; |
| color: var(--muted-2); |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| border-radius: 6px; |
| transition: color 200ms, background 200ms; |
| white-space: nowrap; |
| } |
| .demo-phase.active { |
| color: var(--accent); |
| background: var(--accent-soft); |
| } |
| .demo-phase.active .phase-dot { |
| background: var(--accent); |
| border-color: var(--accent); |
| transform: scale(1.15); |
| animation: phase-ring 1.4s infinite ease-out; |
| } |
| .demo-phase.done { color: var(--ok); } |
| .demo-phase.done .phase-dot { |
| background: var(--ok); |
| border-color: var(--ok); |
| } |
|
|
| .demo-now { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 8px 11px; |
| background: var(--panel-2); |
| border: 1px solid var(--border-soft); |
| border-radius: 6px; |
| position: relative; |
| overflow: hidden; |
| min-height: 34px; |
| } |
| .demo-now::before { |
| content: ""; |
| position: absolute; |
| inset: 0; |
| background: linear-gradient(90deg, transparent, var(--accent-soft), transparent); |
| background-size: 50% 100%; |
| background-repeat: no-repeat; |
| background-position: -50% 0; |
| animation: now-sweep 2.4s infinite linear; |
| pointer-events: none; |
| } |
| .demo-now.done { border-color: var(--ok); } |
| .demo-now.done::before { animation: none; } |
| .demo-now-text { |
| font: 12px ui-monospace, "JetBrains Mono", SFMono-Regular, monospace; |
| color: var(--text-2); |
| position: relative; |
| z-index: 1; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| .demo-now.done .demo-now-text { color: var(--ok); } |
| .demo-now.done .now-icon { |
| background: var(--ok); |
| box-shadow: 0 0 8px var(--ok); |
| animation: none; |
| } |
|
|
| .demo-result { |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| padding: 8px 12px; |
| border: 1px solid var(--bad); |
| border-radius: 6px; |
| background: rgba(248, 113, 113, 0.08); |
| animation: bug-in 360ms cubic-bezier(0.2, 0.8, 0.2, 1); |
| } |
| @media (prefers-color-scheme: light) { |
| .demo-result { background: rgba(220, 38, 38, 0.06); } |
| } |
| .demo-verdict { |
| font: 12px ui-monospace, "JetBrains Mono", SFMono-Regular, monospace; |
| color: var(--bad); |
| font-weight: 600; |
| letter-spacing: 0.3px; |
| } |
| .demo-detail { |
| font: 11px/1.5 ui-monospace, "JetBrains Mono", SFMono-Regular, monospace; |
| color: var(--muted); |
| } |
| .demo-detail code { |
| background: var(--panel-3); |
| border: 1px solid var(--border-soft); |
| border-radius: 3px; |
| padding: 0 4px; |
| color: var(--accent); |
| } |
|
|
| |
| .hero-demo.paused .demo-phase.active .phase-dot, |
| .hero-demo.paused .phase-line.flowing, |
| .hero-demo.paused .demo-now::before, |
| .hero-demo.paused .hd-pulse, |
| .hero-demo.paused .now-icon { animation-play-state: paused; } |
|
|
| .cap-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); |
| gap: 12px; |
| border-top: 1px solid var(--border-soft); |
| padding-top: 24px; |
| } |
| .cap { |
| padding: 14px 16px; |
| background: var(--panel); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| } |
| .cap-h { |
| font-size: 13px; |
| font-weight: 600; |
| margin-bottom: 4px; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
| .cap-h::before { |
| content: ""; |
| width: 6px; |
| height: 6px; |
| border-radius: 50%; |
| background: var(--accent); |
| } |
| .cap-d { font-size: 12.5px; color: var(--muted); } |
|
|
| |
|
|
| .msg { |
| display: grid; |
| grid-template-columns: 76px 1fr; |
| gap: 14px; |
| margin: 0 0 22px; |
| } |
| .msg .role { |
| text-align: right; |
| color: var(--muted); |
| font: 11px ui-monospace, "JetBrains Mono", SFMono-Regular, monospace; |
| letter-spacing: 1px; |
| text-transform: uppercase; |
| padding-top: 8px; |
| } |
| .msg .body { |
| background: var(--panel); |
| border: 1px solid var(--border); |
| border-radius: 10px; |
| padding: 12px 16px; |
| } |
| .msg.user .body { |
| background: var(--panel-2); |
| border-color: var(--border); |
| } |
| .msg.user .role { color: var(--accent); } |
| .msg.system .body { |
| background: transparent; |
| border-style: dashed; |
| border-color: var(--border-soft); |
| color: var(--muted); |
| font-size: 13px; |
| padding: 8px 14px; |
| } |
| .msg.system .role { color: var(--muted-2); } |
| .msg.run .body { padding: 14px 16px; } |
|
|
| .body p { margin: 0 0 8px; } |
| .body p:last-child { margin-bottom: 0; } |
| .body strong { color: var(--text); } |
|
|
| .body pre { |
| background: var(--code-bg); |
| border: 1px solid var(--border); |
| border-radius: 6px; |
| padding: 12px 14px; |
| overflow-x: auto; |
| font: 13px/1.6 ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace; |
| margin: 10px 0; |
| } |
| .body code:not(pre code) { |
| background: var(--panel-2); |
| border: 1px solid var(--border-soft); |
| border-radius: 4px; |
| padding: 1px 6px; |
| font: 13px ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace; |
| color: var(--accent); |
| } |
| .body ul, .body ol { margin: 8px 0; padding-left: 22px; } |
|
|
| |
|
|
| .run-head { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| padding-bottom: 12px; |
| border-bottom: 1px solid var(--border-soft); |
| margin-bottom: 12px; |
| } |
| .phases { |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| flex: 1; |
| overflow-x: auto; |
| } |
| .phase { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| padding: 4px 8px; |
| font: 11px ui-monospace, "JetBrains Mono", SFMono-Regular, monospace; |
| color: var(--muted-2); |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| border-radius: 6px; |
| transition: color 200ms, background 200ms; |
| white-space: nowrap; |
| } |
| .phase-dot { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: var(--muted-2); |
| border: 1px solid var(--muted-2); |
| transition: background 250ms, border-color 250ms, transform 200ms; |
| } |
| .phase.active { |
| color: var(--accent); |
| background: var(--accent-soft); |
| } |
| .phase.active .phase-dot { |
| background: var(--accent); |
| border-color: var(--accent); |
| transform: scale(1.15); |
| animation: phase-ring 1.4s infinite ease-out; |
| } |
| .phase.done { |
| color: var(--ok); |
| } |
| .phase.done .phase-dot { |
| background: var(--ok); |
| border-color: var(--ok); |
| } |
| .phase-line { |
| flex: 0 0 16px; |
| height: 1px; |
| background: linear-gradient(to right, var(--border) 0%, var(--border) 100%); |
| background-size: 200% 100%; |
| background-position: right; |
| transition: background-position 600ms ease-out, background 200ms; |
| } |
| .phase-line.flowing { |
| background: linear-gradient(to right, var(--ok) 0%, var(--accent) 50%, var(--border) 100%); |
| background-size: 200% 100%; |
| animation: phase-flow 1.2s infinite linear; |
| } |
| .phase-line.done { |
| background: var(--ok); |
| } |
|
|
| @keyframes phase-ring { |
| 0% { box-shadow: 0 0 0 0 var(--accent); opacity: 1; } |
| 70% { box-shadow: 0 0 0 8px transparent; opacity: 0.9; } |
| 100% { box-shadow: 0 0 0 0 transparent; opacity: 1; } |
| } |
| @keyframes phase-flow { |
| 0% { background-position: 100% 0; } |
| 100% { background-position: -100% 0; } |
| } |
|
|
| .run-elapsed { |
| display: inline-flex; |
| align-items: baseline; |
| gap: 1px; |
| padding: 3px 10px; |
| background: var(--panel-3); |
| border: 1px solid var(--border); |
| border-radius: 999px; |
| font: 12px ui-monospace, "JetBrains Mono", SFMono-Regular, monospace; |
| color: var(--muted); |
| flex-shrink: 0; |
| } |
| .run-elapsed-num { |
| font-variant-numeric: tabular-nums; |
| color: var(--text); |
| font-weight: 600; |
| } |
| .run-elapsed-unit { |
| color: var(--muted); |
| margin-left: 2px; |
| font-size: 11px; |
| } |
| .run-elapsed.done { border-color: var(--ok); color: var(--ok); } |
| .run-elapsed.done .run-elapsed-num { color: var(--ok); } |
|
|
| |
|
|
| .now-line { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 10px 12px; |
| background: var(--panel-2); |
| border: 1px solid var(--border-soft); |
| border-radius: 8px; |
| margin-bottom: 10px; |
| font-size: 13.5px; |
| color: var(--text-2); |
| position: relative; |
| overflow: hidden; |
| min-height: 38px; |
| } |
| .now-line::before { |
| content: ""; |
| position: absolute; |
| inset: 0; |
| background: linear-gradient(90deg, transparent, var(--accent-soft), transparent); |
| background-size: 50% 100%; |
| background-repeat: no-repeat; |
| background-position: -50% 0; |
| animation: now-sweep 2.4s infinite linear; |
| pointer-events: none; |
| } |
| .now-line.idle::before { animation: none; } |
| .now-line.done { |
| border-color: var(--ok); |
| color: var(--ok); |
| } |
| .now-line.done::before { animation: none; } |
| @keyframes now-sweep { |
| 0% { background-position: -50% 0; } |
| 100% { background-position: 150% 0; } |
| } |
| .now-icon { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: var(--accent); |
| flex-shrink: 0; |
| animation: now-pulse 1s infinite ease-in-out; |
| box-shadow: 0 0 8px var(--accent); |
| } |
| .now-line.done .now-icon { |
| background: var(--ok); |
| box-shadow: 0 0 8px var(--ok); |
| animation: none; |
| } |
| @keyframes now-pulse { |
| 0%, 100% { transform: scale(1); opacity: 0.7; } |
| 50% { transform: scale(1.3); opacity: 1; } |
| } |
| .now-text { |
| flex: 1; |
| font: 13.5px ui-monospace, "JetBrains Mono", SFMono-Regular, monospace; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .log-disc { |
| font-size: 12.5px; |
| color: var(--muted); |
| } |
| .log-disc summary { |
| cursor: pointer; |
| user-select: none; |
| padding: 4px 0; |
| list-style: none; |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| } |
| .log-disc summary::before { |
| content: "▶"; |
| font-size: 9px; |
| color: var(--muted-2); |
| transition: transform 150ms; |
| display: inline-block; |
| } |
| .log-disc[open] summary::before { transform: rotate(90deg); } |
| .log-disc summary:hover { color: var(--text); } |
|
|
| .run-log { |
| margin: 6px 0 0; |
| padding: 10px 14px; |
| list-style: none; |
| font: 12px/1.55 ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace; |
| max-height: 260px; |
| overflow-y: auto; |
| color: var(--muted); |
| background: var(--bg-2); |
| border: 1px solid var(--border-soft); |
| border-radius: 6px; |
| } |
| .run-log li { |
| margin: 0; |
| white-space: pre-wrap; |
| word-break: break-word; |
| animation: log-in 220ms ease-out; |
| position: relative; |
| padding-left: 12px; |
| } |
| .run-log li::before { |
| content: "›"; |
| position: absolute; |
| left: 0; |
| color: var(--muted-2); |
| } |
| .run-log li.warn { color: var(--warn); } |
| .run-log li.warn::before { color: var(--warn); } |
| .run-log li.error { color: var(--bad); } |
| .run-log li.error::before { color: var(--bad); } |
| @keyframes log-in { |
| from { opacity: 0; transform: translateX(-6px); } |
| to { opacity: 1; transform: translateX(0); } |
| } |
|
|
| |
|
|
| .bug-summary { margin-top: 12px; } |
| .bug-summary .verdict { |
| font-weight: 600; |
| font-size: 14px; |
| margin-bottom: 10px; |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| padding: 6px 12px; |
| border-radius: 6px; |
| } |
| .bug-summary .verdict.ok { |
| color: var(--ok); |
| background: rgba(74, 222, 128, 0.08); |
| border: 1px solid var(--ok); |
| } |
| .bug-summary .verdict.bad { |
| color: var(--bad); |
| background: rgba(248, 113, 113, 0.08); |
| border: 1px solid var(--bad); |
| } |
|
|
| .bug-card { |
| background: var(--panel-2); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| padding: 12px 14px; |
| margin: 8px 0; |
| animation: bug-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards; |
| } |
| .bug-card:nth-child(1) { animation-delay: 60ms; } |
| .bug-card:nth-child(2) { animation-delay: 120ms; } |
| .bug-card:nth-child(3) { animation-delay: 180ms; } |
| .bug-card:nth-child(4) { animation-delay: 240ms; } |
| @keyframes bug-in { |
| from { opacity: 0; transform: translateY(8px) scale(0.98); } |
| to { opacity: 1; transform: translateY(0) scale(1); } |
| } |
| .bug-card .row { |
| display: flex; |
| gap: 8px; |
| flex-wrap: wrap; |
| align-items: center; |
| margin-bottom: 6px; |
| } |
| .bug-card .fn-name { |
| font: 13px ui-monospace, "JetBrains Mono", SFMono-Regular, monospace; |
| font-weight: 600; |
| color: var(--accent); |
| } |
| .bug-card .badge { |
| font-size: 10.5px; |
| padding: 2px 8px; |
| border-radius: 4px; |
| border: 1px solid var(--border); |
| color: var(--muted); |
| letter-spacing: 0.6px; |
| text-transform: uppercase; |
| font-weight: 500; |
| } |
| .bug-card .badge.tier-confirmed_dynamic, |
| .bug-card .badge.tier-confirmed_system_entry { |
| color: var(--bad); |
| border-color: var(--bad); |
| background: rgba(248, 113, 113, 0.08); |
| } |
| .bug-card .badge.tier-confirmed_bmc { |
| color: var(--warn); |
| border-color: var(--warn); |
| background: rgba(245, 158, 11, 0.08); |
| } |
| .bug-card .badge.tier-likely { color: var(--muted); } |
| .bug-card .badge.tier-unlikely { color: var(--muted); opacity: 0.6; } |
| .bug-card .prop { |
| font: 12px ui-monospace, "JetBrains Mono", SFMono-Regular, monospace; |
| color: var(--text-2); |
| margin: 4px 0; |
| } |
| .bug-card .chain { |
| font: 11.5px ui-monospace, "JetBrains Mono", SFMono-Regular, monospace; |
| color: var(--muted); |
| margin-top: 6px; |
| } |
| .bug-reason { |
| margin-top: 8px; |
| font-size: 12px; |
| color: var(--muted); |
| } |
| .bug-reason summary { |
| cursor: pointer; |
| user-select: none; |
| list-style: none; |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| color: var(--muted); |
| letter-spacing: 0.3px; |
| } |
| .bug-reason summary::before { |
| content: "▶"; |
| font-size: 9px; |
| color: var(--muted-2); |
| transition: transform 150ms; |
| display: inline-block; |
| } |
| .bug-reason[open] summary::before { transform: rotate(90deg); } |
| .bug-reason summary:hover { color: var(--text); } |
| .reason-body { |
| margin-top: 8px; |
| padding: 10px 12px; |
| background: var(--bg-2); |
| border: 1px solid var(--border-soft); |
| border-radius: 6px; |
| color: var(--text-2); |
| font: 12.5px/1.55 ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace; |
| white-space: pre-wrap; |
| word-break: break-word; |
| max-height: 220px; |
| overflow-y: auto; |
| } |
|
|
| |
|
|
| form#composer { |
| border-top: 1px solid var(--border-soft); |
| background: rgba(10, 14, 20, 0.85); |
| backdrop-filter: blur(8px); |
| -webkit-backdrop-filter: blur(8px); |
| padding: 14px 22px 12px; |
| width: 100%; |
| max-width: 920px; |
| margin: 0 auto; |
| } |
| @media (prefers-color-scheme: light) { |
| form#composer { background: rgba(255, 255, 255, 0.85); } |
| } |
|
|
| .composer-wrap { |
| display: flex; |
| align-items: flex-end; |
| gap: 8px; |
| background: var(--panel); |
| border: 1px solid var(--border); |
| border-radius: 12px; |
| padding: 8px 8px 8px 14px; |
| transition: border-color 150ms, box-shadow 150ms; |
| } |
| .composer-wrap:focus-within { |
| border-color: var(--accent); |
| box-shadow: 0 0 0 3px var(--accent-soft); |
| } |
|
|
| #input { |
| flex: 1; |
| resize: none; |
| min-height: 24px; |
| max-height: 220px; |
| padding: 6px 0; |
| background: transparent; |
| color: var(--text); |
| border: none; |
| font: 14.5px/1.5 "Inter", ui-sans-serif, system-ui, sans-serif; |
| outline: none; |
| } |
| #input::placeholder { color: var(--muted-2); } |
|
|
| #send { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| width: 36px; |
| height: 36px; |
| background: var(--accent); |
| color: var(--bg); |
| border: none; |
| border-radius: 8px; |
| cursor: pointer; |
| flex-shrink: 0; |
| transition: all 150ms; |
| } |
| #send:hover:not(:disabled) { |
| background: var(--accent-2); |
| transform: translateY(-1px); |
| } |
| #send:disabled { |
| opacity: 0.4; |
| cursor: not-allowed; |
| background: var(--muted-2); |
| } |
|
|
| .composer-key { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| margin-top: 8px; |
| flex-wrap: wrap; |
| } |
|
|
| #api-key { |
| flex: 0 1 320px; |
| min-width: 0; |
| background: var(--bg-2); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| padding: 7px 10px; |
| color: var(--fg); |
| font: 12px ui-monospace, "JetBrains Mono", SFMono-Regular, monospace; |
| letter-spacing: 0.2px; |
| transition: border-color 0.15s, box-shadow 0.15s; |
| } |
|
|
| #api-key:focus { |
| outline: none; |
| border-color: var(--accent); |
| box-shadow: 0 0 0 3px var(--accent-soft); |
| } |
|
|
| #api-key::placeholder { color: var(--muted-2); } |
|
|
| #api-key.key-needed { |
| border-color: #f87171; |
| box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18); |
| } |
|
|
| .key-note { |
| font: 11px ui-monospace, "JetBrains Mono", SFMono-Regular, monospace; |
| color: var(--muted-2); |
| letter-spacing: 0.2px; |
| } |
|
|
| .key-note a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--muted-2); } |
| .key-note a:hover { color: var(--accent); } |
|
|
| .composer-hint { |
| display: flex; |
| justify-content: space-between; |
| margin-top: 6px; |
| font: 11px ui-monospace, "JetBrains Mono", SFMono-Regular, monospace; |
| color: var(--muted-2); |
| letter-spacing: 0.3px; |
| padding: 0 4px; |
| } |
|
|
| |
|
|
| @media (max-width: 700px) { |
| #hero { padding: 32px 0 24px; } |
| #hero h1 { font-size: 28px; } |
| .msg { grid-template-columns: 56px 1fr; gap: 8px; } |
| .msg .role { font-size: 10px; } |
| main#chat { padding: 0 14px 8px; } |
| form#composer { padding: 12px 14px; } |
| header { padding: 12px 16px; } |
| .agent-status { display: none; } |
| } |
|
|
