Hugging Face's logo

Spaces:
Testing347
/
Copy-ava-testing
Running

App Files Community
Testing347 commited on
Commit
cc952b5
·
verified ·
1 Parent(s): 45c760e

Update capabilities.html

Browse files
Files changed (1) hide show
  1. capabilities.html +173 -400
capabilities.html CHANGED
@@ -3,69 +3,20 @@
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
6
- <title>SILENTPATTERN — Lab Interface</title>
7
 
8
- <!-- Tailwind -->
9
  <script src="https://cdn.tailwindcss.com"></script>
10
-
11
- <!-- Three.js + Vanta -->
12
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
13
  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
14
 
15
- <!-- Icons + Font -->
16
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
17
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
18
-
19
- <style>
20
- body { font-family: 'Inter', sans-serif; }
21
-
22
- .gradient-text {
23
- background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
24
- -webkit-background-clip: text;
25
- background-clip: text;
26
- color: transparent;
27
- }
28
-
29
- .aura {
30
- background:
31
- radial-gradient(circle at 25% 15%, rgba(99,102,241,0.20), transparent 42%),
32
- radial-gradient(circle at 70% 70%, rgba(236,72,153,0.12), transparent 46%),
33
- radial-gradient(circle at 50% 45%, rgba(139,92,246,0.10), transparent 55%);
34
- }
35
-
36
- .conscious-element { transition: all 0.28s ease; }
37
- .conscious-element:hover { transform: translateY(-2px); }
38
-
39
- .focus-ring:focus { outline: none; box-shadow: 0 0 0 2px rgba(99,102,241,0.65); }
40
-
41
- .modal { transition: opacity 0.3s ease, transform 0.3s ease; }
42
- .modal-hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }
43
- .modal-visible { opacity: 1; transform: translateY(0); }
44
-
45
- .thin-scroll {
46
- scrollbar-width: thin;
47
- scrollbar-color: #4f46e5 #1e1b4b;
48
- }
49
- .thin-scroll::-webkit-scrollbar { width: 6px; }
50
- .thin-scroll::-webkit-scrollbar-track { background: #1e1b4b; }
51
- .thin-scroll::-webkit-scrollbar-thumb { background-color: #4f46e5; border-radius: 3px; }
52
-
53
- /* Subtle grid for “lab surface” */
54
- .lab-grid {
55
- background-image:
56
- linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px),
57
- linear-gradient(90deg, rgba(148,163,184,0.06) 1px, transparent 1px);
58
- background-size: 44px 44px;
59
- background-position: center;
60
- }
61
- </style>
62
  </head>
63
 
64
  <body class="bg-black text-white overflow-x-hidden">
65
- <!-- Animated background -->
66
  <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
67
 
68
- <!-- Top bar -->
69
  <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
70
  <a href="index.html" class="flex items-center space-x-2">
71
  <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center">
@@ -88,147 +39,132 @@
88
  </div>
89
  </nav>
90
 
91
- <!-- HERO -->
92
  <section class="relative z-10 px-6 pt-14 pb-10">
93
  <div class="max-w-6xl mx-auto">
94
  <div class="inline-flex items-center gap-3 self-start px-4 py-2 rounded-full border border-gray-800 bg-gray-900/20 backdrop-blur-sm">
95
  <span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span>
96
- <span class="text-xs text-gray-300 tracking-widest uppercase">Start</span>
97
- <span class="text-xs text-gray-500">Lab interface</span>
98
  </div>
99
 
100
- <div class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
101
- <div>
102
- <h1 class="text-3xl md:text-6xl font-bold leading-tight">
103
- <span class="gradient-text">SILENTPATTERN</span><br>
104
- Minimal surface, auditable depth
105
- </h1>
106
-
107
- <p class="mt-4 text-gray-300 max-w-xl text-lg md:text-xl leading-relaxed">
108
- This is presented as a lab console: programs are dossiers, not marketing claims.
109
- Outputs are constrained, traceable, and designed for evaluation.
110
- </p>
111
 
112
- <div class="mt-6 flex flex-col sm:flex-row gap-3">
113
- <a href="capabilities.html"
114
- class="px-6 py-3 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 transition text-center">
115
- Enter Program Bay
116
- </a>
117
- <a href="chat.html"
118
- class="px-6 py-3 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition text-center">
119
- Open Console
120
- </a>
121
  </div>
122
-
123
- <div class="mt-5 text-xs text-gray-500 max-w-xl">
124
- Security note: interactive systems must not expose secrets client-side. Browser pages should call server endpoints for any model access.
 
 
 
 
 
125
  </div>
126
  </div>
127
 
128
- <div class="rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden aura lab-grid">
129
- <div class="px-6 py-5 border-b border-gray-800/60 flex items-center justify-between">
 
130
  <div>
131
- <div class="text-sm text-gray-200 font-medium">Interface Status</div>
132
- <div class="text-xs text-gray-500 mt-1">Conservative defaults; evidence gates.</div>
133
- </div>
134
- <div class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">
135
- DRAFT
136
  </div>
 
137
  </div>
 
 
 
 
 
 
 
 
 
 
138
 
139
- <div class="p-6 space-y-4">
140
- <div class="rounded-xl border border-gray-800 bg-black/20 p-4">
141
- <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Operating Principles</div>
142
- <ul class="text-sm text-gray-300 space-y-2">
143
- <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Evaluation-first posture: protocols before claims.</span></li>
144
- <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Secure-by-design: no client-side secrets, auditable endpoints.</span></li>
145
- <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Traceability: outputs map to assumptions and evidence capsules.</span></li>
146
- <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Fail-closed governance for any agentic workflows.</span></li>
147
- </ul>
148
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
149
 
150
- <div class="rounded-xl border border-gray-800 bg-black/20 p-4">
151
- <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Modules</div>
152
- <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
153
- <a href="capabilities.html"
154
- class="rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 conscious-element">
155
- <div class="text-sm font-semibold text-gray-100"><i class="fas fa-layer-group mr-2 text-indigo-300"></i>Programs</div>
156
- <div class="text-xs text-gray-500 mt-1">MCAP · CHAI · Quantum Lambda · AI Scientist</div>
157
- </a>
158
- <a href="chat.html"
159
- class="rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 conscious-element">
160
- <div class="text-sm font-semibold text-gray-100"><i class="fas fa-terminal mr-2 text-indigo-300"></i>Console</div>
161
- <div class="text-xs text-gray-500 mt-1">Controlled chat with exportable transcripts</div>
162
- </a>
163
- <a href="research.html"
164
- class="rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 conscious-element">
165
- <div class="text-sm font-semibold text-gray-100"><i class="fas fa-file-lines mr-2 text-indigo-300"></i>Research</div>
166
- <div class="text-xs text-gray-500 mt-1">Notes, briefs, and evaluation artifacts</div>
167
- </a>
168
- <a href="contact.html"
169
- class="rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4 conscious-element">
170
- <div class="text-sm font-semibold text-gray-100"><i class="fas fa-inbox mr-2 text-indigo-300"></i>Contact</div>
171
- <div class="text-xs text-gray-500 mt-1">Direct channel and coordination</div>
172
- </a>
173
- </div>
174
  </div>
 
 
 
 
 
 
 
 
 
 
175
 
176
- <div class="rounded-xl border border-gray-800 bg-black/20 p-4">
177
- <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Disclaimer</div>
178
- <div class="text-sm text-gray-300 leading-relaxed">
179
- Any market-oriented content is research-only. No investment advice, solicitation, or performance claims are provided here.
180
- </div>
 
181
  </div>
 
 
 
 
 
 
 
 
 
 
 
182
  </div>
183
  </div>
184
  </div>
185
- </div>
186
- </section>
187
 
188
- <!-- QUICK ENTRY CARDS -->
189
- <section class="relative z-10 px-6 pb-16">
190
- <div class="max-w-6xl mx-auto">
191
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
192
- <a href="capabilities.html"
193
- class="rounded-2xl border border-gray-800 bg-gray-900/20 hover:bg-gray-900/30 transition p-6 aura conscious-element">
194
- <div class="flex items-center justify-between">
195
- <div class="text-sm text-gray-200 font-semibold">Program Bay</div>
196
- <i class="fas fa-arrow-right text-gray-400"></i>
197
- </div>
198
- <div class="mt-3 text-gray-300">
199
- Dossiers for MCAP, CHAI, Quantum Lambda, AI Scientist, and the Agentic Workforce concept.
200
- </div>
201
- <div class="mt-4 text-xs text-gray-500">Structured scope · assumptions · evaluation · access gates</div>
202
- </a>
203
-
204
- <a href="chat.html"
205
- class="rounded-2xl border border-gray-800 bg-gray-900/20 hover:bg-gray-900/30 transition p-6 aura conscious-element">
206
- <div class="flex items-center justify-between">
207
- <div class="text-sm text-gray-200 font-semibold">Console</div>
208
- <i class="fas fa-arrow-right text-gray-400"></i>
209
- </div>
210
- <div class="mt-3 text-gray-300">
211
- Controlled interaction channel with exportable transcripts. No client-side secrets.
212
- </div>
213
- <div class="mt-4 text-xs text-gray-500">Server endpoint integration · audit trail ready</div>
214
- </a>
215
-
216
- <button type="button" id="access-cta"
217
- class="rounded-2xl border border-gray-800 bg-gray-900/20 hover:bg-gray-900/30 transition p-6 text-left aura conscious-element">
218
- <div class="flex items-center justify-between">
219
- <div class="text-sm text-gray-200 font-semibold">Request Access</div>
220
- <i class="fas fa-lock text-gray-400"></i>
221
- </div>
222
- <div class="mt-3 text-gray-300">
223
- Curated access for research, evaluation, and controlled demos.
224
- </div>
225
- <div class="mt-4 text-xs text-gray-500">Qualified users · high-signal feedback · responsible scaling</div>
226
- </button>
227
  </div>
228
  </div>
229
  </section>
230
 
231
- <!-- Footer -->
232
  <footer class="relative z-10 px-6 pb-10">
233
  <div class="max-w-6xl mx-auto border-t border-gray-800/60 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
234
  <div class="text-sm text-gray-500">© 2025 SILENTPATTERN. All rights reserved.</div>
@@ -241,7 +177,7 @@
241
  </div>
242
  </footer>
243
 
244
- <!-- ACCESS MODAL -->
245
  <div id="access-modal"
246
  class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-hidden"
247
  role="dialog" aria-modal="true" aria-labelledby="access-modal-title" tabindex="-1">
@@ -291,16 +227,13 @@
291
  </div>
292
  </div>
293
 
294
- <!-- LAB NAVIGATOR (Dossier-style) -->
295
  <div id="lab-navigator"
296
  class="fixed inset-0 z-[60] bg-black/80 backdrop-blur-md modal modal-hidden"
297
  role="dialog" aria-modal="true" aria-label="Lab Navigator" tabindex="-1">
298
-
299
  <div class="absolute inset-0" data-lab-close="true"></div>
300
-
301
  <div class="relative w-full h-full flex items-center justify-center p-6">
302
  <div class="w-full max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6">
303
- <!-- Left panel: nodes -->
304
  <div class="relative rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden">
305
  <div class="flex items-center justify-between px-5 py-4 border-b border-gray-800/60">
306
  <div class="flex items-center space-x-3">
@@ -312,7 +245,6 @@
312
  <div class="text-xs text-gray-500">Lab Navigator</div>
313
  </div>
314
  </div>
315
-
316
  <button id="lab-nav-close"
317
  class="w-9 h-9 rounded-full border border-gray-800 bg-gray-900/30 hover:bg-gray-900/50 transition flex items-center justify-center"
318
  aria-label="Close Lab Navigator">
@@ -321,10 +253,6 @@
321
  </div>
322
 
323
  <div class="relative p-6 min-h-[420px]">
324
- <div class="absolute inset-0 opacity-70 pointer-events-none"
325
- style="background: radial-gradient(circle at 30% 20%, rgba(99,102,241,0.18), transparent 45%),
326
- radial-gradient(circle at 70% 70%, rgba(236,72,153,0.10), transparent 50%);"></div>
327
-
328
  <div class="relative grid grid-cols-1 sm:grid-cols-2 gap-3">
329
  <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
330
  data-dossier="start">
@@ -335,7 +263,7 @@
335
  <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
336
  data-dossier="programs">
337
  <div class="text-sm text-gray-200 font-medium">Programs</div>
338
- <div class="text-xs text-gray-500 mt-1">Program Bay dossiers</div>
339
  </button>
340
 
341
  <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
@@ -362,14 +290,12 @@
362
  <div class="text-xs text-gray-500 mt-1">Curated entry</div>
363
  </button>
364
  </div>
365
-
366
  <div class="relative mt-6 text-xs text-gray-500">
367
  Tip: Press <span class="text-gray-300">Esc</span> to close.
368
  </div>
369
  </div>
370
  </div>
371
 
372
- <!-- Right panel: dossier -->
373
  <div class="relative rounded-2xl border border-gray-800 bg-gray-900/30 overflow-hidden">
374
  <div class="px-6 py-5 border-b border-gray-800/60">
375
  <div class="flex items-start justify-between gap-4">
@@ -385,15 +311,11 @@
385
  </div>
386
 
387
  <div class="p-6 space-y-5 max-h-[560px] overflow-auto thin-scroll">
388
- <div id="dossier-body" class="text-sm text-gray-300 leading-relaxed">
389
- SILENTPATTERN uses a reduced navigation surface to maintain a lab-console feel.
390
- </div>
391
 
392
  <div class="rounded-xl border border-gray-800 bg-black/20 p-4">
393
  <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Evidence Capsule</div>
394
- <ul id="dossier-evidence" class="text-sm text-gray-300 space-y-1">
395
- <li class="text-gray-500">No dossier selected.</li>
396
- </ul>
397
  </div>
398
 
399
  <div class="flex flex-col sm:flex-row gap-3">
@@ -407,9 +329,7 @@
407
  </button>
408
  </div>
409
 
410
- <div id="dossier-meta" class="text-xs text-gray-500">
411
- Last updated: <span class="text-gray-300">—</span>
412
- </div>
413
  </div>
414
  </div>
415
 
@@ -417,224 +337,77 @@
417
  </div>
418
  </div>
419
 
 
420
  <script>
421
- /* VANTA BACKGROUND */
422
- const vantaEffect = VANTA.NET({
423
- el: "#vanta-bg",
424
- mouseControls: true,
425
- touchControls: true,
426
- gyroControls: false,
427
- minHeight: 200.00,
428
- minWidth: 200.00,
429
- scale: 1.00,
430
- scaleMobile: 1.00,
431
- color: 0x4f46e5,
432
- backgroundColor: 0x020617,
433
- points: 12.00,
434
- maxDistance: 20.00,
435
- spacing: 15.00
436
- });
437
- window.addEventListener('resize', () => vantaEffect.resize());
438
-
439
- /* MODAL ACCESSIBILITY */
440
- function trapFocus(modal) {
441
- const focusable = modal.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
442
- if (!focusable.length) return;
443
- const first = focusable[0];
444
- const last = focusable[focusable.length - 1];
445
-
446
- function handler(e) {
447
- if (e.key === 'Tab') {
448
- if (e.shiftKey) {
449
- if (document.activeElement === first) { e.preventDefault(); last.focus(); }
450
- } else {
451
- if (document.activeElement === last) { e.preventDefault(); first.focus(); }
452
- }
453
- } else if (e.key === 'Escape') {
454
- toggleModal(modal, false);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
455
  }
456
- }
457
- modal.addEventListener('keydown', handler);
458
- modal._focusHandler = handler;
459
- }
460
- function untrapFocus(modal) {
461
- if (modal._focusHandler) {
462
- modal.removeEventListener('keydown', modal._focusHandler);
463
- delete modal._focusHandler;
464
- }
465
- }
466
- const toggleModal = (modal, show) => {
467
- if (show) {
468
- modal.classList.remove('modal-hidden');
469
- modal.classList.add('modal-visible');
470
- document.body.style.overflow = 'hidden';
471
- setTimeout(() => { modal.focus(); trapFocus(modal); }, 0);
472
- } else {
473
- modal.classList.remove('modal-visible');
474
- modal.classList.add('modal-hidden');
475
- document.body.style.overflow = '';
476
- untrapFocus(modal);
477
- }
478
- };
479
-
480
- /* ACCESS MODAL */
481
- const accessModal = document.getElementById('access-modal');
482
- const accessBtn = document.getElementById('access-btn');
483
- const accessCta = document.getElementById('access-cta');
484
- const closeAccessModal = document.getElementById('close-access-modal');
485
-
486
- function openAccess() {
487
- toggleModal(accessModal, true);
488
- setTimeout(() => document.getElementById('name').focus(), 50);
489
- }
490
-
491
- accessBtn.addEventListener('click', openAccess);
492
- if (accessCta) accessCta.addEventListener('click', openAccess);
493
- closeAccessModal.addEventListener('click', () => toggleModal(accessModal, false));
494
- accessModal.addEventListener('click', (e) => { if (e.target === accessModal) toggleModal(accessModal, false); });
495
-
496
- document.getElementById('access-form').addEventListener('submit', (e) => {
497
- e.preventDefault();
498
- const name = document.getElementById('name').value.trim();
499
- const email = document.getElementById('email').value.trim();
500
- const institution = document.getElementById('institution').value.trim();
501
- const purpose = document.getElementById('purpose').value;
502
-
503
- if (!name || !email || !institution || !purpose) {
504
- alert('Please fill in all fields.');
505
- return;
506
- }
507
- alert('Request received. You will be contacted after review.');
508
- e.target.reset();
509
- toggleModal(accessModal, false);
510
- });
511
-
512
- /* LAB NAVIGATOR */
513
- const labNav = document.getElementById('lab-navigator');
514
- const labNavBtn = document.getElementById('lab-nav-btn');
515
- const labNavClose = document.getElementById('lab-nav-close');
516
 
517
- function openLabNav() { toggleModal(labNav, true); setTimeout(() => labNav.focus(), 0); }
518
- function closeLabNav() { toggleModal(labNav, false); }
519
-
520
- labNavBtn.addEventListener('click', openLabNav);
521
- labNavClose.addEventListener('click', closeLabNav);
522
- labNav.addEventListener('click', (e) => {
523
- const shouldClose = e.target && e.target.getAttribute('data-lab-close') === 'true';
524
- if (shouldClose) closeLabNav();
525
- });
526
-
527
- const DOSSIERS = {
528
- start: {
529
- title: "Start Here",
530
- subtitle: "Entry interface",
531
- status: "ACTIVE",
532
- body: "This is the primary entry layer: minimal navigation surface, with modules accessible through dossiers.",
533
- evidence: ["Reduced surface area", "Conservative claims", "Evaluation posture visible"],
534
- primary: { label: "Close Navigator", action: () => closeLabNav() },
535
- secondary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
536
- updated: "—"
537
- },
538
- programs: {
539
- title: "Programs",
540
- subtitle: "Program Bay dossiers",
541
- status: "ACTIVE",
542
- body: "Programs are exposed as dossiers: scope, assumptions, evaluation protocol, and access gates.",
543
- evidence: ["MCAP · CHAI · Quantum Lambda", "AI Scientist prototype", "Agentic Workforce concept"],
544
- primary: { label: "Open Programs", action: () => { window.location.href = "capabilities.html"; } },
545
- secondary: { label: "Research", action: () => { window.location.href = "research.html"; } },
546
- updated: "—"
547
- },
548
- console: {
549
- title: "Console",
550
- subtitle: "Controlled interaction channel",
551
- status: "DRAFT",
552
- body: "The console is UI-only by design and should call a server endpoint for any model access. Transcripts are exportable for auditability.",
553
- evidence: ["No client-side secrets", "Server endpoint integration", "Exportable transcript format"],
554
- primary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
555
- secondary: { label: "Close Navigator", action: () => closeLabNav() },
556
- updated: "—"
557
- },
558
- research: {
559
- title: "Research",
560
- subtitle: "Notes and briefs",
561
- status: "DRAFT",
562
- body: "Research notes should remain evidence-first: protocols, results, uncertainty, and failure modes.",
563
- evidence: ["Evaluation artifacts", "Reproducibility hooks", "Conservative external wording"],
564
- primary: { label: "Open Research", action: () => { window.location.href = "research.html"; } },
565
- secondary: { label: "Programs", action: () => { window.location.href = "capabilities.html"; } },
566
- updated: "—"
567
- },
568
- contact: {
569
- title: "Contact",
570
- subtitle: "Direct channel",
571
- status: "ACTIVE",
572
- body: "A single coordination channel for qualified requests and high-signal feedback.",
573
- evidence: ["Curated inbound", "Clear scope alignment", "Responsible scaling"],
574
- primary: { label: "Open Contact", action: () => { window.location.href = "contact.html"; } },
575
- secondary: { label: "Request Access", action: () => { closeLabNav(); openAccess(); } },
576
- updated: "—"
577
- },
578
- access: {
579
- title: "Access",
580
- subtitle: "Curated entry",
581
- status: "ACTIVE",
582
- body: "Access is curated to keep evaluation controlled: qualified users, high-signal feedback, and responsible iteration.",
583
- evidence: ["Application-based", "Segmented by intent", "Controlled demos"],
584
- primary: { label: "Request Access", action: () => { closeLabNav(); openAccess(); } },
585
- secondary: { label: "Programs", action: () => { window.location.href = "capabilities.html"; } },
586
- updated: "—"
587
- }
588
- };
589
-
590
- const dossierTitle = document.getElementById('dossier-title');
591
- const dossierSubtitle = document.getElementById('dossier-subtitle');
592
- const dossierStatus = document.getElementById('dossier-status');
593
- const dossierBody = document.getElementById('dossier-body');
594
- const dossierEvidence = document.getElementById('dossier-evidence');
595
- const dossierPrimary = document.getElementById('dossier-primary');
596
- const dossierSecondary = document.getElementById('dossier-secondary');
597
- const dossierMeta = document.getElementById('dossier-meta');
598
-
599
- function renderDossier(key) {
600
- const d = DOSSIERS[key];
601
- if (!d) return;
602
-
603
- dossierTitle.textContent = d.title;
604
- dossierSubtitle.textContent = d.subtitle;
605
- dossierStatus.textContent = d.status;
606
- dossierBody.textContent = d.body;
607
-
608
- dossierEvidence.innerHTML = "";
609
- d.evidence.forEach(item => {
610
- const li = document.createElement('li');
611
- li.textContent = item;
612
- dossierEvidence.appendChild(li);
613
- });
614
-
615
- dossierPrimary.textContent = d.primary.label;
616
- dossierPrimary.onclick = d.primary.action;
617
-
618
- dossierSecondary.textContent = d.secondary.label;
619
- dossierSecondary.onclick = d.secondary.action;
620
-
621
- dossierMeta.innerHTML = `Last updated: <span class="text-gray-300">${d.updated}</span>`;
622
- }
623
-
624
- document.querySelectorAll('.lab-node').forEach(btn => {
625
- btn.addEventListener('click', () => renderDossier(btn.getAttribute('data-dossier')));
626
  });
627
-
628
- /* GLOBAL ESC */
629
- document.addEventListener('keydown', (e) => {
630
- if (e.key === 'Escape') {
631
- if (labNav && !labNav.classList.contains('modal-hidden')) closeLabNav();
632
- if (accessModal && !accessModal.classList.contains('modal-hidden')) toggleModal(accessModal, false);
633
- }
634
- });
635
-
636
- /* Default */
637
- renderDossier('start');
638
  </script>
639
  </body>
640
  </html>
 
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
6
+ <title>SILENTPATTERN — Program Bay</title>
7
 
 
8
  <script src="https://cdn.tailwindcss.com"></script>
 
 
9
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
10
  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
11
 
 
12
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
14
+ <link rel="stylesheet" href="assets/site.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  </head>
16
 
17
  <body class="bg-black text-white overflow-x-hidden">
 
18
  <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
19
 
 
20
  <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
21
  <a href="index.html" class="flex items-center space-x-2">
22
  <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center">
 
39
  </div>
40
  </nav>
41
 
 
42
  <section class="relative z-10 px-6 pt-14 pb-10">
43
  <div class="max-w-6xl mx-auto">
44
  <div class="inline-flex items-center gap-3 self-start px-4 py-2 rounded-full border border-gray-800 bg-gray-900/20 backdrop-blur-sm">
45
  <span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span>
46
+ <span class="text-xs text-gray-300 tracking-widest uppercase">Programs</span>
47
+ <span class="text-xs text-gray-500">Program Bay</span>
48
  </div>
49
 
50
+ <div class="mt-6">
51
+ <h1 class="text-3xl md:text-5xl font-bold leading-tight">
52
+ <span class="gradient-text">Program Bay</span><br>
53
+ Dossiers, protocols, and evaluation gates
54
+ </h1>
55
+ <p class="mt-4 text-gray-300 max-w-3xl text-lg leading-relaxed">
56
+ Each program is presented as a dossier: scope, assumptions, evaluation protocol, and access gating.
57
+ This page is intentionally conservative: it is an interface to artifacts, not promotional copy.
58
+ </p>
59
+ </div>
 
60
 
61
+ <div class="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-4">
62
+ <!-- MCAP -->
63
+ <div class="rounded-2xl border border-gray-800 bg-gray-900/20 p-6 aura conscious-element">
64
+ <div class="flex items-start justify-between gap-4">
65
+ <div>
66
+ <div class="text-sm text-gray-200 font-semibold"><i class="fas fa-diagram-project mr-2 text-indigo-300"></i>MCAP</div>
67
+ <div class="text-xs text-gray-500 mt-1">Causal abstraction and fidelity evaluation</div>
68
+ </div>
69
+ <span class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">DRAFT</span>
70
  </div>
71
+ <ul class="mt-4 text-sm text-gray-300 space-y-2">
72
+ <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Explicit abstraction mapping</span></li>
73
+ <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Testable causal fidelity criteria</span></li>
74
+ <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Baseline comparisons and failure modes</span></li>
75
+ </ul>
76
+ <div class="mt-5 flex gap-3">
77
+ <a href="chat.html" class="px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-700 transition text-sm">Open in Console</a>
78
+ <a href="research.html" class="px-4 py-2 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition text-sm">View Notes</a>
79
  </div>
80
  </div>
81
 
82
+ <!-- CHAI -->
83
+ <div class="rounded-2xl border border-gray-800 bg-gray-900/20 p-6 aura conscious-element">
84
+ <div class="flex items-start justify-between gap-4">
85
  <div>
86
+ <div class="text-sm text-gray-200 font-semibold"><i class="fas fa-chart-line mr-2 text-indigo-300"></i>CHAI</div>
87
+ <div class="text-xs text-gray-500 mt-1">Regime modeling and forecasting harness</div>
 
 
 
88
  </div>
89
+ <span class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">DRAFT</span>
90
  </div>
91
+ <ul class="mt-4 text-sm text-gray-300 space-y-2">
92
+ <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Clear horizon and labeling rules</span></li>
93
+ <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Walk-forward protocol and leakage checks</span></li>
94
+ <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Risk and calibration metrics</span></li>
95
+ </ul>
96
+ <div class="mt-5 flex gap-3">
97
+ <a href="chat.html" class="px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-700 transition text-sm">Open in Console</a>
98
+ <a href="research.html" class="px-4 py-2 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition text-sm">View Notes</a>
99
+ </div>
100
+ </div>
101
 
102
+ <!-- Quantum Lambda -->
103
+ <div class="rounded-2xl border border-gray-800 bg-gray-900/20 p-6 aura conscious-element">
104
+ <div class="flex items-start justify-between gap-4">
105
+ <div>
106
+ <div class="text-sm text-gray-200 font-semibold"><i class="fas fa-bolt mr-2 text-indigo-300"></i>Quantum Lambda</div>
107
+ <div class="text-xs text-gray-500 mt-1">High-frequency decision systems constraints</div>
 
 
 
108
  </div>
109
+ <span class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">DRAFT</span>
110
+ </div>
111
+ <ul class="mt-4 text-sm text-gray-300 space-y-2">
112
+ <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Microstructure realism (slippage/latency)</span></li>
113
+ <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Execution assumptions documented</span></li>
114
+ <li class="flex gap-2"><span class="text-indigo-300">•</span><span>Risk limits and fail-closed behavior</span></li>
115
+ </ul>
116
+ <div class="mt-5 flex gap-3">
117
+ <a href="chat.html" class="px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-700 transition text-sm">Open in Console</a>
118
+ <a href="research.html" class="px-4 py-2 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition text-sm">View Notes</a>
119
+ </div>
120
+ </div>
121
 
122
+ <!-- AI Scientist -->
123
+ <div class="rounded-2xl border border-gray-800 bg-gray-900/20 p-6 aura conscious-element lg:col-span-2">
124
+ <div class="flex items-start justify-between gap-4">
125
+ <div>
126
+ <div class="text-sm text-gray-200 font-semibold"><i class="fas fa-flask mr-2 text-indigo-300"></i>AI Scientist</div>
127
+ <div class="text-xs text-gray-500 mt-1">Hypothesis → experiment → report pipeline</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
128
  </div>
129
+ <span class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">PROTOTYPE</span>
130
+ </div>
131
+ <p class="mt-4 text-sm text-gray-300 leading-relaxed">
132
+ Standardizes experiments, enforces reproducibility hooks, and produces auditable reports with uncertainty, baselines, and known failure modes.
133
+ </p>
134
+ <div class="mt-5 flex gap-3">
135
+ <a href="chat.html" class="px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-700 transition text-sm">Open in Console</a>
136
+ <a href="research.html" class="px-4 py-2 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition text-sm">View Notes</a>
137
+ </div>
138
+ </div>
139
 
140
+ <!-- Agentic Workforce -->
141
+ <div class="rounded-2xl border border-gray-800 bg-gray-900/20 p-6 aura conscious-element">
142
+ <div class="flex items-start justify-between gap-4">
143
+ <div>
144
+ <div class="text-sm text-gray-200 font-semibold"><i class="fas fa-users-gear mr-2 text-indigo-300"></i>Agentic Workforce</div>
145
+ <div class="text-xs text-gray-500 mt-1">Governed agent workflows (fail-closed)</div>
146
  </div>
147
+ <span class="text-xs px-2.5 py-1 rounded-full border border-indigo-500/30 text-indigo-200 bg-indigo-900/15">CONCEPT</span>
148
+ </div>
149
+ <p class="mt-4 text-sm text-gray-300 leading-relaxed">
150
+ A structured approach to multi-agent task execution with explicit permissions, audit trails, and safe failure behavior.
151
+ </p>
152
+ <div class="mt-5 flex gap-3">
153
+ <button id="access-cta"
154
+ class="px-4 py-2 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:opacity-90 transition text-sm">
155
+ Request Access
156
+ </button>
157
+ <a href="contact.html" class="px-4 py-2 rounded-xl border border-gray-700 bg-gray-900/20 hover:bg-gray-900/35 transition text-sm">Contact</a>
158
  </div>
159
  </div>
160
  </div>
 
 
161
 
162
+ <div class="mt-10 text-xs text-gray-500 max-w-4xl">
163
+ Implementation note: if you deploy the Console with real model access, keep keys server-side, log policy decisions, and store transcript exports as immutable artifacts.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
164
  </div>
165
  </div>
166
  </section>
167
 
 
168
  <footer class="relative z-10 px-6 pb-10">
169
  <div class="max-w-6xl mx-auto border-t border-gray-800/60 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
170
  <div class="text-sm text-gray-500">© 2025 SILENTPATTERN. All rights reserved.</div>
 
177
  </div>
178
  </footer>
179
 
180
+ <!-- ACCESS MODAL (same as index) -->
181
  <div id="access-modal"
182
  class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-hidden"
183
  role="dialog" aria-modal="true" aria-labelledby="access-modal-title" tabindex="-1">
 
227
  </div>
228
  </div>
229
 
230
+ <!-- LAB NAVIGATOR (reused structure) -->
231
  <div id="lab-navigator"
232
  class="fixed inset-0 z-[60] bg-black/80 backdrop-blur-md modal modal-hidden"
233
  role="dialog" aria-modal="true" aria-label="Lab Navigator" tabindex="-1">
 
234
  <div class="absolute inset-0" data-lab-close="true"></div>
 
235
  <div class="relative w-full h-full flex items-center justify-center p-6">
236
  <div class="w-full max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6">
 
237
  <div class="relative rounded-2xl border border-gray-800 bg-gray-900/20 overflow-hidden">
238
  <div class="flex items-center justify-between px-5 py-4 border-b border-gray-800/60">
239
  <div class="flex items-center space-x-3">
 
245
  <div class="text-xs text-gray-500">Lab Navigator</div>
246
  </div>
247
  </div>
 
248
  <button id="lab-nav-close"
249
  class="w-9 h-9 rounded-full border border-gray-800 bg-gray-900/30 hover:bg-gray-900/50 transition flex items-center justify-center"
250
  aria-label="Close Lab Navigator">
 
253
  </div>
254
 
255
  <div class="relative p-6 min-h-[420px]">
 
 
 
 
256
  <div class="relative grid grid-cols-1 sm:grid-cols-2 gap-3">
257
  <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
258
  data-dossier="start">
 
263
  <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
264
  data-dossier="programs">
265
  <div class="text-sm text-gray-200 font-medium">Programs</div>
266
+ <div class="text-xs text-gray-500 mt-1">This page</div>
267
  </button>
268
 
269
  <button class="lab-node text-left rounded-xl border border-gray-800 bg-gray-900/30 hover:border-indigo-500/50 hover:bg-gray-900/45 transition p-4"
 
290
  <div class="text-xs text-gray-500 mt-1">Curated entry</div>
291
  </button>
292
  </div>
 
293
  <div class="relative mt-6 text-xs text-gray-500">
294
  Tip: Press <span class="text-gray-300">Esc</span> to close.
295
  </div>
296
  </div>
297
  </div>
298
 
 
299
  <div class="relative rounded-2xl border border-gray-800 bg-gray-900/30 overflow-hidden">
300
  <div class="px-6 py-5 border-b border-gray-800/60">
301
  <div class="flex items-start justify-between gap-4">
 
311
  </div>
312
 
313
  <div class="p-6 space-y-5 max-h-[560px] overflow-auto thin-scroll">
314
+ <div id="dossier-body" class="text-sm text-gray-300 leading-relaxed"></div>
 
 
315
 
316
  <div class="rounded-xl border border-gray-800 bg-black/20 p-4">
317
  <div class="text-xs text-gray-400 uppercase tracking-wider mb-2">Evidence Capsule</div>
318
+ <ul id="dossier-evidence" class="text-sm text-gray-300 space-y-1"></ul>
 
 
319
  </div>
320
 
321
  <div class="flex flex-col sm:flex-row gap-3">
 
329
  </button>
330
  </div>
331
 
332
+ <div id="dossier-meta" class="text-xs text-gray-500"></div>
 
 
333
  </div>
334
  </div>
335
 
 
337
  </div>
338
  </div>
339
 
340
+ <script src="assets/site.js"></script>
341
  <script>
342
+ document.addEventListener('DOMContentLoaded', () => {
343
+ SilentPattern.initVanta();
344
+ SilentPattern.setupAccessModal();
345
+
346
+ const DOSSIERS = {
347
+ start: {
348
+ title: "Start Here",
349
+ subtitle: "Return to the main interface",
350
+ status: "ACTIVE",
351
+ body: "SILENTPATTERN is presented as a lab interface: minimal surface, deep artifacts. The index is the entrypoint.",
352
+ evidence: ["Public entry layer", "Dossiers reveal depth", "Controlled demos by access"],
353
+ primary: { label: "Go to Index", action: () => { window.location.href = "index.html"; } },
354
+ secondary: { label: "Research", action: () => { window.location.href = "research.html"; } },
355
+ updated: "—"
356
+ },
357
+ programs: {
358
+ title: "Programs",
359
+ subtitle: "Program Bay dossiers",
360
+ status: "ACTIVE",
361
+ body: "This page collects program dossiers. Each dossier should be expanded over time with explicit protocols and evaluation artifacts.",
362
+ evidence: ["MCAP · CHAI · Quantum Lambda", "AI Scientist", "Agentic Workforce"],
363
+ primary: { label: "Close Navigator", action: () => SilentPattern.toggleModal(document.getElementById('lab-navigator'), false) },
364
+ secondary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
365
+ updated: "—"
366
+ },
367
+ console: {
368
+ title: "Console",
369
+ subtitle: "Controlled interaction channel",
370
+ status: "DRAFT",
371
+ body: "Use the Console for structured requests. Keep model access server-side and export transcripts for auditability.",
372
+ evidence: ["No client-side secrets", "Policy + logging server-side", "Exportable transcripts"],
373
+ primary: { label: "Open Console", action: () => { window.location.href = "chat.html"; } },
374
+ secondary: { label: "Close Navigator", action: () => SilentPattern.toggleModal(document.getElementById('lab-navigator'), false) },
375
+ updated: "—"
376
+ },
377
+ research: {
378
+ title: "Research",
379
+ subtitle: "Notes and briefs",
380
+ status: "DRAFT",
381
+ body: "Research artifacts should keep protocols and uncertainty explicit. This page should host reproducibility hooks and failure modes.",
382
+ evidence: ["Evaluation artifacts", "Reproducibility hooks", "Conservative external wording"],
383
+ primary: { label: "Open Research", action: () => { window.location.href = "research.html"; } },
384
+ secondary: { label: "Contact", action: () => { window.location.href = "contact.html"; } },
385
+ updated: "—"
386
+ },
387
+ contact: {
388
+ title: "Contact",
389
+ subtitle: "Direct channel",
390
+ status: "ACTIVE",
391
+ body: "Use Contact for coordination, partnerships, and qualified inquiries.",
392
+ evidence: ["Curated inbound", "Clear scope alignment", "Responsible scaling"],
393
+ primary: { label: "Open Contact", action: () => { window.location.href = "contact.html"; } },
394
+ secondary: { label: "Request Access", action: () => { SilentPattern.toggleModal(document.getElementById('lab-navigator'), false); document.getElementById('access-btn').click(); } },
395
+ updated: "—"
396
+ },
397
+ access: {
398
+ title: "Access",
399
+ subtitle: "Curated entry",
400
+ status: "ACTIVE",
401
+ body: "Access is curated for controlled evaluation: qualified users, high-signal feedback, and responsible iteration.",
402
+ evidence: ["Application-based", "Segmented by intent", "Controlled demos"],
403
+ primary: { label: "Request Access", action: () => { SilentPattern.toggleModal(document.getElementById('lab-navigator'), false); document.getElementById('access-btn').click(); } },
404
+ secondary: { label: "Contact", action: () => { window.location.href = "contact.html"; } },
405
+ updated: "—"
406
  }
407
+ };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
408
 
409
+ SilentPattern.setupLabNavigator(DOSSIERS, 'programs');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
410
  });
 
 
 
 
 
 
 
 
 
 
 
411
  </script>
412
  </body>
413
  </html>