/* ======================================== * CLI Manager Styles * Unified font: system-ui for UI, monospace for code * ======================================== */ /* ======================================== * Status Manager - Two Column Layout * ======================================== */ .status-manager { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .status-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; } @media (max-width: 1024px) { .status-two-column { grid-template-columns: 1fr; } } /* Section Container */ .status-section { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.75rem; overflow: hidden; } /* CLI Section - No card wrapper */ .cli-section { /* No background, border, or card styling */ } .cli-section .section-header { padding: 0 0 0.75rem 0; border-bottom: none; background: transparent; } .cli-section .section-header h3 { font-size: 0.9375rem; } .cli-section .tools-list, .cli-section .ccw-list, .cli-section .endpoint-tools-grid { padding: 0; } /* Section Header */ .section-header { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1rem; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.3); } .section-header-left { display: flex; align-items: center; gap: 0.75rem; } .section-header h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: hsl(var(--foreground)); margin: 0; } .section-header h3 i { color: hsl(var(--muted-foreground)); } .section-count { font-size: 0.75rem; color: hsl(var(--muted-foreground)); } .section-header-actions { display: flex; align-items: center; gap: 0.25rem; } /* Tools List */ .tools-list { padding: 0.5rem; } .tool-item { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; border-radius: 0.5rem; margin-bottom: 0.375rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); transition: all 0.15s ease; } .tool-item:last-child { margin-bottom: 0; } .tool-item:hover { background: hsl(var(--hover)); border-color: hsl(var(--primary) / 0.3); } .tool-item.available { /* No left border - use status dot instead */ } .tool-item.unavailable { opacity: 0.7; } .tool-item.endpoint { /* No left border */ } .tool-item-left { display: flex; align-items: center; gap: 0.75rem; } .tool-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .tool-status-dot.status-available { background: hsl(var(--success)); box-shadow: 0 0 6px hsl(var(--success) / 0.5); } .tool-status-dot.status-unavailable { background: hsl(var(--muted-foreground) / 0.4); } .tool-item-info { display: flex; flex-direction: column; gap: 0.125rem; } .tool-item-name { font-size: 0.8125rem; font-weight: 600; color: hsl(var(--foreground)); display: flex; align-items: center; gap: 0.5rem; } .tool-item-desc { font-size: 0.6875rem; color: hsl(var(--muted-foreground)); } .tool-default-badge { font-size: 0.5625rem; font-weight: 600; padding: 0.125rem 0.375rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.03em; } .tool-type-badge { font-size: 0.5625rem; font-weight: 500; padding: 0.125rem 0.375rem; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border-radius: 0.25rem; } .tool-type-badge.ai { background: hsl(var(--primary) / 0.15); color: hsl(var(--primary)); } .tool-item-right { display: flex; align-items: center; gap: 0.5rem; } .tool-status-text { display: flex; align-items: center; gap: 0.25rem; font-size: 0.6875rem; font-weight: 500; } .tool-status-text.success { color: hsl(var(--success)); } .tool-status-text.muted { color: hsl(var(--muted-foreground)); } /* CCW List */ .ccw-list { padding: 0.5rem; } .ccw-item { display: flex; align-items: flex-start; justify-content: space-between; padding: 0.75rem; border-radius: 0.5rem; margin-bottom: 0.375rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); transition: all 0.15s ease; } .ccw-item:last-child { margin-bottom: 0; } .ccw-item:hover { background: hsl(var(--hover)); border-color: hsl(var(--primary) / 0.3); } .ccw-item-left { display: flex; align-items: flex-start; gap: 0.75rem; flex: 1; min-width: 0; } .ccw-item-mode { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; flex-shrink: 0; } .ccw-item-mode.global { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); } .ccw-item-mode.path { background: hsl(var(--warning) / 0.1); color: hsl(var(--warning)); } .ccw-item-info { flex: 1; min-width: 0; } .ccw-item-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; } .ccw-item-name { font-size: 0.8125rem; font-weight: 600; color: hsl(var(--foreground)); } .ccw-item-path { font-size: 0.6875rem; color: hsl(var(--muted-foreground)); font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; background: hsl(var(--muted) / 0.5); padding: 0.25rem 0.5rem; border-radius: 0.25rem; margin-bottom: 0.375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ccw-item-meta { display: flex; gap: 0.75rem; font-size: 0.625rem; color: hsl(var(--muted-foreground)); } .ccw-item-meta span { display: flex; align-items: center; gap: 0.25rem; } .ccw-item-actions { display: flex; align-items: center; gap: 0.25rem; opacity: 0; transition: opacity 0.15s ease; } .ccw-item:hover .ccw-item-actions { opacity: 1; } /* ======================================== * History View Styles * ======================================== */ .history-view { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .history-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; margin-bottom: 1rem; border-bottom: 1px solid hsl(var(--border)); } .history-header-left { display: flex; align-items: center; gap: 0.75rem; } .history-count { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); } .history-header-right { display: flex; align-items: center; gap: 0.5rem; } .history-search-wrapper { position: relative; display: flex; align-items: center; } .history-search-wrapper i { position: absolute; left: 0.625rem; color: hsl(var(--muted-foreground)); pointer-events: none; } .history-search-input { padding: 0.5rem 0.75rem 0.5rem 2rem; border: 1px solid hsl(var(--border)); border-radius: 0.5rem; background: hsl(var(--background)); color: hsl(var(--foreground)); font-size: 0.8125rem; width: 220px; transition: all 0.2s ease; } .history-search-input:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15); width: 260px; } .history-search-input::placeholder { color: hsl(var(--muted-foreground) / 0.7); } .history-filter-select { padding: 0.5rem 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 0.5rem; background: hsl(var(--background)); color: hsl(var(--foreground)); font-size: 0.8125rem; cursor: pointer; transition: all 0.2s ease; } .history-filter-select:hover { border-color: hsl(var(--primary) / 0.5); } .history-filter-select:focus { outline: none; border-color: hsl(var(--primary)); } /* History List */ .history-list { display: flex; flex-direction: column; gap: 0.5rem; } .history-item { display: flex; align-items: flex-start; justify-content: space-between; padding: 1rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; cursor: pointer; transition: all 0.15s ease; } .history-item:hover { background: hsl(var(--hover)); border-color: hsl(var(--primary) / 0.3); box-shadow: 0 2px 8px hsl(var(--foreground) / 0.05); } .history-item:hover .history-item-actions { opacity: 1; } .history-item-main { flex: 1; min-width: 0; } .history-item-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; } .history-tool-tag { font-size: 0.625rem; font-weight: 600; padding: 0.1875rem 0.5rem; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.04em; } .history-tool-tag.tool-gemini { background: hsl(210 80% 55% / 0.12); color: hsl(210 80% 45%); } .history-tool-tag.tool-qwen { background: hsl(280 70% 55% / 0.12); color: hsl(280 70% 45%); } .history-tool-tag.tool-codex { background: hsl(142 71% 45% / 0.12); color: hsl(142 71% 35%); } .history-mode-tag { font-size: 0.625rem; font-weight: 500; padding: 0.1875rem 0.5rem; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border-radius: 0.25rem; } .history-source-dir { font-size: 0.625rem; font-weight: 500; padding: 0.1875rem 0.5rem; background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); border-radius: 0.25rem; display: inline-flex; align-items: center; gap: 0.25rem; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .history-status { display: flex; align-items: center; gap: 0.25rem; font-size: 0.625rem; font-weight: 500; padding: 0.1875rem 0.5rem; border-radius: 9999px; } .history-status.success { background: hsl(var(--success) / 0.12); color: hsl(var(--success)); } .history-status.warning { background: hsl(var(--warning) / 0.12); color: hsl(var(--warning)); } .history-status.error { background: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); } .history-item-prompt { font-size: 0.875rem; font-weight: 450; color: hsl(var(--foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.5; margin-bottom: 0.5rem; } .history-item-meta { display: flex; align-items: center; gap: 1rem; font-size: 0.6875rem; color: hsl(var(--muted-foreground)); } .history-item-meta span { display: flex; align-items: center; gap: 0.25rem; } .history-item-actions { display: flex; align-items: center; gap: 0.25rem; opacity: 0; transition: opacity 0.15s ease; margin-left: 0.75rem; } /* History Empty State */ .history-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; text-align: center; color: hsl(var(--muted-foreground)); } .history-empty-state i { opacity: 0.3; margin-bottom: 1rem; } .history-empty-state h3 { font-size: 1rem; font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 0.5rem; } .history-empty-state p { font-size: 0.8125rem; } /* ======================================== * Legacy Container Styles (kept for compatibility) * ======================================== */ /* Container */ .cli-manager-container { display: flex; flex-direction: column; gap: 1.25rem; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .cli-manager-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 1.25rem; align-items: start; } @media (max-width: 768px) { .cli-manager-grid { grid-template-columns: 1fr; } } /* Panels */ .cli-panel { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.75rem; overflow: hidden; box-shadow: 0 1px 3px hsl(var(--foreground) / 0.04); transition: box-shadow 0.2s ease; } .cli-panel:hover { box-shadow: 0 4px 12px hsl(var(--foreground) / 0.08); } .cli-panel-full { grid-column: 1 / -1; } /* Status Panel */ .cli-status-header { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 0.75rem; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.3); } .cli-status-header h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: hsl(var(--foreground)); margin: 0; letter-spacing: -0.01em; } .cli-status-header h3 i { color: hsl(var(--muted-foreground)); } .cli-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem; padding: 0.5rem 0.625rem; } .cli-tool-card { padding: 0.625rem 0.5rem; border-radius: 0.5rem; background: hsl(var(--background)); text-align: center; border: 1.5px solid hsl(var(--border)); transition: all 0.2s ease; } .cli-tool-card.available { background: hsl(var(--background)); } .cli-tool-card.available:hover { box-shadow: 0 2px 8px hsl(var(--foreground) / 0.08); } /* Tool-specific border colors */ .cli-tool-card.tool-gemini.available { border-color: hsl(210 80% 55% / 0.5); } .cli-tool-card.tool-gemini.available:hover { border-color: hsl(210 80% 55% / 0.7); } .cli-tool-card.tool-qwen.available { border-color: hsl(280 70% 55% / 0.5); } .cli-tool-card.tool-qwen.available:hover { border-color: hsl(280 70% 55% / 0.7); } .cli-tool-card.tool-codex.available { border-color: hsl(142 71% 45% / 0.5); } .cli-tool-card.tool-codex.available:hover { border-color: hsl(142 71% 45% / 0.7); } .cli-tool-card.unavailable { border-color: hsl(var(--border)); opacity: 0.6; } .cli-tool-header { display: flex; align-items: center; justify-content: center; gap: 0.375rem; margin-bottom: 0.1875rem; } .cli-tool-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .cli-tool-status.status-available { background: hsl(var(--success)); box-shadow: 0 0 6px hsl(var(--success) / 0.5); } .cli-tool-status.status-unavailable { background: hsl(var(--muted-foreground) / 0.5); } .cli-tool-name { font-weight: 600; font-size: 0.8125rem; color: hsl(var(--foreground)); letter-spacing: -0.01em; } .cli-tool-badge { font-size: 0.5625rem; font-weight: 600; padding: 0.125rem 0.375rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.03em; } .cli-tool-info { font-size: 0.6875rem; margin-bottom: 0.3125rem; color: hsl(var(--muted-foreground)); } .cli-tool-info .text-success { color: hsl(var(--success)); font-weight: 500; } /* CLI Tool Description */ .cli-tool-desc { font-size: 0.625rem; color: hsl(var(--muted-foreground) / 0.8); line-height: 1.3; } /* CLI Tool Actions */ .cli-tool-actions { min-height: 1.75rem; } /* CodexLens specific styles */ .cli-tool-card.tool-codexlens.available { border-color: hsl(35 90% 50% / 0.5); } .cli-tool-card.tool-codexlens.available:hover { border-color: hsl(35 90% 50% / 0.7); } /* Semantic Search specific styles */ .cli-tool-card.tool-semantic.available { border-color: hsl(260 80% 60% / 0.5); } .cli-tool-card.tool-semantic.available:hover { border-color: hsl(260 80% 60% / 0.7); } /* Execute Panel */ .cli-execute-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid hsl(var(--border)); } .cli-execute-header h3 { font-size: 0.875rem; font-weight: 600; color: hsl(var(--foreground)); margin: 0; } .cli-execute-form { padding: 1rem; } .cli-execute-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; } .cli-form-group { display: flex; flex-direction: column; gap: 0.375rem; } .cli-form-group label { font-size: 0.75rem; font-weight: 500; color: hsl(var(--muted-foreground)); } .cli-select, .cli-textarea { padding: 0.5rem; border: 1px solid hsl(var(--border)); border-radius: 0.375rem; background: hsl(var(--background)); color: hsl(var(--foreground)); font-size: 0.875rem; } .cli-textarea { min-height: 80px; resize: vertical; font-family: monospace; } .cli-select:focus, .cli-textarea:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2); } .cli-execute-actions { display: flex; justify-content: flex-end; margin-top: 0.75rem; } /* History Panel */ .cli-history-header { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1rem; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.3); } .cli-history-header h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: hsl(var(--foreground)); margin: 0; letter-spacing: -0.01em; } .cli-history-header h3 i { color: hsl(var(--muted-foreground)); } .cli-history-controls { display: flex; align-items: center; gap: 0.5rem; } /* Search Input for History */ .cli-history-search { padding: 0.375rem 0.625rem; border: 1px solid hsl(var(--border)); border-radius: 0.375rem; background: hsl(var(--background)); color: hsl(var(--foreground)); font-size: 0.75rem; width: 160px; transition: all 0.2s ease; } .cli-history-search:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15); width: 200px; } .cli-history-search::placeholder { color: hsl(var(--muted-foreground) / 0.7); } .cli-tool-filter { padding: 0.375rem 0.625rem; border: 1px solid hsl(var(--border)); border-radius: 0.375rem; background: hsl(var(--background)); color: hsl(var(--foreground)); font-size: 0.75rem; cursor: pointer; transition: all 0.2s ease; } .cli-tool-filter:hover { border-color: hsl(var(--primary) / 0.5); } .cli-tool-filter:focus { outline: none; border-color: hsl(var(--primary)); } .cli-history-list { max-height: 450px; overflow-y: auto; } .cli-history-item { display: flex; align-items: flex-start; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid hsl(var(--border) / 0.5); cursor: pointer; transition: all 0.15s ease; } .cli-history-item:hover { background: hsl(var(--hover)); } .cli-history-item:hover .cli-history-actions { opacity: 1; } .cli-history-item:last-child { border-bottom: none; } .cli-history-item-content { flex: 1; min-width: 0; } .cli-history-item-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.375rem; } .cli-tool-tag { font-size: 0.5625rem; font-weight: 600; padding: 0.125rem 0.5rem; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.04em; } .cli-tool-gemini { background: hsl(210 80% 55% / 0.12); color: hsl(210 80% 45%); } .cli-tool-qwen { background: hsl(280 70% 55% / 0.12); color: hsl(280 70% 45%); } .cli-tool-codex { background: hsl(142 71% 45% / 0.12); color: hsl(142 71% 35%); } .cli-history-time { font-size: 0.6875rem; color: hsl(var(--muted-foreground)); } .cli-history-prompt { font-size: 0.8125rem; font-weight: 450; color: hsl(var(--foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.4; } .cli-history-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.6875rem; margin-top: 0.25rem; color: hsl(var(--muted-foreground)); } /* History Item Actions */ .cli-history-actions { display: flex; align-items: center; gap: 0.25rem; opacity: 0; transition: opacity 0.15s ease; margin-left: 0.5rem; } .cli-history-actions .btn-icon { padding: 0.25rem; color: hsl(var(--muted-foreground)); } .cli-history-actions .btn-icon:hover { color: hsl(var(--foreground)); background: hsl(var(--hover)); } .cli-history-actions .btn-icon.btn-danger:hover { color: hsl(var(--destructive)); background: hsl(var(--destructive) / 0.1); } /* Output Panel */ .cli-output-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid hsl(var(--border)); } .cli-output-header h3 { font-size: 0.875rem; font-weight: 600; color: hsl(var(--foreground)); margin: 0; } .cli-output-status { display: flex; align-items: center; gap: 0.5rem; } .status-indicator { width: 8px; height: 8px; border-radius: 50%; } .status-indicator.running { background: hsl(var(--warning)); animation: pulse 1.5s infinite; } .status-indicator.success { background: hsl(var(--success)); } .status-indicator.error { background: hsl(var(--destructive)); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .cli-output-content { padding: 1rem; background: hsl(var(--muted)); font-family: monospace; font-size: 0.75rem; color: hsl(var(--foreground)); max-height: 300px; overflow-y: auto; white-space: pre-wrap; word-wrap: break-word; margin: 0; } /* Detail Modal */ .cli-detail-header { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid hsl(var(--border)); } .cli-detail-info { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.625rem; flex-wrap: wrap; } .cli-detail-status { font-size: 0.6875rem; font-weight: 600; padding: 0.25rem 0.625rem; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.03em; } .cli-detail-status.status-success { background: hsl(var(--success) / 0.12); color: hsl(var(--success)); } .cli-detail-status.status-error { background: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); } .cli-detail-status.status-timeout { background: hsl(var(--warning) / 0.12); color: hsl(var(--warning)); } .cli-detail-meta { display: flex; gap: 1.25rem; font-size: 0.75rem; color: hsl(var(--muted-foreground)); flex-wrap: wrap; } .cli-detail-meta span { display: flex; align-items: center; gap: 0.375rem; } .cli-detail-section { margin-bottom: 1.25rem; } .cli-detail-section h4 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 0.625rem; text-transform: uppercase; letter-spacing: 0.03em; } .cli-detail-section h4 i { width: 14px; height: 14px; color: hsl(var(--muted-foreground)); } .cli-detail-prompt { padding: 1rem; background: hsl(var(--muted) / 0.5); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; font-size: 0.75rem; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; max-height: 200px; overflow-y: auto; color: hsl(var(--foreground)); } .cli-detail-output { padding: 1rem; background: hsl(var(--muted) / 0.5); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; font-size: 0.75rem; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; max-height: 350px; overflow-y: auto; color: hsl(var(--foreground)); } .cli-detail-error { padding: 1rem; background: hsl(var(--destructive) / 0.08); border: 1px solid hsl(var(--destructive) / 0.2); border-radius: 0.5rem; font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; font-size: 0.75rem; line-height: 1.6; color: hsl(var(--destructive)); white-space: pre-wrap; word-wrap: break-word; max-height: 180px; overflow-y: auto; } /* Detail Actions */ .cli-detail-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid hsl(var(--border)); } /* Button Styles */ .btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.15s ease; } .btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .btn-primary:hover:not(:disabled) { opacity: 0.9; } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-icon { padding: 0.375rem; background: transparent; border: none; color: hsl(var(--muted-foreground)); cursor: pointer; border-radius: 0.25rem; transition: all 0.15s ease; } .btn-icon:hover { background: hsl(var(--hover)); color: hsl(var(--foreground)); } .btn-sm { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.375rem 0.625rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.375rem; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground)); cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .btn-sm:hover { background: hsl(var(--hover)); border-color: hsl(var(--primary) / 0.3); } .btn-sm.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); } .btn-sm.btn-primary:hover { opacity: 0.9; } .btn-sm.btn-outline { background: transparent; border-color: hsl(var(--border)); } .btn-sm.btn-outline:hover { background: hsl(var(--hover)); } .btn-outline { background: transparent; border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); } .btn-outline:hover { background: hsl(var(--hover)); } .btn-outline.btn-danger { border-color: hsl(var(--destructive) / 0.3); color: hsl(var(--destructive)); } .btn-outline.btn-danger:hover { background: hsl(var(--destructive) / 0.1); border-color: hsl(var(--destructive) / 0.5); } /* Empty State */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; color: hsl(var(--muted-foreground)); } .empty-state svg { width: 2rem; height: 2rem; margin-bottom: 0.5rem; opacity: 0.5; } .empty-state p { font-size: 0.875rem; } /* ======================================== * CCW Installation Panel Styles * ======================================== */ /* CCW Header Actions */ .ccw-header-actions { display: flex; align-items: center; gap: 0.25rem; } /* CCW Install Content */ .ccw-install-content { padding: 0.5rem 0.625rem; } /* CCW Empty State */ .ccw-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; text-align: center; color: hsl(var(--muted-foreground)); } .ccw-empty-state i { opacity: 0.4; margin-bottom: 0.75rem; } .ccw-empty-state p { font-size: 0.8125rem; margin-bottom: 1rem; } /* ======================================== * CCW Carousel Styles * ======================================== */ .ccw-carousel-wrapper { position: relative; display: flex; align-items: center; gap: 0.5rem; } .ccw-carousel-track { display: flex; flex: 1; overflow: hidden; transition: transform 0.3s ease; } .ccw-carousel-card { flex: 0 0 100%; min-width: 0; padding: 0.625rem 0.75rem; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; transition: all 0.2s ease; } .ccw-carousel-card.active { border-color: hsl(var(--primary) / 0.4); box-shadow: 0 2px 8px hsl(var(--primary) / 0.1); } /* Carousel Card Header */ .ccw-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.375rem; } .ccw-card-header-right { display: flex; align-items: center; gap: 0.375rem; } .ccw-card-mode { display: flex; align-items: center; gap: 0.375rem; font-weight: 600; font-size: 0.8125rem; color: hsl(var(--foreground)); } .btn-icon-sm { padding: 0.25rem; } .ccw-card-mode.global { color: hsl(var(--primary)); } .ccw-card-mode.path { color: hsl(var(--warning)); } .ccw-version-tag { font-size: 0.625rem; font-weight: 600; padding: 0.25rem 0.5rem; background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); border-radius: 9999px; letter-spacing: 0.02em; } /* Carousel Card Path */ .ccw-card-path { font-size: 0.6875rem; color: hsl(var(--muted-foreground)); font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; background: hsl(var(--muted) / 0.5); padding: 0.3125rem 0.5rem; border-radius: 0.375rem; margin-bottom: 0.375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Carousel Card Meta */ .ccw-card-meta { display: flex; gap: 0.75rem; font-size: 0.625rem; color: hsl(var(--muted-foreground)); } .ccw-card-meta span { display: flex; align-items: center; gap: 0.25rem; } /* Carousel Card Actions - moved to header */ /* Carousel Navigation Buttons */ .ccw-carousel-btn { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 50%; color: hsl(var(--muted-foreground)); cursor: pointer; transition: all 0.15s ease; } .ccw-carousel-btn:hover { background: hsl(var(--hover)); color: hsl(var(--foreground)); border-color: hsl(var(--primary) / 0.3); } .ccw-carousel-btn:disabled { opacity: 0.3; cursor: not-allowed; } /* Carousel Dots */ .ccw-carousel-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; } .ccw-carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--muted-foreground) / 0.3); border: none; cursor: pointer; transition: all 0.2s ease; } .ccw-carousel-dot:hover { background: hsl(var(--muted-foreground) / 0.5); } .ccw-carousel-dot.active { background: hsl(var(--primary)); width: 20px; border-radius: 4px; } /* ======================================== * CCW Install Modal Styles * ======================================== */ .ccw-install-modal { padding: 0.5rem 0; } .ccw-install-options { display: flex; flex-direction: column; gap: 0.75rem; } .ccw-install-option { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: hsl(var(--muted) / 0.3); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; cursor: pointer; transition: all 0.15s ease; } .ccw-install-option:hover { background: hsl(var(--hover)); border-color: hsl(var(--primary) / 0.3); } .ccw-option-icon { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.5rem; flex-shrink: 0; } .ccw-option-icon.global { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); } .ccw-option-icon.path { background: hsl(var(--warning) / 0.1); color: hsl(var(--warning)); } .ccw-option-info { flex: 1; } .ccw-option-title { font-weight: 600; font-size: 0.875rem; color: hsl(var(--foreground)); margin-bottom: 0.25rem; } .ccw-option-desc { font-size: 0.75rem; color: hsl(var(--muted-foreground)); } /* Path Input Section */ .ccw-path-input-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid hsl(var(--border)); } .ccw-path-input-group { margin-bottom: 1rem; } .ccw-path-input-group label { display: block; font-size: 0.75rem; font-weight: 500; color: hsl(var(--muted-foreground)); margin-bottom: 0.5rem; } .ccw-path-input-group .cli-textarea { width: 100%; min-height: auto; padding: 0.625rem 0.75rem; font-size: 0.8125rem; } .ccw-install-action { display: flex; justify-content: flex-end; } /* Danger Button (icon style - subtle) */ .btn-icon.btn-danger { color: hsl(var(--muted-foreground)); background: transparent; } .btn-icon.btn-danger:hover { color: hsl(var(--destructive)); background: hsl(var(--destructive) / 0.1); } /* ======================================== * Generic Modal Styles * ======================================== */ .generic-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 0; transition: opacity 0.2s ease; } .generic-modal-overlay.active { opacity: 1; } .generic-modal { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.75rem; width: 90%; max-width: 600px; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgb(0 0 0 / 0.25); transform: scale(0.95); transition: transform 0.2s ease; } .generic-modal-overlay.active .generic-modal { transform: scale(1); } .generic-modal.large { max-width: 800px; } .generic-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.3); border-radius: 0.75rem 0.75rem 0 0; } .generic-modal-title { font-size: 0.9375rem; font-weight: 600; color: hsl(var(--foreground)); margin: 0; } .generic-modal-close { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; background: none; border: none; font-size: 1.25rem; color: hsl(var(--muted-foreground)); cursor: pointer; border-radius: 0.375rem; transition: all 0.15s ease; } .generic-modal-close:hover { background: hsl(var(--hover)); color: hsl(var(--foreground)); } .generic-modal-body { flex: 1; overflow-y: auto; padding: 1.25rem; } .generic-modal.lg { max-width: 640px; } /* ======================================== * Endpoint Tools Grid Styles * ======================================== */ .endpoint-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; padding: 0.75rem; } .endpoint-tool-card { display: flex; flex-direction: column; padding: 0.875rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; cursor: pointer; transition: all 0.2s ease; min-height: 100px; } .endpoint-tool-card:hover { background: hsl(var(--hover)); border-color: hsl(var(--indigo) / 0.5); box-shadow: 0 2px 8px hsl(var(--indigo) / 0.1); transform: translateY(-1px); } .endpoint-tool-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .endpoint-tool-dot { width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--indigo)); box-shadow: 0 0 6px hsl(var(--indigo) / 0.5); flex-shrink: 0; } .endpoint-tool-name { font-size: 0.75rem; font-weight: 600; color: hsl(var(--foreground)); font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .endpoint-tool-desc { font-size: 0.6875rem; color: hsl(var(--muted-foreground)); line-height: 1.4; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.5rem; } .endpoint-tool-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; } .endpoint-tool-params { display: flex; align-items: center; gap: 0.25rem; font-size: 0.625rem; color: hsl(var(--muted-foreground)); background: hsl(var(--muted) / 0.5); padding: 0.1875rem 0.375rem; border-radius: 0.25rem; } .endpoint-tool-required { font-size: 0.5625rem; color: hsl(var(--warning)); background: hsl(var(--warning) / 0.1); padding: 0.125rem 0.375rem; border-radius: 9999px; font-weight: 500; } /* ======================================== * Tool Detail Modal Styles * ======================================== */ .tool-detail-modal { padding: 0.5rem 0; } .tool-detail-header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid hsl(var(--border)); } .tool-detail-icon { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; background: hsl(var(--indigo) / 0.1); color: hsl(var(--indigo)); border-radius: 0.5rem; flex-shrink: 0; } .tool-detail-title h3 { font-size: 1rem; font-weight: 600; color: hsl(var(--foreground)); margin: 0 0 0.375rem 0; font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; } .tool-detail-badge { font-size: 0.625rem; font-weight: 500; padding: 0.1875rem 0.5rem; background: hsl(var(--indigo) / 0.1); color: hsl(var(--indigo)); border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.04em; } .tool-detail-desc { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); line-height: 1.6; margin-bottom: 1.25rem; } .tool-detail-params h4, .tool-detail-usage h4 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; color: hsl(var(--foreground)); margin: 0 0 0.75rem 0; text-transform: uppercase; letter-spacing: 0.03em; } .tool-detail-params h4 i, .tool-detail-usage h4 i { color: hsl(var(--muted-foreground)); } .tool-params-list { display: flex; flex-direction: column; gap: 0.75rem; max-height: 280px; overflow-y: auto; padding-right: 0.5rem; } .tool-param-item { padding: 0.75rem; background: hsl(var(--muted) / 0.3); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; } .tool-param-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.375rem; flex-wrap: wrap; } .tool-param-name { font-size: 0.8125rem; font-weight: 600; color: hsl(var(--foreground)); background: hsl(var(--muted)); padding: 0.125rem 0.375rem; border-radius: 0.25rem; } .tool-param-type { font-size: 0.625rem; color: hsl(var(--primary)); background: hsl(var(--primary) / 0.1); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; } .tool-param-required { font-size: 0.5625rem; font-weight: 600; color: hsl(var(--destructive)); background: hsl(var(--destructive) / 0.1); padding: 0.125rem 0.375rem; border-radius: 9999px; text-transform: uppercase; } .tool-param-optional { font-size: 0.5625rem; font-weight: 500; color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); padding: 0.125rem 0.375rem; border-radius: 9999px; } .tool-param-desc { font-size: 0.75rem; color: hsl(var(--muted-foreground)); line-height: 1.5; } .tool-param-default, .tool-param-enum { font-size: 0.6875rem; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; } .tool-param-default code, .tool-param-enum code { font-size: 0.6875rem; background: hsl(var(--muted)); padding: 0.125rem 0.375rem; border-radius: 0.25rem; color: hsl(var(--foreground)); } .tool-detail-no-params { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1.5rem; background: hsl(var(--muted) / 0.3); border: 1px dashed hsl(var(--border)); border-radius: 0.5rem; color: hsl(var(--muted-foreground)); font-size: 0.8125rem; } .tool-detail-usage { margin-top: 1.25rem; } .tool-usage-code { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; background: hsl(var(--muted) / 0.5); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; overflow-x: auto; } .tool-usage-code code { font-size: 0.75rem; font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; color: hsl(var(--foreground)); white-space: nowrap; flex: 1; } .tool-copy-btn { display: flex; align-items: center; justify-content: center; padding: 0.375rem; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 0.25rem; color: hsl(var(--muted-foreground)); cursor: pointer; transition: all 0.15s ease; flex-shrink: 0; } .tool-copy-btn:hover { background: hsl(var(--hover)); color: hsl(var(--foreground)); border-color: hsl(var(--primary) / 0.3); } /* ======================================== * Resume Session Styles * ======================================== */ /* Resume Badge */ .history-resume-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.1875rem 0.375rem; background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); border-radius: 0.25rem; font-size: 0.625rem; } /* Resume Item Highlight */ .history-item-resume { border-left: 3px solid hsl(var(--primary) / 0.5); } .history-item-resume:hover { border-left-color: hsl(var(--primary)); } /* History ID Display */ .history-id { font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace; font-size: 0.625rem; color: hsl(var(--muted-foreground) / 0.7); } /* Resume Button */ .btn-resume { color: hsl(var(--primary)); } .btn-resume:hover { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); } /* Resume Modal */ .resume-modal p { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin-bottom: 1rem; } .resume-prompt-input { width: 100%; padding: 0.75rem; border: 1px solid hsl(var(--border)); border-radius: 0.5rem; background: hsl(var(--background)); color: hsl(var(--foreground)); font-size: 0.875rem; font-family: inherit; resize: vertical; min-height: 80px; transition: all 0.2s ease; } .resume-prompt-input:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15); } .resume-prompt-input::placeholder { color: hsl(var(--muted-foreground) / 0.7); } .resume-modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid hsl(var(--border)); } /* ======================================== * Batch Delete & Multi-Select Styles * ======================================== */ /* Delete Dropdown */ .history-delete-dropdown { position: relative; display: inline-block; } .delete-dropdown-menu { display: none; position: absolute; top: 100%; right: 0; z-index: 50; min-width: 180px; padding: 0.375rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; box-shadow: 0 4px 16px hsl(var(--foreground) / 0.1); margin-top: 0.25rem; } .delete-dropdown-menu.show { display: block; } .delete-dropdown-menu button { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.625rem; border: none; background: transparent; color: hsl(var(--foreground)); font-size: 0.75rem; text-align: left; cursor: pointer; border-radius: 0.375rem; transition: all 0.15s ease; } .delete-dropdown-menu button:hover { background: hsl(var(--hover)); } .delete-dropdown-menu button i { color: hsl(var(--muted-foreground)); } .delete-dropdown-menu .delete-all-btn { color: hsl(var(--destructive)); } .delete-dropdown-menu .delete-all-btn i { color: hsl(var(--destructive)); } .delete-dropdown-menu .delete-all-btn:hover { background: hsl(var(--destructive) / 0.1); } .dropdown-divider { height: 1px; margin: 0.375rem 0; background: hsl(var(--border)); } /* Batch Actions Bar */ .history-batch-actions { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 1rem; background: hsl(var(--primary) / 0.08); border: 1px solid hsl(var(--primary) / 0.2); border-radius: 0.5rem; margin-bottom: 1rem; } .batch-select-count { font-size: 0.8125rem; font-weight: 600; color: hsl(var(--primary)); margin-right: auto; } .btn-danger { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); border-color: hsl(var(--destructive)); } .btn-danger:hover:not(:disabled) { opacity: 0.9; } .btn-danger:disabled { opacity: 0.5; cursor: not-allowed; } /* Override for icon-style danger buttons (subtle, not solid red) */ .btn-icon.btn-danger, .history-item-actions .btn-danger, .cli-history-actions .btn-danger { background: transparent; color: hsl(var(--muted-foreground)); border: none; } .btn-icon.btn-danger:hover, .history-item-actions .btn-danger:hover, .cli-history-actions .btn-danger:hover { background: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive)); opacity: 1; } /* Multi-Select Checkbox */ .history-checkbox-wrapper { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-right: 0.75rem; flex-shrink: 0; } .history-checkbox { width: 1.125rem; height: 1.125rem; cursor: pointer; accent-color: hsl(var(--primary)); } /* Selected Item State */ .history-item-selected { background: hsl(var(--primary) / 0.08) !important; border-color: hsl(var(--primary) / 0.3) !important; } /* Turn Badge for History List */ .history-turn-badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.625rem; font-weight: 600; padding: 0.1875rem 0.5rem; background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); border-radius: 9999px; } /* ======================================== * Multi-Turn Conversation Styles * ======================================== */ /* Turn Badge in History List */ .cli-turn-badge { font-size: 0.5625rem; font-weight: 600; padding: 0.125rem 0.5rem; background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.02em; } /* Turns Container in Detail Modal */ .cli-turns-container { max-height: 60vh; overflow-y: auto; } /* Turn Section */ .cli-turn-section { margin-bottom: 1rem; } .cli-turn-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; } .cli-turn-number { font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.625rem; background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); border-radius: 9999px; } .cli-turn-status { font-size: 0.625rem; font-weight: 600; padding: 0.1875rem 0.5rem; border-radius: 9999px; text-transform: uppercase; } .cli-turn-status.status-success { background: hsl(var(--success) / 0.12); color: hsl(var(--success)); } .cli-turn-status.status-error { background: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); } .cli-turn-status.status-timeout { background: hsl(var(--warning) / 0.12); color: hsl(var(--warning)); } .cli-turn-duration { font-size: 0.6875rem; color: hsl(var(--muted-foreground)); } /* Turn Divider (legacy) */ .cli-turn-divider { border: none; border-top: 1px dashed hsl(var(--border)); margin: 1.25rem 0; } /* Error Section (smaller in multi-turn) */ .cli-detail-error-section .cli-detail-error { max-height: 100px; } /* ======================================== * Enhanced Multi-Turn Display * ======================================== */ /* Turn Section */ .cli-turn-section { padding: 0.75rem; border-radius: 0.5rem; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); } .cli-turn-section.cli-turn-latest { border-color: hsl(var(--primary) / 0.3); background: hsl(var(--primary) / 0.03); } /* Turn Header */ .cli-turn-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid hsl(var(--border)); flex-wrap: wrap; gap: 0.5rem; } .cli-turn-marker { display: flex; align-items: center; gap: 0.5rem; } .cli-turn-number { font-size: 0.8125rem; font-weight: 600; color: hsl(var(--primary)); } .cli-turn-latest-badge { font-size: 0.5625rem; font-weight: 600; padding: 0.125rem 0.375rem; background: hsl(var(--success) / 0.12); color: hsl(var(--success)); border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.03em; } .cli-turn-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.6875rem; color: hsl(var(--muted-foreground)); } .cli-turn-meta span { display: flex; align-items: center; gap: 0.25rem; } .cli-turn-time i, .cli-turn-duration i { color: hsl(var(--muted-foreground) / 0.7); } /* Turn Body */ .cli-turn-body { display: flex; flex-direction: column; gap: 0.75rem; } /* Section Labels */ .cli-prompt-section h4 { color: hsl(var(--primary)); } .cli-prompt-section h4 i { color: hsl(var(--primary)); } .cli-output-section h4 { color: hsl(var(--success)); } .cli-output-section h4 i { color: hsl(var(--success)); } /* Turn Connector (visual line between turns) */ .cli-turn-connector { display: flex; justify-content: center; padding: 0.25rem 0; } .cli-turn-line { width: 2px; height: 1.5rem; background: linear-gradient( to bottom, hsl(var(--border)), hsl(var(--primary) / 0.3), hsl(var(--border)) ); border-radius: 1px; } /* Truncated Notice */ .cli-truncated-notice { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: hsl(var(--warning)); margin-top: 0.5rem; padding: 0.375rem 0.625rem; background: hsl(var(--warning) / 0.08); border-radius: 0.25rem; } .cli-truncated-notice i { flex-shrink: 0; } /* Turn Badge with Icon */ .cli-turn-badge { display: inline-flex; align-items: center; gap: 0.25rem; } .cli-turn-badge i { width: 12px; height: 12px; } /* ======================================== * Conversation View Toggle * ======================================== */ /* View Toggle Bar */ .cli-view-toggle { display: flex; gap: 0.5rem; margin-bottom: 1rem; padding: 0.5rem; background: hsl(var(--muted) / 0.3); border-radius: 0.5rem; } .cli-view-toggle .btn { flex: 1; justify-content: center; } .cli-view-toggle .btn.active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); } /* Concatenated Prompt Section */ .cli-concat-section { margin-top: 1rem; } .cli-concat-format-selector { display: flex; gap: 0.375rem; margin-bottom: 0.75rem; } .cli-concat-format-selector .btn-xs { padding: 0.25rem 0.625rem; font-size: 0.6875rem; } .cli-concat-output { max-height: 400px; overflow-y: auto; font-size: 0.75rem; white-space: pre-wrap; word-break: break-word; } /* Button Sizes */ .btn-xs { padding: 0.25rem 0.5rem; font-size: 0.6875rem; border-radius: 0.25rem; } /* ======================================== * CLI Settings Section * ======================================== */ .cli-settings-section { /* No card wrapper - just title and cards */ } .cli-settings-section .section-header { padding: 0 0 0.75rem 0; border-bottom: none; background: transparent; } .cli-settings-section .section-header h3 { font-size: 0.9375rem; } .cli-settings-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; } @media (max-width: 1200px) { .cli-settings-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .cli-settings-grid { grid-template-columns: 1fr; } } .cli-setting-item { padding: 0.75rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; display: flex; flex-direction: column; min-height: 90px; } .cli-setting-label { display: flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; font-weight: 600; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: 0.025em; margin-bottom: 0.5rem; } .cli-setting-label i { color: hsl(var(--primary)); width: 12px; height: 12px; } .cli-setting-control { margin-bottom: 0.5rem; flex-shrink: 0; } .cli-setting-select { width: 100%; padding: 0.4375rem 0.5rem; font-size: 0.8125rem; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 0.375rem; color: hsl(var(--foreground)); cursor: pointer; transition: all 0.15s ease; } .cli-setting-select:hover { border-color: hsl(var(--primary) / 0.5); } .cli-setting-select:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / 0.1); } .cli-setting-desc { font-size: 0.6875rem; color: hsl(var(--muted-foreground)); line-height: 1.3; margin-top: auto; } .cli-setting-value { font-size: 0.875rem; color: hsl(var(--foreground)); font-weight: 500; } /* Toggle Switch */ .cli-toggle { position: relative; display: inline-block; width: 36px; height: 20px; } .cli-toggle input { opacity: 0; width: 0; height: 0; } .cli-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: hsl(var(--muted)); transition: 0.3s; border-radius: 20px; } .cli-toggle-slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; } .cli-toggle input:checked + .cli-toggle-slider { background-color: hsl(var(--primary)); } .cli-toggle input:checked + .cli-toggle-slider:before { transform: translateX(16px); } .cli-toggle input:focus + .cli-toggle-slider { box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2); } /* Disabled state for settings */ .cli-setting-item.disabled { opacity: 0.5; pointer-events: none; } /* ======================================== * Native Session Styles * ======================================== */ /* Native badge in history list */ .cli-native-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.125rem 0.375rem; background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); border-radius: 0.25rem; font-size: 0.625rem; } .cli-history-item.has-native { border-left: 2px solid hsl(var(--primary) / 0.5); } /* Mode tag */ .cli-mode-tag { display: inline-flex; align-items: center; padding: 0.125rem 0.375rem; font-size: 0.625rem; font-weight: 500; color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); border-radius: 0.25rem; } /* Status badge */ .cli-status-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.375rem; font-size: 0.625rem; font-weight: 500; border-radius: 0.25rem; } .cli-status-badge.text-success { background: hsl(var(--success) / 0.1); color: hsl(var(--success)); } .cli-status-badge.text-warning { background: hsl(var(--warning) / 0.1); color: hsl(var(--warning)); } .cli-status-badge.text-destructive { background: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive)); } /* Native Session Detail Modal */ .native-session-detail { font-family: system-ui, -apple-system, sans-serif; } .native-session-header { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid hsl(var(--border)); } .native-session-info { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .native-model, .native-session-id { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: hsl(var(--muted-foreground)); } .native-session-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.6875rem; color: hsl(var(--muted-foreground)); } .native-session-meta span { display: inline-flex; align-items: center; gap: 0.25rem; } /* Tokens Summary */ .native-tokens-summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 1rem; background: hsl(var(--muted) / 0.5); border-radius: 0.5rem; font-size: 0.75rem; color: hsl(var(--foreground)); } /* Native Turns Container */ .native-turns-container { max-height: 60vh; overflow-y: auto; padding-right: 0.5rem; } /* Native Turn */ .native-turn { margin-bottom: 1rem; padding: 0.875rem; border-radius: 0.5rem; border: 1px solid hsl(var(--border)); } .native-turn.user { background: hsl(var(--muted) / 0.3); border-left: 3px solid hsl(var(--primary)); } .native-turn.assistant { background: hsl(var(--background)); border-left: 3px solid hsl(var(--success)); } .native-turn.latest { box-shadow: 0 0 0 1px hsl(var(--primary) / 0.3); } .native-turn-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.625rem; flex-wrap: wrap; } .native-turn-role { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; font-weight: 600; color: hsl(var(--foreground)); } .native-turn-number { font-size: 0.6875rem; color: hsl(var(--muted-foreground)); } .native-turn-tokens { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.625rem; color: hsl(var(--muted-foreground)); padding: 0.125rem 0.375rem; background: hsl(var(--muted)); border-radius: 0.25rem; } .native-turn-latest { font-size: 0.625rem; font-weight: 500; padding: 0.125rem 0.375rem; background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); border-radius: 0.25rem; } .native-turn-content pre { margin: 0; padding: 0.75rem; background: hsl(var(--muted)); border-radius: 0.375rem; font-family: monospace; font-size: 0.75rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; max-height: 300px; overflow-y: auto; } /* Thoughts Section */ .native-thoughts-section { margin-top: 0.75rem; padding: 0.625rem; background: hsl(var(--warning) / 0.05); border: 1px solid hsl(var(--warning) / 0.2); border-radius: 0.375rem; } .native-thoughts-section h5 { display: flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; font-weight: 600; color: hsl(var(--warning)); margin: 0 0 0.5rem 0; } .native-thoughts-list { margin: 0; padding-left: 1.25rem; font-size: 0.6875rem; color: hsl(var(--foreground)); } .native-thoughts-list li { margin-bottom: 0.25rem; } /* Tool Calls Section */ .native-tools-section { margin-top: 0.75rem; padding: 0.625rem; background: hsl(var(--muted) / 0.5); border: 1px solid hsl(var(--border)); border-radius: 0.375rem; } .native-tools-section h5 { display: flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; font-weight: 600; color: hsl(var(--muted-foreground)); margin: 0 0 0.5rem 0; } .native-tools-list { display: flex; flex-direction: column; gap: 0.5rem; } .native-tool-call { padding: 0.5rem; background: hsl(var(--background)); border-radius: 0.25rem; } .native-tool-name { display: inline-block; font-family: monospace; font-size: 0.6875rem; font-weight: 600; color: hsl(var(--primary)); margin-bottom: 0.25rem; } .native-tool-output { margin: 0.25rem 0 0 0; padding: 0.375rem; background: hsl(var(--muted)); border-radius: 0.25rem; font-family: monospace; font-size: 0.625rem; white-space: pre-wrap; word-wrap: break-word; max-height: 100px; overflow-y: auto; } /* Native Session Actions */ .native-session-actions { display: flex; gap: 0.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid hsl(var(--border)); flex-wrap: wrap; } /* ======================================== * Task Queue Sidebar - CLI Tab Styles * ======================================== */ /* Tab Navigation */ .task-queue-tabs { display: flex; gap: 0; border-bottom: 1px solid hsl(var(--border)); padding: 0 1rem; } .task-queue-tab { flex: 1; padding: 0.625rem 0.75rem; background: transparent; border: none; border-bottom: 2px solid transparent; color: hsl(var(--muted-foreground)); font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.375rem; } .task-queue-tab:hover { color: hsl(var(--foreground)); background: hsl(var(--muted) / 0.3); } .task-queue-tab.active { color: hsl(var(--primary)); border-bottom-color: hsl(var(--primary)); } .task-queue-tab .tab-badge { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); padding: 0.125rem 0.375rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; min-width: 1.25rem; text-align: center; } .task-queue-tab.active .tab-badge { background: hsl(var(--primary) / 0.15); color: hsl(var(--primary)); } /* CLI Filter Buttons */ .cli-filter-btn { padding: 0.375rem 0.625rem; background: transparent; border: 1px solid hsl(var(--border)); border-radius: 0.375rem; color: hsl(var(--muted-foreground)); font-size: 0.75rem; cursor: pointer; transition: all 0.15s; white-space: nowrap; } .cli-filter-btn:hover { background: hsl(var(--muted) / 0.5); color: hsl(var(--foreground)); } .cli-filter-btn.active { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } /* CLI Queue Item */ .cli-queue-item { padding: 0.75rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.5rem; margin-bottom: 0.5rem; cursor: pointer; transition: all 0.15s; } .cli-queue-item:hover { background: hsl(var(--muted) / 0.5); border-color: hsl(var(--primary) / 0.3); } .cli-queue-item.category-user { border-left: 3px solid #3b82f6; } .cli-queue-item.category-insight { border-left: 3px solid #a855f7; } .cli-queue-item.category-internal { border-left: 3px solid #22c55e; } .cli-queue-item-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.375rem; } .cli-queue-category-icon { font-size: 0.875rem; } .cli-queue-tool-tag { padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; } .cli-queue-tool-tag.cli-tool-gemini { background: hsl(210 100% 50% / 0.15); color: hsl(210 100% 45%); } .cli-queue-tool-tag.cli-tool-qwen { background: hsl(280 100% 50% / 0.15); color: hsl(280 100% 40%); } .cli-queue-tool-tag.cli-tool-codex { background: hsl(145 60% 45% / 0.15); color: hsl(145 60% 35%); } .cli-queue-status { font-size: 0.75rem; } .cli-queue-time { margin-left: auto; font-size: 0.6875rem; color: hsl(var(--muted-foreground)); } .cli-queue-prompt { font-size: 0.75rem; color: hsl(var(--foreground)); line-height: 1.4; margin-bottom: 0.375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cli-queue-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; color: hsl(var(--muted-foreground)); } .cli-queue-id { font-family: monospace; } .cli-queue-turns { background: hsl(var(--muted)); padding: 0.0625rem 0.25rem; border-radius: 0.25rem; } .cli-queue-native { font-size: 0.75rem; }