File size: 2,315 Bytes
95d1c6b
dd465d5
 
 
95d1c6b
 
 
dd465d5
95d1c6b
 
 
dd465d5
95d1c6b
dd465d5
95d1c6b
 
 
3d7a688
dd465d5
3d7a688
dd465d5
 
95d1c6b
3d7a688
dd465d5
95d1c6b
 
 
dd465d5
95d1c6b
 
 
dd465d5
95d1c6b
 
dd465d5
 
3d7a688
95d1c6b
dd465d5
 
 
95d1c6b
dd465d5
 
 
95d1c6b
 
dd465d5
 
 
95d1c6b
 
 
dd465d5
 
95d1c6b
 
dd465d5
 
 
 
 
95d1c6b
 
 
 
dd465d5
95d1c6b
 
dd465d5
95d1c6b
 
dd465d5
 
 
95d1c6b
dd465d5
95d1c6b
 
 
 
dd465d5
 
95d1c6b
 
 
dd465d5
 
 
 
3d7a688
 
dd465d5
 
95d1c6b
dd465d5
95d1c6b
 
 
dd465d5
 
95d1c6b
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
.trace-container {
  background: var(--bg-2);
  border: 1px solid var(--border-0);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 380px;
}

.trace-container.empty {
  padding: 20px;
  text-align: center;
  border-style: dashed;
}

.trace-header {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  padding: 8px 12px;
  background: var(--bg-1);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border-bottom: 1px solid var(--border-0);
}

.trace-list {
  padding: 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trace-list::-webkit-scrollbar { width: 3px; }
.trace-list::-webkit-scrollbar-thumb { background: var(--border-1); border-radius: 2px; }

.trace-item {
  padding: 8px 10px;
  background: var(--bg-1);
  border-left: 2px solid var(--border-1);
  cursor: pointer;
  transition: all 0.2s ease;
  animation: trace-slide 0.25s ease;
  border-radius: 0 6px 6px 0;
}

@keyframes trace-slide {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.trace-item:hover {
  background: var(--bg-2);
  border-left-color: var(--pulse);
}

.trace-item.perception  { border-left-color: #d4a853; }
.trace-item.recall      { border-left-color: #4ecdc4; }
.trace-item.association { border-left-color: #a87ecf; }
.trace-item.synthesis   { border-left-color: #e07a38; }
.trace-item.reasoning   { border-left-color: #e07a38; }

.trace-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trace-icon { font-size: 0.85rem; }

.trace-message {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-1);
  flex-grow: 1;
  letter-spacing: 0.03em;
}

.trace-expand-hint {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--text-2);
}

.trace-data-glimpse {
  margin-top: 8px;
  padding: 10px;
  background: var(--bg-0);
  border: 1px solid var(--border-0);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-2);
  overflow-x: auto;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}