cc-viewer 0.1.1 → 0.1.2

package/lib/style.css

@@ -1,824 +0,0 @@
-* { margin: 0; padding: 0; box-sizing: border-box; }
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
-  background: #0a0a0a;
-  color: #e5e7eb;
-  height: 100vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-.header {
-  background: #111;
-  padding: 0 24px;
-  height: 60px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-shrink: 0;
-  border-bottom: 1px solid #1f1f1f;
-}
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-h1 {
-  color: #fff;
-  font-size: 18px;
-  font-weight: 600;
-}
-.status-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 12px;
-  background: #064e3b;
-  border: 1px solid #065f46;
-  border-radius: 12px;
-  font-size: 12px;
-  color: #6ee7b7;
-}
-.status-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: #10b981;
-  animation: pulse 2s infinite;
-}
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-.stat-badge {
-  padding: 6px 12px;
-  background: #1a1a1a;
-  border-radius: 6px;
-  font-size: 13px;
-  color: #9ca3af;
-  border: 1px solid #2a2a2a;
-}
-.stat-badge strong {
-  color: #fff;
-  margin-left: 4px;
-}
-button {
-  background: #1a1a1a;
-  color: #e5e7eb;
-  border: 1px solid #2a2a2a;
-  padding: 8px 16px;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 500;
-  transition: all 0.2s;
-}
-button:hover {
-  background: #2a2a2a;
-  border-color: #3a3a3a;
-}
-.main-container {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-  position: relative;
-}
-.left-panel {
-  width: 450px;
-  min-width: 250px;
-  max-width: 800px;
-  background: #111;
-  border-right: 1px solid #1f1f1f;
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-}
-.resizer {
-  width: 4px;
-  background: #1f1f1f;
-  cursor: col-resize;
-  flex-shrink: 0;
-  position: relative;
-  transition: background 0.2s;
-  z-index: 10;
-}
-.resizer:hover {
-  background: #3b82f6;
-}
-.resizer::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -3px;
-  right: -3px;
-  bottom: 0;
-}
-.panel-header {
-  padding: 16px 20px;
-  border-bottom: 1px solid #1f1f1f;
-  font-weight: 600;
-  font-size: 14px;
-  color: #fff;
-}
-.request-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 12px;
-}
-.request-item {
-  background: #1a1a1a;
-  border: 1px solid #2a2a2a;
-  border-radius: 6px;
-  padding: 14px 16px;
-  margin-bottom: 8px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-.request-item:hover {
-  border-color: #3b82f6;
-  background: #1f1f1f;
-}
-.request-item.active {
-  border-color: #3b82f6;
-  background: #1a2332;
-}
-.request-item-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-}
-.method {
-  display: inline-block;
-  padding: 4px 10px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 600;
-  background: #3b82f6;
-  color: white;
-  text-transform: uppercase;
-}
-.method.POST { background: #10b981; }
-.method.PUT { background: #f59e0b; }
-.method.DELETE { background: #ef4444; }
-
-.request-item.main-agent {
-  border-left: 3px solid #f59e0b;
-}
-
-.agent-badge {
-  display: inline-block;
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.agent-badge.main {
-  background: rgba(245, 158, 11, 0.15);
-  color: #f59e0b;
-  border: 1px solid rgba(245, 158, 11, 0.3);
-}
-
-.agent-badge.sub {
-  background: rgba(107, 114, 128, 0.15);
-  color: #6b7280;
-  border: 1px solid rgba(107, 114, 128, 0.2);
-}
-
-.timestamp {
-  font-size: 12px;
-  color: #6b7280;
-}
-.url-preview {
-  color: #60a5fa;
-  font-size: 13px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-family: 'Monaco', 'Consolas', monospace;
-}
-.request-meta {
-  display: flex;
-  gap: 12px;
-  margin-top: 8px;
-  font-size: 12px;
-  color: #6b7280;
-}
-.right-panel {
-  flex: 1;
-  background: #111;
-  border-left: 1px solid #1f1f1f;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  min-width: 0;
-}
-.detail-header {
-  padding: 20px 24px;
-  border-bottom: 1px solid #1f1f1f;
-}
-.detail-url {
-  color: #60a5fa;
-  font-size: 15px;
-  font-weight: 500;
-  word-break: break-all;
-  margin-bottom: 12px;
-  font-family: 'Monaco', 'Consolas', monospace;
-}
-.detail-meta {
-  display: flex;
-  gap: 20px;
-  font-size: 13px;
-  color: #9ca3af;
-  flex-wrap: wrap;
-}
-.detail-meta-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-.status-success { color: #10b981; font-weight: 600; }
-.status-error { color: #ef4444; font-weight: 600; }
-.tabs {
-  display: flex;
-  border-bottom: 1px solid #1f1f1f;
-  padding: 0 24px;
-  background: #0f0f0f;
-}
-.tab {
-  padding: 12px 20px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  color: #9ca3af;
-  border-bottom: 2px solid transparent;
-  transition: all 0.2s;
-  position: relative;
-  top: 1px;
-}
-.tab:hover {
-  color: #3b82f6;
-}
-.tab.active {
-  color: #3b82f6;
-  border-bottom-color: #3b82f6;
-}
-.tab-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 24px;
-}
-.tab-pane {
-  display: none;
-}
-.tab-pane.active {
-  display: block;
-}
-.info-section {
-  margin-bottom: 24px;
-}
-.info-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: #e5e7eb;
-  margin-bottom: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-.info-title.collapsible {
-  cursor: pointer;
-  user-select: none;
-  transition: color 0.2s;
-}
-.info-title.collapsible:hover {
-  color: #fff;
-}
-.info-table {
-  width: 100%;
-  border: 1px solid #2a2a2a;
-  border-radius: 6px;
-  overflow: hidden;
-  background: #1a1a1a;
-}
-.info-table tr {
-  border-bottom: 1px solid #2a2a2a;
-}
-.info-table tr:last-child {
-  border-bottom: none;
-}
-.info-table td {
-  padding: 12px 16px;
-  font-size: 13px;
-}
-.info-table td:first-child {
-  background: #0f0f0f;
-  font-weight: 500;
-  color: #9ca3af;
-  width: 180px;
-  font-family: 'Monaco', 'Consolas', monospace;
-}
-.info-table td:last-child {
-  color: #e5e7eb;
-  word-break: break-all;
-  font-family: 'Monaco', 'Consolas', monospace;
-}
-pre {
-  background: #0a0a0a;
-  padding: 16px;
-  border-radius: 6px;
-  overflow-x: auto;
-  font-size: 13px;
-  line-height: 1.6;
-  color: #e5e7eb;
-  font-family: 'Monaco', 'Consolas', monospace;
-  border: 1px solid #2a2a2a;
-}
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: #6b7280;
-  padding: 60px 20px;
-}
-.empty-state svg {
-  width: 64px;
-  height: 64px;
-  margin-bottom: 16px;
-  opacity: 0.3;
-  stroke: #6b7280;
-}
-.empty-detail {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: #6b7280;
-}
-.empty-detail svg {
-  width: 64px;
-  height: 64px;
-  margin-bottom: 16px;
-  opacity: 0.3;
-  stroke: #6b7280;
-}
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-::-webkit-scrollbar-track {
-  background: #0a0a0a;
-}
-::-webkit-scrollbar-thumb {
-  background: #2a2a2a;
-  border-radius: 4px;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: #3a3a3a;
-}
-
-/* JSON 渲染器样式 */
-.json-viewer {
-  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
-  font-size: 13px;
-  line-height: 1.6;
-  background: #0a0a0a;
-  padding: 16px;
-  border-radius: 6px;
-  border: 1px solid #2a2a2a;
-  overflow-x: auto;
-}
-
-.json-line {
-  margin: 2px 0;
-}
-
-.json-key {
-  color: #8b5cf6;
-  font-weight: 500;
-}
-
-.json-string {
-  color: #10b981;
-}
-
-.json-number {
-  color: #f59e0b;
-}
-
-.json-boolean {
-  color: #3b82f6;
-  font-weight: 600;
-}
-
-.json-null {
-  color: #6b7280;
-  font-style: italic;
-}
-
-.json-undefined {
-  color: #6b7280;
-  font-style: italic;
-}
-
-.json-bracket {
-  color: #9ca3af;
-  font-weight: bold;
-}
-
-.json-colon {
-  color: #6b7280;
-}
-
-.json-comma {
-  color: #6b7280;
-}
-
-.json-toggle {
-  display: inline-block;
-  width: 16px;
-  text-align: center;
-  transition: transform 0.2s;
-}
-
-.json-toggle:hover {
-  color: #fff !important;
-}
-
-.json-comment {
-  font-size: 11px;
-}
-
-/* @alenaksu/json-viewer 黑色主题 */
-json-viewer {
-  --outline-style: none;
-  --background-color: #000000;
-  --color: #e5e7eb;
-  --string-color: #a5d6ff;
-  --number-color: #79c0ff;
-  --boolean-color: #ff7b72;
-  --null-color: #8b949e;
-  --property-color: #d2a8ff;
-  --preview-color: #8b949e;
-  --font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-  --font-size: 13px;
-  --line-height: 1.5rem;
-  --indent-size: 0.75rem;
-}
-
-/* Body 标题栏 */
-.body-title-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.body-actions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-.body-action-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 8px;
-  background: #1a1a1a;
-  border: 1px solid #333;
-  border-radius: 4px;
-  color: #9ca3af;
-  font-size: 12px;
-  cursor: pointer;
-  transition: all 0.15s;
-  line-height: 1;
-}
-.body-action-btn:hover {
-  background: #252525;
-  color: #e5e7eb;
-  border-color: #444;
-}
-.body-action-btn.active {
-  background: #252525;
-  color: #60a5fa;
-  border-color: #3b82f6;
-}
-.body-action-btn svg {
-  flex-shrink: 0;
-}
-
-/* 纯文本预览 */
-.body-text-view {
-  background: #000;
-  color: #e5e7eb;
-  padding: 12px;
-  border-radius: 6px;
-  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-  font-size: 13px;
-  line-height: 1.5;
-  overflow: auto;
-  max-height: 600px;
-  white-space: pre-wrap;
-  word-break: break-all;
-  margin: 0;
-}
-
-/* Toast 提示 */
-#copy-toast {
-  position: fixed;
-  bottom: 40px;
-  left: 50%;
-  transform: translateX(-50%) translateY(20px);
-  background: #333;
-  color: #fff;
-  padding: 8px 20px;
-  border-radius: 6px;
-  font-size: 13px;
-  opacity: 0;
-  pointer-events: none;
-  transition: all 0.25s ease;
-  z-index: 9999;
-}
-#copy-toast.show {
-  opacity: 1;
-  transform: translateX(-50%) translateY(0);
-}
-
-/* ========== 对话模式 ========== */
-.chat-container {
-  flex: 1;
-  overflow-y: auto;
-  padding: 24px 0;
-  background: #0a0a0a;
-}
-.chat-messages {
-  max-width: 900px;
-  margin: 0 auto;
-  padding: 0 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-.chat-message {
-  display: flex;
-  gap: 12px;
-  max-width: 85%;
-}
-.chat-message.user {
-  align-self: flex-end;
-  flex-direction: row-reverse;
-}
-.chat-message.assistant,
-.chat-message.sub-agent {
-  align-self: flex-start;
-}
-.chat-avatar {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.chat-avatar.user-avatar {
-  background: #3b82f6;
-}
-.chat-avatar.agent-avatar {
-  background: #f59e0b;
-}
-.chat-avatar.sub-avatar {
-  background: #6b7280;
-}
-.chat-avatar svg {
-  width: 20px;
-  height: 20px;
-  fill: #fff;
-}
-.chat-bubble {
-  border-radius: 12px;
-  padding: 12px 16px;
-  font-size: 14px;
-  line-height: 1.6;
-  word-break: break-word;
-  min-width: 60px;
-}
-.chat-message.user .chat-bubble {
-  background: #1d4ed8;
-  color: #e5e7eb;
-  border-top-right-radius: 4px;
-  white-space: pre-wrap;
-}
-.chat-message.assistant .chat-bubble {
-  background: #1f1f1f;
-  color: #e5e7eb;
-  border: 1px solid #2a2a2a;
-  border-top-left-radius: 4px;
-}
-.chat-message.sub-agent .chat-bubble {
-  background: #1a1a1a;
-  color: #d1d5db;
-  border: 1px solid #374151;
-  border-left: 3px solid #6b7280;
-  border-top-left-radius: 4px;
-}
-.chat-role-label {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  margin-bottom: 4px;
-  color: #9ca3af;
-}
-.chat-message.user .chat-role-label {
-  text-align: right;
-  color: #93c5fd;
-}
-.chat-message.assistant .chat-role-label {
-  color: #fbbf24;
-}
-.chat-message.sub-agent .chat-role-label {
-  color: #9ca3af;
-}
-
-/* 可折叠思考块 */
-.chat-thinking {
-  margin-top: 8px;
-}
-.chat-thinking summary {
-  cursor: pointer;
-  font-size: 12px;
-  color: #9ca3af;
-  padding: 4px 0;
-  user-select: none;
-}
-.chat-thinking summary:hover {
-  color: #e5e7eb;
-}
-.chat-thinking-content {
-  margin-top: 8px;
-  padding: 10px 12px;
-  background: #111;
-  border-radius: 6px;
-  font-size: 13px;
-  color: #9ca3af;
-  line-height: 1.5;
-  white-space: pre-wrap;
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-/* 工具调用卡片 */
-.chat-tool-call {
-  margin-top: 8px;
-  padding: 10px 12px;
-  background: #111;
-  border: 1px solid #2a2a2a;
-  border-radius: 6px;
-  font-size: 13px;
-}
-.chat-tool-call .tool-name {
-  color: #a78bfa;
-  font-weight: 600;
-  font-family: 'SF Mono', Monaco, Consolas, monospace;
-}
-.chat-tool-call .tool-input {
-  margin-top: 6px;
-  color: #9ca3af;
-  font-size: 12px;
-  white-space: pre-wrap;
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-/* 工具结果 */
-.chat-tool-result {
-  margin-top: 8px;
-  padding: 10px 12px;
-  background: #0d1117;
-  border: 1px solid #21262d;
-  border-radius: 6px;
-  font-size: 13px;
-  max-height: 300px;
-  overflow-y: auto;
-}
-.chat-tool-result .tool-result-label {
-  font-size: 11px;
-  font-weight: 600;
-  color: #7ee787;
-  margin-bottom: 6px;
-}
-.chat-tool-result .tool-result-content {
-  color: #9ca3af;
-  font-size: 12px;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-/* 对话模式空状态 */
-.chat-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: #6b7280;
-  gap: 12px;
-}
-.chat-empty svg {
-  width: 48px;
-  height: 48px;
-  opacity: 0.3;
-}
-
-/* Markdown 内容样式 */
-.chat-md {
-  line-height: 1.6;
-}
-.chat-md p {
-  margin: 0 0 8px 0;
-}
-.chat-md p:last-child {
-  margin-bottom: 0;
-}
-.chat-md code {
-  background: #1e293b;
-  color: #e2e8f0;
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-family: 'SF Mono', Monaco, 'Cascadia Code', Consolas, monospace;
-  font-size: 0.88em;
-  border: 1px solid #334155;
-}
-.chat-md pre {
-  background: #0d1117;
-  border: 1px solid #1e293b;
-  border-radius: 8px;
-  padding: 14px 16px;
-  overflow-x: auto;
-  margin: 10px 0;
-}
-.chat-md pre code {
-  background: none;
-  border: none;
-  padding: 0;
-  font-size: 13px;
-  line-height: 1.6;
-  color: #c9d1d9;
-}
-.chat-md ul, .chat-md ol {
-  margin: 4px 0;
-  padding-left: 20px;
-}
-.chat-md li {
-  margin: 2px 0;
-}
-.chat-md h1, .chat-md h2, .chat-md h3, .chat-md h4 {
-  margin: 12px 0 6px 0;
-  color: #fff;
-}
-.chat-md h1 { font-size: 1.3em; }
-.chat-md h2 { font-size: 1.15em; }
-.chat-md h3 { font-size: 1.05em; }
-.chat-md blockquote {
-  border-left: 3px solid #3b82f6;
-  margin: 8px 0;
-  padding: 4px 12px;
-  color: #9ca3af;
-}
-.chat-md table {
-  border-collapse: collapse;
-  margin: 8px 0;
-  font-size: 13px;
-}
-.chat-md th, .chat-md td {
-  border: 1px solid #2a2a2a;
-  padding: 6px 10px;
-}
-.chat-md th {
-  background: #1a1a1a;
-  color: #fff;
-}
-.chat-md a {
-  color: #60a5fa;
-}
-.chat-md hr {
-  border: none;
-  border-top: 1px solid #2a2a2a;
-  margin: 12px 0;
-}
-.chat-md strong {
-  color: #f1f5f9;
-}
-.chat-md em {
-  color: #cbd5e1;
-}