Hugging Face's logo

Spaces:
eaglelandsonce
/
simulationofresearchagent
Running

App Files Community
eaglelandsonce commited on
Commit
68e5a86
·
verified ·
1 Parent(s): b74c294

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +749 -17
index.html CHANGED
@@ -1,19 +1,751 @@
1
  <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
  <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>AI Research Multi-Agent System</title>
7
+ <style>
8
+ :root {
9
+ --bg: #07090f;
10
+ --panel: #0d1119;
11
+ --panel-2: #111722;
12
+ --line: #263044;
13
+ --line-soft: #192130;
14
+ --ink: #eef4ff;
15
+ --muted: #8996aa;
16
+ --blue: #4f9cff;
17
+ --cyan: #2de2e6;
18
+ --green: #4ade80;
19
+ --amber: #fbbf24;
20
+ --violet: #a78bfa;
21
+ --rose: #fb7185;
22
+ --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
23
+ --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
24
+ }
25
+
26
+ * { box-sizing: border-box; }
27
+ html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); }
28
+ body { min-height: 100vh; overflow: hidden; }
29
+ button, input, select { font: inherit; }
30
+ button { color: inherit; }
31
+
32
+ .app { height: 100vh; min-height: 680px; display: grid; grid-template-rows: 64px minmax(0, 1fr) 96px; }
33
+ .topbar {
34
+ display: grid; grid-template-columns: minmax(280px, 1fr) auto minmax(210px, 1fr);
35
+ align-items: center; gap: 24px; padding: 0 20px;
36
+ background: #0a0d14; border-bottom: 1px solid var(--line);
37
+ box-shadow: 0 8px 28px rgba(0,0,0,.25); z-index: 4;
38
+ }
39
+ .brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
40
+ .brand-mark { width: 36px; height: 36px; position: relative; display: grid; place-items: center; color: var(--cyan); }
41
+ .brand-mark::before, .brand-mark::after { content: ""; position: absolute; border: 1px solid currentColor; transform: rotate(45deg); }
42
+ .brand-mark::before { width: 27px; height: 27px; opacity: .65; }
43
+ .brand-mark::after { width: 16px; height: 16px; animation: markPulse 2.4s ease-in-out infinite; }
44
+ .brand-core { width: 5px; height: 5px; background: currentColor; box-shadow: 0 0 14px currentColor; }
45
+ @keyframes markPulse { 50% { transform: rotate(135deg) scale(.72); opacity: .35; } }
46
+ .brand-copy { min-width: 0; }
47
+ .eyebrow { color: var(--cyan); font: 700 9px/1 var(--mono); letter-spacing: 1.8px; text-transform: uppercase; }
48
+ h1 { font-size: 16px; line-height: 1.2; margin: 5px 0 0; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
49
+
50
+ .header-metrics { display: flex; align-items: stretch; height: 42px; }
51
+ .header-metric { min-width: 86px; padding: 3px 14px; text-align: center; border-left: 1px solid var(--line-soft); }
52
+ .header-metric:last-child { border-right: 1px solid var(--line-soft); }
53
+ .metric-value { color: var(--ink); font: 700 17px/1.2 var(--mono); }
54
+ .metric-value.cyan { color: var(--cyan); }
55
+ .metric-value.green { color: var(--green); }
56
+ .metric-value.amber { color: var(--amber); }
57
+ .metric-label { color: var(--muted); font: 600 8px/1.3 var(--mono); letter-spacing: 1px; text-transform: uppercase; }
58
+ .system-state { justify-self: end; text-align: right; }
59
+ .live-row { display: flex; justify-content: flex-end; align-items: center; gap: 7px; color: var(--green); font: 700 10px/1 var(--mono); letter-spacing: .8px; }
60
+ .live-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: livePulse 1.5s ease-in-out infinite; }
61
+ @keyframes livePulse { 50% { opacity: .35; transform: scale(.75); } }
62
+ #clock { margin-top: 6px; color: var(--muted); font: 10px/1 var(--mono); }
63
+
64
+ .workspace { display: grid; grid-template-columns: minmax(500px, 1.4fr) minmax(280px, .78fr) minmax(300px, .9fr); min-height: 0; }
65
+ .panel { min-width: 0; min-height: 0; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
66
+ .panel:last-child { border-right: 0; }
67
+ .panel-title { height: 39px; padding: 0 13px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; }
68
+ .panel-title h2 { margin: 0; color: #b9c5d7; font: 700 9px/1 var(--mono); letter-spacing: 1.45px; text-transform: uppercase; }
69
+ .panel-title h2::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 1px; background: var(--cyan); box-shadow: 0 0 8px rgba(45,226,230,.7); vertical-align: 1px; }
70
+ .tiny-badge { border: 1px solid var(--line); border-radius: 12px; padding: 3px 7px; color: var(--muted); font: 700 8px/1 var(--mono); letter-spacing: .7px; text-transform: uppercase; }
71
+
72
+ .supervisor-strip { margin: 10px 11px 0; min-height: 73px; border: 1px solid rgba(251,191,36,.55); background: #12140f; border-radius: 7px; display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 9px 11px; position: relative; overflow: hidden; }
73
+ .supervisor-strip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--amber); transform: scaleX(var(--supervisor-progress, 0)); transform-origin: left; transition: transform .2s linear; }
74
+ .supervisor-anim { width: 42px; height: 42px; position: relative; display: grid; place-items: center; }
75
+ .supervisor-anim span { position: absolute; border-radius: 50%; border: 1px solid var(--amber); }
76
+ .supervisor-anim span:nth-child(1) { inset: 2px; border-style: dashed; animation: orbit 5s linear infinite; }
77
+ .supervisor-anim span:nth-child(2) { inset: 8px; border-color: var(--violet); animation: orbit 2.8s linear reverse infinite; }
78
+ .supervisor-anim span:nth-child(3) { width: 7px; height: 7px; background: var(--amber); border: 0; box-shadow: 0 0 13px var(--amber); animation: coreBeat 1.1s ease-in-out infinite; }
79
+ @keyframes orbit { to { transform: rotate(360deg); } }
80
+ @keyframes coreBeat { 50% { transform: scale(.62); opacity: .55; } }
81
+ .supervisor-copy { min-width: 0; }
82
+ .supervisor-name { color: var(--amber); font-size: 12px; font-weight: 750; }
83
+ .supervisor-role { margin-top: 2px; color: var(--muted); font: 8px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .8px; }
84
+ #supervisorDecision { margin-top: 7px; color: #dbe4f1; font: 10px/1.2 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
85
+ #supervisorDecision::before { content: "> "; color: var(--amber); }
86
+ .phase-pill { color: var(--amber); border: 1px solid rgba(251,191,36,.55); background: rgba(251,191,36,.07); border-radius: 10px; padding: 4px 7px; font: 700 8px/1 var(--mono); letter-spacing: .8px; }
87
+
88
+ .topology { position: relative; flex: 1; min-height: 0; margin: 7px 8px 8px; border: 1px solid var(--line-soft); border-radius: 6px; overflow: hidden; background-color: #090d14; background-image: linear-gradient(rgba(79,156,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(79,156,255,.035) 1px, transparent 1px); background-size: 28px 28px; }
89
+ .topology::after { content: "SIMULATION MODE / LOCAL STATE"; position: absolute; right: 10px; bottom: 8px; color: #39465a; font: 8px/1 var(--mono); letter-spacing: .7px; }
90
+ #workflowSvg { width: 100%; height: 100%; display: block; }
91
+ .route { fill: none; stroke: #2c3950; stroke-width: 1.5; stroke-dasharray: 5 7; }
92
+ .route.return { opacity: .55; }
93
+ .route-active { stroke: var(--cyan); animation: routeFlow 1s linear infinite; filter: url(#softGlow); }
94
+ @keyframes routeFlow { to { stroke-dashoffset: -24; } }
95
+ .node .node-shell { fill: #0e1520; stroke: #344158; stroke-width: 1.5; transition: stroke .25s, fill .25s; }
96
+ .node .node-ring { fill: none; stroke: #344158; stroke-width: 1; stroke-dasharray: 2 5; opacity: .45; }
97
+ .node text { font-family: var(--mono); text-anchor: middle; }
98
+ .node .node-name { fill: #eef4ff; font-size: 11px; font-weight: 700; }
99
+ .node .node-sub { fill: #748197; font-size: 8px; }
100
+ .node .node-glyph { fill: #b8c5d7; font-size: 17px; font-weight: 700; }
101
+ .node.active .node-shell { stroke: var(--node-color); fill: #101824; filter: url(#softGlow); }
102
+ .node.active .node-ring { stroke: var(--node-color); opacity: .9; animation: nodeOrbit 4s linear infinite; transform-box: fill-box; transform-origin: center; }
103
+ .node.done .node-shell { stroke: var(--green); }
104
+ .node.done .node-glyph { fill: var(--green); }
105
+ @keyframes nodeOrbit { to { transform: rotate(360deg); } }
106
+ .supervisor-node .node-shell { stroke: var(--amber); }
107
+ .supervisor-node .node-ring { stroke: var(--amber); animation: nodeOrbit 5s linear infinite; transform-box: fill-box; transform-origin: center; }
108
+ .supervisor-node.active .node-shell { fill: #18170e; filter: url(#amberGlow); }
109
+ .paper-packet { opacity: 0; pointer-events: none; }
110
+ .paper-packet rect { fill: #ecf8ff; stroke: var(--cyan); stroke-width: .8; }
111
+ .paper-packet line { stroke: #387283; stroke-width: .6; }
112
+ .topology[data-phase="discovery"] .search-packet { opacity: 1; }
113
+ .topology[data-phase="evaluation"] .eval-packet { opacity: 1; }
114
+ .topology[data-phase="reporting"] .report-packet { opacity: 1; }
115
+ .pulse-wave { fill: none; stroke: var(--amber); stroke-width: 1.2; opacity: 0; transform-origin: center; animation: wave 1.8s ease-out infinite; }
116
+ .pulse-wave.delay { animation-delay: .8s; }
117
+ @keyframes wave { 0% { opacity: .65; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.35); } }
118
+ .source-chip { fill: #0e1520; stroke: #2f455b; }
119
+ .source-label { fill: var(--cyan); font: 700 9px var(--mono); text-anchor: middle; }
120
+ .source-sub { fill: #6f7d92; font: 7px var(--mono); text-anchor: middle; }
121
+
122
+ .agents-body { padding: 9px; overflow: auto; flex: 1; scrollbar-width: thin; scrollbar-color: #344158 transparent; }
123
+ .agent-card { border: 1px solid var(--line); border-radius: 6px; background: #0b1018; margin-bottom: 7px; padding: 10px; transition: border-color .25s, background .25s; }
124
+ .agent-card.active { border-color: var(--agent-color); background: #101722; box-shadow: inset 3px 0 0 var(--agent-color); }
125
+ .agent-card.done { border-color: rgba(74,222,128,.55); }
126
+ .agent-head { display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 8px; }
127
+ .agent-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 5px; border: 1px solid var(--agent-color); color: var(--agent-color); font: 800 10px var(--mono); background: color-mix(in srgb, var(--agent-color) 8%, transparent); }
128
+ .agent-name { font-size: 11px; font-weight: 750; }
129
+ .agent-spec { color: var(--muted); font: 8px/1.4 var(--mono); margin-top: 2px; }
130
+ .status-badge { color: var(--muted); border: 1px solid var(--line); border-radius: 10px; padding: 3px 6px; font: 700 7px/1 var(--mono); letter-spacing: .65px; text-transform: uppercase; }
131
+ .active .status-badge { color: var(--agent-color); border-color: var(--agent-color); animation: statusBlink 1.2s ease-in-out infinite; }
132
+ .done .status-badge { color: var(--green); border-color: rgba(74,222,128,.6); }
133
+ @keyframes statusBlink { 50% { opacity: .45; } }
134
+ .agent-task { min-height: 14px; margin: 9px 0 7px; color: #b7c2d2; font: 9px/1.5 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
135
+ .progress { height: 3px; overflow: hidden; border-radius: 2px; background: #171f2c; }
136
+ .progress-fill { height: 100%; width: 0; border-radius: inherit; background: var(--agent-color); transition: width .18s linear; box-shadow: 0 0 8px color-mix(in srgb, var(--agent-color) 70%, transparent); }
137
+ .framework-mini { margin: 2px 0 8px; padding: 10px; border: 1px solid var(--line-soft); border-radius: 6px; }
138
+ .framework-mini-title { display: flex; justify-content: space-between; color: #c5d0df; font: 700 8px/1 var(--mono); letter-spacing: .7px; text-transform: uppercase; }
139
+ .framework-mini-title span:last-child { color: var(--violet); }
140
+ .weight-strip { display: flex; gap: 2px; height: 5px; margin-top: 8px; }
141
+ .weight-strip span { background: var(--violet); opacity: calc(.35 + var(--o)); border-radius: 1px; }
142
+
143
+ .right-panel { overflow: hidden; }
144
+ .tabs { display: flex; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
145
+ .tab { flex: 1; padding: 9px 7px; border: 0; border-right: 1px solid var(--line); border-bottom: 2px solid transparent; background: #0b1018; color: var(--muted); cursor: pointer; font: 700 8px/1 var(--mono); letter-spacing: .7px; text-transform: uppercase; }
146
+ .tab:last-child { border-right: 0; }
147
+ .tab.active { color: var(--cyan); border-bottom-color: var(--cyan); background: #0f151f; }
148
+ .tab-view { display: none; flex: 1; min-height: 0; overflow: auto; }
149
+ .tab-view.active { display: flex; flex-direction: column; }
150
+ .ranking { padding: 8px; flex: 1; min-height: 0; overflow: auto; }
151
+ .empty-state { height: 100%; min-height: 190px; display: grid; place-items: center; text-align: center; color: var(--muted); padding: 24px; }
152
+ .empty-radar { width: 60px; height: 60px; margin: 0 auto 13px; border: 1px solid #314057; border-radius: 50%; position: relative; }
153
+ .empty-radar::before, .empty-radar::after { content: ""; position: absolute; inset: 10px; border: 1px solid #263348; border-radius: 50%; }
154
+ .empty-radar::after { inset: 27px; border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 12px rgba(45,226,230,.6); }
155
+ .empty-title { color: #c8d2df; font-size: 12px; font-weight: 700; }
156
+ .empty-copy { max-width: 230px; margin-top: 5px; font: 9px/1.55 var(--mono); }
157
+ .paper-card { border: 1px solid var(--line-soft); background: #0a0f17; border-radius: 5px; padding: 9px 9px 8px; margin-bottom: 6px; animation: resultIn .35s ease both; }
158
+ @keyframes resultIn { from { opacity: 0; transform: translateY(7px); } }
159
+ .paper-row { display: grid; grid-template-columns: 22px minmax(0,1fr) 42px; gap: 7px; align-items: start; }
160
+ .paper-rank { color: var(--muted); font: 800 9px/1 var(--mono); padding-top: 2px; }
161
+ .paper-title { color: #dfe7f2; font-size: 10px; line-height: 1.25; font-weight: 650; }
162
+ .paper-meta { color: var(--muted); font: 8px/1.4 var(--mono); margin-top: 4px; }
163
+ .paper-score { text-align: right; color: var(--score-color); font: 800 15px/1 var(--mono); }
164
+ .paper-score span { display: block; margin-top: 3px; color: var(--muted); font-size: 7px; }
165
+ .score-track { margin-top: 8px; height: 3px; background: #171f2b; border-radius: 2px; overflow: hidden; }
166
+ .score-fill { height: 100%; width: var(--score); background: var(--score-color); border-radius: inherit; }
167
+ .framework-view { padding: 9px; }
168
+ .framework-note { padding: 9px; border: 1px solid var(--line-soft); background: #0a0f17; border-radius: 5px; color: var(--muted); font: 9px/1.5 var(--mono); }
169
+ .criterion { margin-top: 8px; }
170
+ .criterion-row { display: flex; justify-content: space-between; gap: 10px; color: #c9d4e2; font: 9px/1.3 var(--mono); }
171
+ .criterion-row strong { color: var(--violet); }
172
+ .criterion-track { height: 3px; margin-top: 5px; background: #171f2b; }
173
+ .criterion-track span { display: block; height: 100%; background: var(--violet); }
174
+
175
+ .log-section { height: 174px; min-height: 120px; border-top: 1px solid var(--line); display: flex; flex-direction: column; flex: 0 0 auto; }
176
+ .log-head { height: 31px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; color: var(--muted); font: 700 8px/1 var(--mono); letter-spacing: .7px; text-transform: uppercase; border-bottom: 1px solid var(--line-soft); }
177
+ .log-head span:last-child { color: var(--green); }
178
+ #eventLog { overflow: auto; flex: 1; padding: 6px 9px; font: 8px/1.6 var(--mono); scrollbar-width: thin; scrollbar-color: #344158 transparent; }
179
+ .log-line { display: grid; grid-template-columns: 54px 46px minmax(0,1fr); gap: 5px; border-bottom: 1px solid rgba(255,255,255,.025); padding: 1px 0; animation: logIn .25s ease; }
180
+ @keyframes logIn { from { opacity: 0; } }
181
+ .log-time { color: #59677c; }
182
+ .log-type { color: var(--log-color); font-weight: 700; }
183
+ .log-msg { color: #aebaca; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
184
+
185
+ .control-dock { display: grid; grid-template-columns: minmax(280px, 1fr) 185px 230px 255px; gap: 12px; align-items: center; padding: 11px 16px; background: #0a0d14; border-top: 1px solid var(--line); box-shadow: 0 -10px 26px rgba(0,0,0,.28); z-index: 4; }
186
+ .field label { display: block; color: var(--muted); font: 700 8px/1 var(--mono); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 6px; }
187
+ .query-input { width: 100%; height: 36px; padding: 0 11px; border: 1px solid #344158; border-radius: 5px; background: #0d131d; color: var(--ink); outline: none; font: 10px var(--mono); }
188
+ .query-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(45,226,230,.09); }
189
+ .paper-control { display: grid; grid-template-columns: 1fr 33px; gap: 8px; align-items: center; }
190
+ input[type="range"] { width: 100%; accent-color: var(--cyan); }
191
+ #paperLimitValue { height: 27px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 4px; color: var(--cyan); font: 800 10px var(--mono); }
192
+ .speed-group { display: flex; height: 36px; }
193
+ .speed-button { flex: 1; border: 1px solid var(--line); border-right: 0; background: #0d131d; color: var(--muted); cursor: pointer; font: 700 9px var(--mono); }
194
+ .speed-button:first-child { border-radius: 5px 0 0 5px; }
195
+ .speed-button:last-child { border-right: 1px solid var(--line); border-radius: 0 5px 5px 0; }
196
+ .speed-button.active { background: rgba(167,139,250,.12); color: var(--violet); border-color: var(--violet); }
197
+ .actions { display: grid; grid-template-columns: 1fr 38px 38px; gap: 7px; align-items: end; }
198
+ .button { height: 36px; border: 1px solid var(--line); border-radius: 5px; background: #111824; cursor: pointer; font: 750 9px var(--mono); letter-spacing: .45px; transition: transform .15s, border-color .15s; }
199
+ .button:hover { transform: translateY(-1px); border-color: #53627a; }
200
+ .button.primary { background: var(--cyan); color: #041014; border-color: var(--cyan); }
201
+ .button.primary.running { background: var(--amber); border-color: var(--amber); }
202
+ .button:disabled { cursor: not-allowed; opacity: .35; transform: none; }
203
+ .icon-button { font-size: 15px; padding: 0; }
204
+ .download-button { position: absolute; right: 10px; top: 48px; z-index: 2; height: 28px; padding: 0 9px; border: 1px solid rgba(74,222,128,.55); border-radius: 4px; background: #0c1812; color: var(--green); cursor: pointer; font: 700 8px var(--mono); display: none; }
205
+ .download-button.visible { display: block; }
206
+ .screen-reader { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
207
+
208
+ @media (max-width: 1120px) {
209
+ body { overflow: auto; }
210
+ .app { height: auto; min-height: 100vh; grid-template-rows: auto auto auto; }
211
+ .topbar { min-height: 64px; grid-template-columns: 1fr auto; }
212
+ .header-metrics { display: none; }
213
+ .workspace { grid-template-columns: 1fr 340px; min-height: 760px; }
214
+ .right-panel { grid-column: 1 / -1; height: 480px; border-top: 1px solid var(--line); }
215
+ .control-dock { grid-template-columns: 1fr 160px 200px; }
216
+ .actions { grid-column: auto; }
217
+ .speed-field { display: none; }
218
+ }
219
+ @media (max-width: 760px) {
220
+ .topbar { grid-template-columns: 1fr; gap: 6px; padding: 12px 14px; }
221
+ .system-state { display: none; }
222
+ .workspace { display: block; }
223
+ .panel { border-right: 0; border-bottom: 1px solid var(--line); }
224
+ .workflow-panel { height: 680px; }
225
+ .agents-panel { height: 540px; }
226
+ .right-panel { height: 520px; }
227
+ .control-dock { grid-template-columns: 1fr 1fr; position: sticky; bottom: 0; }
228
+ .field:first-child { grid-column: 1 / -1; }
229
+ .actions { grid-column: 2; }
230
+ h1 { white-space: normal; }
231
+ }
232
+ </style>
233
+ </head>
234
+ <body>
235
+ <div class="app">
236
+ <header class="topbar">
237
+ <div class="brand">
238
+ <div class="brand-mark" aria-hidden="true"><div class="brand-core"></div></div>
239
+ <div class="brand-copy">
240
+ <div class="eyebrow">Research intelligence lab</div>
241
+ <h1>AI Research Multi-Agent System</h1>
242
+ </div>
243
+ </div>
244
+ <div class="header-metrics" aria-label="System metrics">
245
+ <div class="header-metric"><div class="metric-value cyan" id="papersFound">0</div><div class="metric-label">Discovered</div></div>
246
+ <div class="header-metric"><div class="metric-value" id="papersEvaluated">0</div><div class="metric-label">Evaluated</div></div>
247
+ <div class="header-metric"><div class="metric-value amber" id="avgScore">--</div><div class="metric-label">Avg AGI score</div></div>
248
+ <div class="header-metric"><div class="metric-value green" id="coverage">0%</div><div class="metric-label">Pipeline</div></div>
249
+ </div>
250
+ <div class="system-state">
251
+ <div class="live-row"><span class="live-dot"></span><span id="systemState">SYSTEM READY</span></div>
252
+ <div id="clock">--:--:-- ET</div>
253
+ </div>
254
+ </header>
255
+
256
+ <main class="workspace">
257
+ <section class="panel workflow-panel" aria-labelledby="workflowTitle">
258
+ <div class="panel-title"><h2 id="workflowTitle">LangGraph workflow topology</h2><span class="tiny-badge">StateGraph</span></div>
259
+ <div class="supervisor-strip" id="supervisorStrip">
260
+ <div class="supervisor-anim" aria-hidden="true"><span></span><span></span><span></span></div>
261
+ <div class="supervisor-copy">
262
+ <div class="supervisor-name">Supervisor Agent</div>
263
+ <div class="supervisor-role">Phase routing / state coordination / report control</div>
264
+ <div id="supervisorDecision">Awaiting research objective</div>
265
+ </div>
266
+ <div class="phase-pill" id="phasePill">IDLE</div>
267
+ </div>
268
+
269
+ <div class="topology" id="topology" data-phase="idle">
270
+ <svg id="workflowSvg" viewBox="0 0 720 500" role="img" aria-label="Animated multi-agent research workflow">
271
+ <defs>
272
+ <filter id="softGlow"><feGaussianBlur stdDeviation="2.2" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
273
+ <filter id="amberGlow"><feGaussianBlur stdDeviation="3.5" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
274
+ <path id="pathSupervisorPlanner" d="M360 190 C290 145 255 112 188 91"/>
275
+ <path id="pathPlannerSupervisor" d="M185 112 C250 147 290 172 333 194"/>
276
+ <path id="pathSupervisorDiscovery" d="M348 221 C331 274 330 313 345 350"/>
277
+ <path id="pathDiscoverySupervisor" d="M378 349 C394 295 394 260 375 222"/>
278
+ <path id="pathSupervisorEvaluation" d="M389 207 C450 238 508 283 551 347"/>
279
+ <path id="pathEvaluationSupervisor" d="M564 339 C516 278 468 234 390 197"/>
280
+ <path id="pathSupervisorReport" d="M392 181 C455 149 503 119 550 93"/>
281
+ <path id="pathArxivDiscovery" d="M130 382 C207 389 265 383 326 375"/>
282
+ </defs>
283
+
284
+ <path class="route" id="routeSupervisorPlanner" d="M360 190 C290 145 255 112 188 91"/>
285
+ <path class="route return" id="routePlannerSupervisor" d="M185 112 C250 147 290 172 333 194"/>
286
+ <path class="route" id="routeSupervisorDiscovery" d="M348 221 C331 274 330 313 345 350"/>
287
+ <path class="route return" id="routeDiscoverySupervisor" d="M378 349 C394 295 394 260 375 222"/>
288
+ <path class="route" id="routeSupervisorEvaluation" d="M389 207 C450 238 508 283 551 347"/>
289
+ <path class="route return" id="routeEvaluationSupervisor" d="M564 339 C516 278 468 234 390 197"/>
290
+ <path class="route" id="routeSupervisorReport" d="M392 181 C455 149 503 119 550 93"/>
291
+ <path class="route" id="routeArxivDiscovery" d="M130 382 C207 389 265 383 326 375"/>
292
+
293
+ <g transform="translate(130 382)">
294
+ <rect class="source-chip" x="-53" y="-23" width="106" height="46" rx="6"/>
295
+ <text class="source-label" y="-3">arXiv API</text>
296
+ <text class="source-sub" y="10">cs.AI / cs.LG / cs.CL</text>
297
+ </g>
298
+
299
+ <g class="node" id="node-planner" style="--node-color: var(--blue)" transform="translate(155 86)">
300
+ <circle class="node-ring" r="48"/><rect class="node-shell" x="-43" y="-34" width="86" height="68" rx="8"/>
301
+ <text class="node-glyph" y="-9">PL</text><text class="node-name" y="10">PLANNER</text><text class="node-sub" y="24">execution plan</text>
302
+ </g>
303
+ <g class="node supervisor-node active" id="node-supervisor" style="--node-color: var(--amber)" transform="translate(360 195)">
304
+ <circle class="pulse-wave" r="49"/><circle class="pulse-wave delay" r="49"/><circle class="node-ring" r="51"/>
305
+ <polygon class="node-shell" points="0,-43 37,-21 37,21 0,43 -37,21 -37,-21"/>
306
+ <text class="node-glyph" y="-9">SV</text><text class="node-name" y="10">SUPERVISOR</text><text class="node-sub" y="24">state router</text>
307
+ </g>
308
+ <g class="node" id="node-discovery" style="--node-color: var(--cyan)" transform="translate(360 378)">
309
+ <circle class="node-ring" r="48"/><rect class="node-shell" x="-45" y="-34" width="90" height="68" rx="8"/>
310
+ <text class="node-glyph" y="-9">DS</text><text class="node-name" y="10">DISCOVERY</text><text class="node-sub" y="24">paper search</text>
311
+ </g>
312
+ <g class="node" id="node-evaluation" style="--node-color: var(--violet)" transform="translate(585 378)">
313
+ <circle class="node-ring" r="48"/><rect class="node-shell" x="-46" y="-34" width="92" height="68" rx="8"/>
314
+ <text class="node-glyph" y="-9">EV</text><text class="node-name" y="10">EVALUATION</text><text class="node-sub" y="24">10 AGI criteria</text>
315
+ </g>
316
+ <g class="node" id="node-report" style="--node-color: var(--green)" transform="translate(585 86)">
317
+ <circle class="node-ring" r="48"/><rect class="node-shell" x="-45" y="-34" width="90" height="68" rx="8"/>
318
+ <text class="node-glyph" y="-9">RP</text><text class="node-name" y="10">REPORT</text><text class="node-sub" y="24">ranked findings</text>
319
+ </g>
320
+
321
+ <g class="paper-packet search-packet">
322
+ <rect x="-6" y="-8" width="12" height="16" rx="1"/><line x1="-3" y1="-3" x2="3" y2="-3"/><line x1="-3" y1="1" x2="3" y2="1"/>
323
+ <animateMotion dur="2.7s" repeatCount="indefinite"><mpath href="#pathArxivDiscovery"/></animateMotion>
324
+ </g>
325
+ <g class="paper-packet search-packet">
326
+ <rect x="-6" y="-8" width="12" height="16" rx="1"/><line x1="-3" y1="-3" x2="3" y2="-3"/><line x1="-3" y1="1" x2="3" y2="1"/>
327
+ <animateMotion dur="2.7s" begin=".9s" repeatCount="indefinite"><mpath href="#pathArxivDiscovery"/></animateMotion>
328
+ </g>
329
+ <g class="paper-packet eval-packet">
330
+ <rect x="-6" y="-8" width="12" height="16" rx="1"/><line x1="-3" y1="-3" x2="3" y2="-3"/><line x1="-3" y1="1" x2="3" y2="1"/>
331
+ <animateMotion dur="2.4s" repeatCount="indefinite" path="M390 378 C455 378 505 378 538 378"/>
332
+ </g>
333
+ <g class="paper-packet eval-packet">
334
+ <rect x="-6" y="-8" width="12" height="16" rx="1"/><line x1="-3" y1="-3" x2="3" y2="-3"/><line x1="-3" y1="1" x2="3" y2="1"/>
335
+ <animateMotion dur="2.4s" begin=".8s" repeatCount="indefinite" path="M390 378 C455 378 505 378 538 378"/>
336
+ </g>
337
+ <g class="paper-packet report-packet">
338
+ <rect x="-6" y="-8" width="12" height="16" rx="1"/><line x1="-3" y1="-3" x2="3" y2="-3"/><line x1="-3" y1="1" x2="3" y2="1"/>
339
+ <animateMotion dur="2s" repeatCount="indefinite"><mpath href="#pathSupervisorReport"/></animateMotion>
340
+ </g>
341
+ </svg>
342
+ </div>
343
+ </section>
344
+
345
+ <section class="panel agents-panel" aria-labelledby="agentsTitle">
346
+ <div class="panel-title"><h2 id="agentsTitle">Agent operations</h2><span class="tiny-badge" id="activeCount">0 active</span></div>
347
+ <div class="agents-body">
348
+ <div class="agent-card" id="card-planner" style="--agent-color: var(--blue)">
349
+ <div class="agent-head"><div class="agent-icon">PL</div><div><div class="agent-name">Planner Agent</div><div class="agent-spec">GPT-4o mini / structured JSON</div></div><span class="status-badge">Idle</span></div>
350
+ <div class="agent-task">Waiting for a research objective</div><div class="progress"><div class="progress-fill"></div></div>
351
+ </div>
352
+ <div class="agent-card" id="card-discovery" style="--agent-color: var(--cyan)">
353
+ <div class="agent-head"><div class="agent-icon">DS</div><div><div class="agent-name">Discovery Agent</div><div class="agent-spec">arXiv 2.3.1 / validation tools</div></div><span class="status-badge">Idle</span></div>
354
+ <div class="agent-task">Standing by for execution plan</div><div class="progress"><div class="progress-fill"></div></div>
355
+ </div>
356
+ <div class="agent-card" id="card-evaluation" style="--agent-color: var(--violet)">
357
+ <div class="agent-head"><div class="agent-icon">EV</div><div><div class="agent-name">Evaluation Agent</div><div class="agent-spec">Weighted AGI scoring / JSON repair</div></div><span class="status-badge">Idle</span></div>
358
+ <div class="agent-task">Waiting for validated papers</div><div class="progress"><div class="progress-fill"></div></div>
359
+ </div>
360
+ <div class="agent-card" id="card-report" style="--agent-color: var(--green)">
361
+ <div class="agent-head"><div class="agent-icon">RP</div><div><div class="agent-name">Report Generator</div><div class="agent-spec">Executive synthesis / recommendations</div></div><span class="status-badge">Idle</span></div>
362
+ <div class="agent-task">Waiting for evaluation results</div><div class="progress"><div class="progress-fill"></div></div>
363
+ </div>
364
+ <div class="framework-mini">
365
+ <div class="framework-mini-title"><span>AGI evaluation framework</span><span>10 dimensions</span></div>
366
+ <div class="weight-strip" title="Weights from the notebook">
367
+ <span style="width:15%;--o:.9"></span><span style="width:15%;--o:.8"></span><span style="width:15%;--o:.7"></span><span style="width:12%;--o:.6"></span><span style="width:10%;--o:.5"></span><span style="width:10%;--o:.45"></span><span style="width:8%;--o:.4"></span><span style="width:8%;--o:.35"></span><span style="width:4%;--o:.3"></span><span style="width:3%;--o:.25"></span>
368
+ </div>
369
+ </div>
370
+ </div>
371
+ </section>
372
+
373
+ <section class="panel right-panel" aria-labelledby="intelligenceTitle">
374
+ <div class="panel-title"><h2 id="intelligenceTitle">Research intelligence</h2><span class="tiny-badge" id="requestId">No request</span></div>
375
+ <button class="download-button" id="downloadReport" type="button">Download report</button>
376
+ <div class="tabs" role="tablist">
377
+ <button class="tab active" type="button" role="tab" aria-selected="true" data-tab="results">Ranked papers</button>
378
+ <button class="tab" type="button" role="tab" aria-selected="false" data-tab="framework">Scoring framework</button>
379
+ </div>
380
+ <div class="tab-view active" id="view-results" role="tabpanel">
381
+ <div class="ranking" id="ranking">
382
+ <div class="empty-state"><div><div class="empty-radar"></div><div class="empty-title">Research queue ready</div><div class="empty-copy">Run the workflow to discover, validate, score, and rank simulated AGI papers.</div></div></div>
383
+ </div>
384
+ </div>
385
+ <div class="tab-view framework-view" id="view-framework" role="tabpanel"></div>
386
+ <div class="log-section">
387
+ <div class="log-head"><span>Supervisor event stream</span><span id="logState">listening</span></div>
388
+ <div id="eventLog" aria-live="polite"></div>
389
+ </div>
390
+ </section>
391
+ </main>
392
+
393
+ <footer class="control-dock">
394
+ <div class="field">
395
+ <label for="queryInput">Research objective</label>
396
+ <input class="query-input" id="queryInput" value="Find AGI papers from Jan 1st 2026 to Jan 31st 2026" autocomplete="off">
397
+ </div>
398
+ <div class="field">
399
+ <label for="paperLimit">Maximum papers</label>
400
+ <div class="paper-control"><input id="paperLimit" type="range" min="5" max="15" value="10"><output id="paperLimitValue" for="paperLimit">10</output></div>
401
+ </div>
402
+ <div class="field speed-field">
403
+ <label>Simulation speed</label>
404
+ <div class="speed-group" aria-label="Simulation speed">
405
+ <button class="speed-button" type="button" data-speed="0.75">0.75x</button><button class="speed-button active" type="button" data-speed="1">1x</button><button class="speed-button" type="button" data-speed="2">2x</button>
406
+ </div>
407
+ </div>
408
+ <div class="field">
409
+ <label>Pipeline control</label>
410
+ <div class="actions">
411
+ <button class="button primary" id="runButton" type="button">Run research</button>
412
+ <button class="button icon-button" id="pauseButton" type="button" title="Pause simulation" aria-label="Pause simulation" disabled>II</button>
413
+ <button class="button icon-button" id="resetButton" type="button" title="Reset simulation" aria-label="Reset simulation">R</button>
414
+ </div>
415
+ </div>
416
+ </footer>
417
+ </div>
418
+
419
+ <script>
420
+ const CRITERIA = [
421
+ ["Novel Problem Solving", 15], ["Few-Shot Learning", 15], ["Task Transfer", 15],
422
+ ["Abstract Reasoning", 12], ["Contextual Adaptation", 10], ["Multi-Rule Integration", 10],
423
+ ["Generalization Efficiency", 8], ["Meta-Learning", 8], ["World Modeling", 4],
424
+ ["Autonomous Goal Setting", 3]
425
+ ];
426
+
427
+ const PAPER_LIBRARY = [
428
+ ["Adaptive World Models for Long-Horizon Generalization", "I. Chen, M. Alvarez", 82],
429
+ ["Compositional Transfer Across Unseen Task Families", "S. Rao, J. Kim", 76],
430
+ ["Learning Abstract Rules from Sparse Demonstrations", "L. Okafor, P. Singh", 72],
431
+ ["Self-Refining Memory for Continual Agent Learning", "E. Brooks, N. Patel", 68],
432
+ ["Multi-Modal Planning with Uncertain World States", "A. Laurent, R. Davis", 64],
433
+ ["Efficient Meta-Learning Through Latent Skill Graphs", "T. Wang, C. Foster", 59],
434
+ ["Context-Aware Tool Selection in Language Agents", "M. Hassan, Y. Ito", 55],
435
+ ["Benchmarking Cross-Domain Reasoning Under Shift", "V. Novak, D. Green", 49],
436
+ ["Few-Shot Policy Adaptation for Embodied Systems", "K. Mensah, F. Ruiz", 45],
437
+ ["Structured Retrieval for Scientific Question Answering", "B. Carter, Z. Li", 39],
438
+ ["Improving Long-Context Classification with Routing", "H. Park, S. Bell", 35],
439
+ ["Domain-Specific Agents for Automated Data Labeling", "R. Evans, G. Moore", 31],
440
+ ["Compact Representation Learning for Edge Inference", "N. Shah, D. Klein", 28],
441
+ ["Synthetic Preference Optimization for Dialogue", "J. Wilson, A. Nair", 25],
442
+ ["A Taxonomy of Modular AI Evaluation Protocols", "C. Young, P. Martin", 22]
443
+ ];
444
+
445
+ const PHASES = {
446
+ idle: { label: "IDLE", progress: 0 }, initialization: { label: "INITIALIZE", progress: 6 },
447
+ planning: { label: "PLANNING", progress: 22 }, discovery: { label: "DISCOVERY", progress: 47 },
448
+ evaluation: { label: "EVALUATION", progress: 76 }, reporting: { label: "REPORTING", progress: 92 },
449
+ complete: { label: "COMPLETE", progress: 100 }
450
+ };
451
+
452
+ const state = {
453
+ phase: "idle", running: false, paused: false, speed: 1, phaseElapsed: 0,
454
+ lastTick: performance.now(), papersFound: 0, evaluated: 0, results: [],
455
+ limit: 10, requestId: "", report: "", phaseLogged: false
456
+ };
457
+
458
+ const el = id => document.getElementById(id);
459
+ const topology = el("topology");
460
+ const runButton = el("runButton");
461
+ const pauseButton = el("pauseButton");
462
+ const ranking = el("ranking");
463
+
464
+ function formatTime() {
465
+ return new Intl.DateTimeFormat("en-US", { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false, timeZone: "America/New_York" }).format(new Date()) + " ET";
466
+ }
467
+
468
+ function addLog(type, message, color = "var(--cyan)") {
469
+ const row = document.createElement("div");
470
+ row.className = "log-line";
471
+ row.style.setProperty("--log-color", color);
472
+ row.innerHTML = `<span class="log-time">${formatTime().slice(0,8)}</span><span class="log-type">${type}</span><span class="log-msg"></span>`;
473
+ row.querySelector(".log-msg").textContent = message;
474
+ el("eventLog").prepend(row);
475
+ while (el("eventLog").children.length > 28) el("eventLog").lastChild.remove();
476
+ }
477
+
478
+ function setPhase(phase) {
479
+ state.phase = phase;
480
+ state.phaseElapsed = 0;
481
+ state.phaseLogged = false;
482
+ topology.dataset.phase = phase;
483
+ el("phasePill").textContent = PHASES[phase].label;
484
+ el("coverage").textContent = PHASES[phase].progress + "%";
485
+ el("supervisorStrip").style.setProperty("--supervisor-progress", PHASES[phase].progress / 100);
486
+ updateTopology();
487
+ updateCards();
488
+ }
489
+
490
+ function updateTopology() {
491
+ const activeMap = { planning: "planner", discovery: "discovery", evaluation: "evaluation", reporting: "report" };
492
+ const doneByPhase = {
493
+ idle: [], initialization: [], planning: [], discovery: ["planner"],
494
+ evaluation: ["planner", "discovery"], reporting: ["planner", "discovery", "evaluation"],
495
+ complete: ["planner", "discovery", "evaluation", "report"]
496
+ };
497
+ ["planner", "discovery", "evaluation", "report"].forEach(name => {
498
+ const node = el("node-" + name);
499
+ node.classList.toggle("active", activeMap[state.phase] === name);
500
+ node.classList.toggle("done", doneByPhase[state.phase].includes(name));
501
+ });
502
+ el("node-supervisor").classList.toggle("active", state.phase !== "idle" && state.phase !== "complete");
503
+ document.querySelectorAll(".route").forEach(route => route.classList.remove("route-active"));
504
+ const routes = {
505
+ planning: ["routeSupervisorPlanner", "routePlannerSupervisor"],
506
+ discovery: ["routeSupervisorDiscovery", "routeArxivDiscovery", "routeDiscoverySupervisor"],
507
+ evaluation: ["routeSupervisorEvaluation", "routeEvaluationSupervisor"],
508
+ reporting: ["routeSupervisorReport"]
509
+ };
510
+ (routes[state.phase] || []).forEach(id => el(id).classList.add("route-active"));
511
+ }
512
+
513
+ function cardState(name, mode, task, progress) {
514
+ const card = el("card-" + name);
515
+ card.classList.remove("active", "done");
516
+ if (mode !== "idle") card.classList.add(mode);
517
+ card.querySelector(".status-badge").textContent = mode === "active" ? "Working" : mode === "done" ? "Done" : "Idle";
518
+ card.querySelector(".agent-task").textContent = task;
519
+ card.querySelector(".progress-fill").style.width = Math.max(0, Math.min(100, progress)) + "%";
520
+ }
521
+
522
+ function updateCards() {
523
+ const p = state.phaseElapsed;
524
+ const defaults = {
525
+ planner: ["idle", "Waiting for a research objective", 0],
526
+ discovery: ["idle", "Standing by for execution plan", 0],
527
+ evaluation: ["idle", "Waiting for validated papers", 0],
528
+ report: ["idle", "Waiting for evaluation results", 0]
529
+ };
530
+ const order = ["planner", "discovery", "evaluation", "report"];
531
+ const completed = {
532
+ discovery: ["planner"], evaluation: ["planner", "discovery"],
533
+ reporting: ["planner", "discovery", "evaluation"], complete: order
534
+ }[state.phase] || [];
535
+ completed.forEach(name => defaults[name] = ["done", name === "report" ? "Executive report generated" : "State returned to Supervisor", 100]);
536
+
537
+ if (state.phase === "planning") defaults.planner = ["active", p < 1300 ? "Parsing objective and temporal constraints" : "Building keywords, categories, and success criteria", p / 32];
538
+ if (state.phase === "discovery") defaults.discovery = ["active", state.papersFound < state.limit ? `Searching arXiv and validating metadata (${state.papersFound}/${state.limit})` : "Deduplicating and finalizing paper set", Math.min(100, p / 60)];
539
+ if (state.phase === "evaluation") defaults.evaluation = ["active", `Scoring paper ${Math.min(state.evaluated + 1, state.limit)} of ${state.limit} across 10 AGI dimensions`, state.limit ? state.evaluated / state.limit * 100 : 0];
540
+ if (state.phase === "reporting") defaults.report = ["active", p < 1500 ? "Ranking findings and computing distribution" : "Writing executive insights and recommendations", p / 28];
541
+
542
+ order.forEach(name => cardState(name, ...defaults[name]));
543
+ el("activeCount").textContent = ["planning", "discovery", "evaluation", "reporting"].includes(state.phase) ? "1 active" : "0 active";
544
+ }
545
+
546
+ function supervisorDecision(text) { el("supervisorDecision").textContent = text; }
547
+
548
+ function scoreColor(score) {
549
+ if (score >= 70) return "var(--green)";
550
+ if (score >= 40) return "var(--amber)";
551
+ return "var(--rose)";
552
+ }
553
+
554
+ function renderRanking() {
555
+ if (!state.results.length) return;
556
+ ranking.innerHTML = "";
557
+ [...state.results].sort((a,b) => b.score - a.score).forEach((paper, index) => {
558
+ const card = document.createElement("article");
559
+ card.className = "paper-card";
560
+ card.style.setProperty("--score", paper.score + "%");
561
+ card.style.setProperty("--score-color", scoreColor(paper.score));
562
+ card.innerHTML = `<div class="paper-row"><div class="paper-rank">#${String(index + 1).padStart(2, "0")}</div><div><div class="paper-title"></div><div class="paper-meta"></div></div><div class="paper-score">${paper.score}<span>/100</span></div></div><div class="score-track"><div class="score-fill"></div></div>`;
563
+ card.querySelector(".paper-title").textContent = paper.title;
564
+ card.querySelector(".paper-meta").textContent = paper.authors + " / arXiv / " + (paper.score >= 70 ? "High" : paper.score >= 40 ? "Medium" : "Low");
565
+ ranking.appendChild(card);
566
+ });
567
+ }
568
+
569
+ function renderFramework() {
570
+ const view = el("view-framework");
571
+ view.innerHTML = `<div class="framework-note">Each abstract is evaluated with a strict JSON-only prompt. Weighted scores are converted to a 0-100 AGI potential score. The data shown in this browser experience is simulated.</div>`;
572
+ CRITERIA.forEach(([name, weight]) => {
573
+ const item = document.createElement("div");
574
+ item.className = "criterion";
575
+ item.innerHTML = `<div class="criterion-row"><span></span><strong>${weight}%</strong></div><div class="criterion-track"><span style="width:${weight * 4}%"></span></div>`;
576
+ item.querySelector(".criterion-row span").textContent = name;
577
+ view.appendChild(item);
578
+ });
579
+ }
580
+
581
+ function advancePaperDiscovery() {
582
+ const target = Math.min(state.limit, Math.floor(state.phaseElapsed / 470));
583
+ if (target > state.papersFound) {
584
+ for (let i = state.papersFound; i < target; i++) addLog("DISC", `Paper ${i + 1} received from arXiv and passed metadata validation`, "var(--cyan)");
585
+ state.papersFound = target;
586
+ }
587
+ }
588
+
589
+ function advanceEvaluation() {
590
+ const target = Math.min(state.limit, Math.floor(state.phaseElapsed / 680));
591
+ if (target > state.evaluated) {
592
+ for (let i = state.evaluated; i < target; i++) {
593
+ const [title, authors, base] = PAPER_LIBRARY[i];
594
+ const score = Math.max(10, Math.min(94, base + ((state.requestId.charCodeAt(3) + i * 3) % 5 - 2)));
595
+ state.results.push({ title, authors, score });
596
+ addLog("EVAL", `${title.slice(0, 36)} scored ${score}/100`, scoreColor(score));
597
+ }
598
+ state.evaluated = target;
599
+ renderRanking();
600
+ }
601
+ }
602
+
603
+ function calculateAverage() {
604
+ return state.results.length ? Math.round(state.results.reduce((sum, p) => sum + p.score, 0) / state.results.length) : 0;
605
+ }
606
+
607
+ function generateReport() {
608
+ const sorted = [...state.results].sort((a,b) => b.score - a.score);
609
+ const high = sorted.filter(p => p.score >= 70).length;
610
+ const medium = sorted.filter(p => p.score >= 40 && p.score < 70).length;
611
+ const low = sorted.filter(p => p.score < 40).length;
612
+ const findings = sorted.slice(0,5).map((p,i) => `${i + 1}. ${p.title}\n Authors: ${p.authors}\n AGI Score: ${p.score}/100`).join("\n\n");
613
+ state.report = `# AGI Research Analysis Report\n\n## Executive Summary\n\nResearch Objective: ${el("queryInput").value}\n\nPapers discovered: ${state.papersFound}\nPapers evaluated: ${state.evaluated}\nAverage AGI score: ${calculateAverage()}/100\n\n## AGI Potential Distribution\n\n- High AGI Potential: ${high}\n- Medium AGI Potential: ${medium}\n- Low AGI Potential: ${low}\n\n## Top Papers\n\n${findings}\n\n## Recommended Actions\n\n1. Deepen analysis of the highest-potential papers.\n2. Track developments from the leading research groups.\n3. Expand discovery to full-text analysis and additional sources.\n\n---\nGenerated by the AI Research Multi-Agent System simulation.\n`;
614
+ el("downloadReport").classList.add("visible");
615
+ }
616
+
617
+ function updateMetrics() {
618
+ el("papersFound").textContent = state.papersFound;
619
+ el("papersEvaluated").textContent = state.evaluated;
620
+ el("avgScore").textContent = state.results.length ? calculateAverage() : "--";
621
+ el("systemState").textContent = state.paused ? "PIPELINE PAUSED" : state.running ? "PIPELINE ACTIVE" : state.phase === "complete" ? "RUN COMPLETE" : "SYSTEM READY";
622
+ el("logState").textContent = state.paused ? "paused" : state.running ? "streaming" : "listening";
623
+ }
624
+
625
+ function runPhaseLogic() {
626
+ const p = state.phaseElapsed;
627
+ if (state.phase === "initialization") {
628
+ supervisorDecision("Assigning request ID and loading clean research state");
629
+ if (!state.phaseLogged) { addLog("SUPV", "INITIALIZATION -> PLANNING", "var(--amber)"); state.phaseLogged = true; }
630
+ if (p >= 900) setPhase("planning");
631
+ } else if (state.phase === "planning") {
632
+ supervisorDecision(p < 1300 ? "Planner is extracting dates and focus areas" : "Validating structured execution plan");
633
+ if (!state.phaseLogged) { addLog("PLAN", "Parsing query into keywords, sources, dates, and success criteria", "var(--blue)"); state.phaseLogged = true; }
634
+ if (p >= 3200) { addLog("SUPV", "PLANNING -> DISCOVERY / execution plan accepted", "var(--amber)"); setPhase("discovery"); }
635
+ } else if (state.phase === "discovery") {
636
+ advancePaperDiscovery();
637
+ supervisorDecision(state.papersFound < state.limit ? `Monitoring arXiv paper search / ${state.papersFound} validated` : "Reviewing deduplication and source validation summary");
638
+ if (!state.phaseLogged) { addLog("TOOL", "arXiv search started across cs.AI, cs.LG, and cs.CL", "var(--cyan)"); state.phaseLogged = true; }
639
+ if (p >= Math.max(5400, state.limit * 470 + 800)) { addLog("SUPV", `DISCOVERY -> EVALUATION / ${state.papersFound} papers found`, "var(--amber)"); setPhase("evaluation"); }
640
+ } else if (state.phase === "evaluation") {
641
+ advanceEvaluation();
642
+ supervisorDecision(state.evaluated < state.limit ? `Evaluating abstract ${state.evaluated + 1} of ${state.limit} with weighted AGI rubric` : "Checking score distribution and evaluation completeness");
643
+ if (!state.phaseLogged) { addLog("MODEL", "JSON-only AGI evaluator initialized with 10 weighted parameters", "var(--violet)"); state.phaseLogged = true; }
644
+ if (p >= state.limit * 680 + 900) { addLog("SUPV", "EVALUATION -> COMPLETION / report requested", "var(--amber)"); setPhase("reporting"); }
645
+ } else if (state.phase === "reporting") {
646
+ supervisorDecision(p < 1500 ? "Sorting results and identifying high-potential papers" : "Generating executive summary and recommended actions");
647
+ if (!state.phaseLogged) { addLog("RPRT", "Synthesizing ranked findings and score distribution", "var(--green)"); state.phaseLogged = true; }
648
+ if (p >= 2800) {
649
+ generateReport();
650
+ setPhase("complete");
651
+ state.running = false;
652
+ supervisorDecision(`Research complete / ${state.evaluated} papers scored / report ready`);
653
+ addLog("DONE", `Pipeline completed with average AGI score ${calculateAverage()}/100`, "var(--green)");
654
+ runButton.textContent = "Run again";
655
+ runButton.classList.remove("running");
656
+ pauseButton.disabled = true;
657
+ }
658
+ }
659
+ updateCards();
660
+ updateMetrics();
661
+ }
662
+
663
+ function tick(now) {
664
+ const delta = now - state.lastTick;
665
+ state.lastTick = now;
666
+ if (state.running && !state.paused) {
667
+ state.phaseElapsed += delta * state.speed;
668
+ runPhaseLogic();
669
+ }
670
+ requestAnimationFrame(tick);
671
+ }
672
+
673
+ function startSimulation() {
674
+ if (state.paused) {
675
+ state.paused = false;
676
+ pauseButton.textContent = "II";
677
+ runButton.textContent = "Research running";
678
+ addLog("SUPV", "Pipeline resumed", "var(--amber)");
679
+ return;
680
+ }
681
+ if (state.running) return;
682
+ resetSimulation(false);
683
+ state.limit = Number(el("paperLimit").value);
684
+ state.requestId = "RQ-" + Math.random().toString(36).slice(2, 8).toUpperCase();
685
+ el("requestId").textContent = state.requestId;
686
+ state.running = true;
687
+ runButton.textContent = "Research running";
688
+ runButton.classList.add("running");
689
+ pauseButton.disabled = false;
690
+ setPhase("initialization");
691
+ addLog("START", `Research request ${state.requestId} accepted`, "var(--green)");
692
+ updateMetrics();
693
+ }
694
+
695
+ function pauseSimulation() {
696
+ if (!state.running) return;
697
+ state.paused = !state.paused;
698
+ pauseButton.textContent = state.paused ? ">" : "II";
699
+ runButton.textContent = state.paused ? "Resume research" : "Research running";
700
+ if (state.paused) addLog("SUPV", "Pipeline paused by operator", "var(--amber)");
701
+ updateMetrics();
702
+ }
703
+
704
+ function resetSimulation(log = true) {
705
+ state.running = false; state.paused = false; state.phaseElapsed = 0;
706
+ state.papersFound = 0; state.evaluated = 0; state.results = []; state.report = ""; state.requestId = "";
707
+ el("requestId").textContent = "No request";
708
+ el("downloadReport").classList.remove("visible");
709
+ ranking.innerHTML = `<div class="empty-state"><div><div class="empty-radar"></div><div class="empty-title">Research queue ready</div><div class="empty-copy">Run the workflow to discover, validate, score, and rank simulated AGI papers.</div></div></div>`;
710
+ runButton.textContent = "Run research";
711
+ runButton.classList.remove("running");
712
+ pauseButton.textContent = "II";
713
+ pauseButton.disabled = true;
714
+ setPhase("idle");
715
+ supervisorDecision("Awaiting research objective");
716
+ updateMetrics();
717
+ if (log) addLog("RESET", "Research state cleared", "var(--muted)");
718
+ }
719
+
720
+ function downloadReport() {
721
+ const blob = new Blob([state.report], { type: "text/markdown" });
722
+ const url = URL.createObjectURL(blob);
723
+ const a = document.createElement("a");
724
+ a.href = url; a.download = `agi-research-report-${state.requestId.toLowerCase()}.md`; a.click();
725
+ URL.revokeObjectURL(url);
726
+ }
727
+
728
+ el("paperLimit").addEventListener("input", event => el("paperLimitValue").textContent = event.target.value);
729
+ runButton.addEventListener("click", () => state.paused ? pauseSimulation() : startSimulation());
730
+ pauseButton.addEventListener("click", pauseSimulation);
731
+ el("resetButton").addEventListener("click", () => resetSimulation(true));
732
+ el("downloadReport").addEventListener("click", downloadReport);
733
+ document.querySelectorAll(".speed-button").forEach(button => button.addEventListener("click", () => {
734
+ document.querySelectorAll(".speed-button").forEach(b => b.classList.remove("active"));
735
+ button.classList.add("active"); state.speed = Number(button.dataset.speed);
736
+ addLog("SPEED", `Simulation speed set to ${button.textContent}`, "var(--violet)");
737
+ }));
738
+ document.querySelectorAll(".tab").forEach(button => button.addEventListener("click", () => {
739
+ document.querySelectorAll(".tab").forEach(b => { b.classList.toggle("active", b === button); b.setAttribute("aria-selected", b === button); });
740
+ document.querySelectorAll(".tab-view").forEach(view => view.classList.remove("active"));
741
+ el("view-" + button.dataset.tab).classList.add("active");
742
+ }));
743
+
744
+ renderFramework();
745
+ el("clock").textContent = formatTime();
746
+ setInterval(() => el("clock").textContent = formatTime(), 1000);
747
+ addLog("READY", "Supervisor online / all agents standing by", "var(--green)");
748
+ requestAnimationFrame(tick);
749
+ </script>
750
+ </body>
751
  </html>