diff options
Diffstat (limited to 'frontend/src/components/document/nodes/StepsDiagram.css')
| -rw-r--r-- | frontend/src/components/document/nodes/StepsDiagram.css | 331 |
1 files changed, 327 insertions, 4 deletions
diff --git a/frontend/src/components/document/nodes/StepsDiagram.css b/frontend/src/components/document/nodes/StepsDiagram.css index f3e9305..9856c6d 100644 --- a/frontend/src/components/document/nodes/StepsDiagram.css +++ b/frontend/src/components/document/nodes/StepsDiagram.css @@ -15,6 +15,12 @@ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 14px; color: #374151; + transition: max-height 0.3s ease; +} + +.steps-diagram--has-expanded { + /* Allow more vertical space when a step is expanded */ + max-height: none; } /* ---- Header ---- */ @@ -92,18 +98,29 @@ border-top: 6px solid #cbd5e1; } -/* ---- Step Card ---- */ -.steps-diagram-card { +/* ---- Step Card Wrapper ---- */ +.steps-diagram-card-wrapper { flex: 1 1 180px; max-width: 280px; +} + +/* ---- Step Card ---- */ +.steps-diagram-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.65rem 0.8rem; - transition: box-shadow 0.2s ease, border-color 0.2s ease; + transition: box-shadow 0.2s ease, border-color 0.2s ease, max-width 0.3s ease; animation: stepCardAppear 0.35s ease-out both; } +.steps-diagram-card--expanded { + flex: 1 1 100%; + max-width: 100%; + border-color: #93c5fd; + box-shadow: 0 2px 12px rgba(59, 130, 246, 0.1); +} + @keyframes stepCardAppear { from { opacity: 0; @@ -119,6 +136,19 @@ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } +.steps-diagram-card--expandable { + cursor: pointer; +} + +.steps-diagram-card--expandable:hover { + border-color: #c7cbd5; +} + +.steps-diagram-card--expanded { + border-radius: 8px 8px 0 0; + border-bottom-color: transparent; +} + .steps-diagram-card-header { display: flex; align-items: center; @@ -127,6 +157,22 @@ margin-bottom: 0.3rem; } +.steps-diagram-card-header--clickable { + cursor: pointer; + user-select: none; +} + +.steps-diagram-card-header--clickable:hover .steps-diagram-card-name { + color: #2563eb; +} + +.steps-diagram-card-header-right { + display: flex; + align-items: center; + gap: 0.4rem; + flex-shrink: 0; +} + .steps-diagram-card-name { font-weight: 600; font-size: 0.85rem; @@ -135,6 +181,7 @@ text-overflow: ellipsis; white-space: nowrap; flex: 1; + transition: color 0.15s; } .steps-diagram-card-desc { @@ -160,6 +207,16 @@ font-weight: 500; } +.steps-diagram-card-contract-ref { + font-family: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, monospace; + font-size: 0.68rem; + color: #6b7280; + background: #f3f4f6; + padding: 0.08rem 0.35rem; + border-radius: 4px; + cursor: default; +} + .steps-diagram-card-progress { color: #d97706; font-style: italic; @@ -169,6 +226,23 @@ color: #6b7280; } +/* ---- Expand Icon ---- */ +.steps-diagram-expand-icon { + font-size: 0.6rem; + color: #9ca3af; + transition: transform 0.2s ease, color 0.15s; + display: inline-block; +} + +.steps-diagram-expand-icon.expanded { + transform: rotate(90deg); + color: #3b82f6; +} + +.steps-diagram-card-header--clickable:hover .steps-diagram-expand-icon { + color: #3b82f6; +} + /* ---- Status Badge ---- */ .steps-diagram-status-badge { font-size: 0.68rem; @@ -245,6 +319,19 @@ opacity: 0.7; } +/* ---- Expanded Card ---- */ +.steps-diagram-card--expanded { + flex: 1 1 100%; + max-width: 100%; +} + +.steps-diagram-card-expand { + flex-shrink: 0; + font-size: 0.7rem; + color: #9ca3af; + margin-left: 0.25rem; +} + /* ---- Animations ---- */ @keyframes statusPulse { 0%, 100% { @@ -347,14 +434,250 @@ font-size: 0.82rem; } +/* ============================================ + Step Log Feed (Expandable) + ============================================ */ + +.step-log-feed { + margin-top: 0.5rem; + border-top: 1px solid #e5e7eb; + padding-top: 0.5rem; + animation: logFeedSlideIn 0.25s ease-out both; +} + +@keyframes logFeedSlideIn { + from { + opacity: 0; + max-height: 0; + } + to { + opacity: 1; + max-height: 500px; + } +} + +.step-log-feed-header { + display: flex; + align-items: center; + justify-content: space-between; + padding-bottom: 0.4rem; + margin-bottom: 0.4rem; + border-bottom: 1px solid #f3f4f6; +} + +.step-log-feed-header-left { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.step-log-feed-header-right { + display: flex; + align-items: center; + gap: 0.35rem; +} + +.step-log-feed-title { + font-size: 0.75rem; + font-weight: 600; + color: #4b5563; +} + +.step-log-feed-status { + font-size: 0.65rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.04em; + padding: 0.1rem 0.4rem; + border-radius: 8px; +} + +.step-log-feed-status.connected { + background: #d1fae5; + color: #059669; +} + +.step-log-feed-status.disconnected { + background: #f3f4f6; + color: #9ca3af; +} + +.step-log-feed-interrupt-btn { + background: #fef2f2; + border: 1px solid #fecaca; + color: #dc2626; + font-size: 0.72rem; + font-weight: 600; + padding: 0.2rem 0.5rem; + border-radius: 5px; + cursor: pointer; + transition: background 0.15s, border-color 0.15s; +} + +.step-log-feed-interrupt-btn:hover { + background: #fee2e2; + border-color: #f87171; +} + +.step-log-feed-collapse-btn { + background: none; + border: 1px solid #e5e7eb; + color: #6b7280; + font-size: 0.75rem; + width: 22px; + height: 22px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; + cursor: pointer; + transition: all 0.15s; + padding: 0; +} + +.step-log-feed-collapse-btn:hover { + background: #f3f4f6; + color: #1f2937; + border-color: #d1d5db; +} + +/* Log content area */ +.step-log-feed-content { + max-height: 280px; + overflow-y: auto; + background: #1a1b26; + border-radius: 6px; + padding: 0.5rem; + font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace; + font-size: 0.75rem; + line-height: 1.5; +} + +.step-log-feed-empty { + color: #6b7280; + font-style: italic; + padding: 1rem; + text-align: center; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; +} + +.step-log-feed-error { + color: #f87171; + padding: 0.25rem; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + font-size: 0.78rem; +} + +/* Log entries */ +.step-log-entry { + display: flex; + gap: 0.5rem; + padding: 0.1rem 0.25rem; + border-radius: 2px; +} + +.step-log-entry:hover { + background: rgba(255, 255, 255, 0.03); +} + +.step-log-entry-time { + color: #565f89; + white-space: nowrap; + flex-shrink: 0; + min-width: 5.5em; +} + +.step-log-entry-content { + color: #a9b1d6; + word-break: break-word; + white-space: pre-wrap; +} + +.step-log-entry--stderr .step-log-entry-content { + color: #f7768e; +} + +.step-log-entry--system .step-log-entry-content { + color: #7aa2f7; + font-style: italic; +} + +.step-log-entry--user .step-log-entry-content { + color: #9ece6a; +} + +.step-log-entry--user::before { + content: '> '; + color: #9ece6a; +} + +/* Message input */ +.step-log-feed-input { + display: flex; + gap: 0.35rem; + margin-top: 0.4rem; +} + +.step-log-feed-input-field { + flex: 1; + background: #f9fafb; + border: 1px solid #e5e7eb; + border-radius: 5px; + padding: 0.35rem 0.6rem; + font-size: 0.78rem; + color: #1f2937; + outline: none; + transition: border-color 0.15s; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; +} + +.step-log-feed-input-field:focus { + border-color: #93c5fd; + box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); +} + +.step-log-feed-input-field:disabled { + opacity: 0.5; +} + +.step-log-feed-send-btn { + background: #3b82f6; + border: none; + color: #ffffff; + font-size: 0.82rem; + padding: 0.35rem 0.65rem; + border-radius: 5px; + cursor: pointer; + transition: background 0.15s; + white-space: nowrap; +} + +.step-log-feed-send-btn:hover:not(:disabled) { + background: #2563eb; +} + +.step-log-feed-send-btn:disabled { + background: #93c5fd; + cursor: not-allowed; +} + /* ---- Responsive ---- */ @media (max-width: 640px) { .steps-diagram { padding: 0.75rem; } - .steps-diagram-card { + .steps-diagram-card-wrapper { + flex: 1 1 100%; + max-width: 100%; + } + + .steps-diagram-card-wrapper { flex: 1 1 100%; max-width: 100%; } + + .step-log-feed-content { + max-height: 200px; + } } |