nandi.uk
This repository has no description
27 kB
1073 lines
1export const LANDING_PAGE = `<!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>Stigmergic</title>
7 <style>
8 :root {
9 --bg: #0d1117;
10 --surface: #161b22;
11 --border: #30363d;
12 --text: #e6edf3;
13 --text-muted: #8b949e;
14 --accent: #58a6ff;
15 --accent-hover: #79c0ff;
16 --green: #3fb950;
17 --red: #f85149;
18 --yellow: #d29922;
19 --purple: #bc8cff;
20 }
21 * { margin: 0; padding: 0; box-sizing: border-box; }
22 body {
23 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
24 background: var(--bg);
25 color: var(--text);
26 line-height: 1.6;
27 min-height: 100vh;
28 }
29 header {
30 border-bottom: 1px solid var(--border);
31 padding: 1rem 2rem;
32 display: flex;
33 align-items: baseline;
34 gap: 1.5rem;
35 flex-wrap: wrap;
36 }
37 header h1 {
38 font-size: 1.25rem;
39 font-weight: 600;
40 color: var(--accent);
41 }
42 .header-blurb {
43 font-size: 0.75rem;
44 color: var(--text-muted);
45 }
46 .header-blurb code {
47 font-size: 0.6875rem;
48 background: var(--surface);
49 padding: 0.125rem 0.375rem;
50 border-radius: 4px;
51 }
52 header nav { display: flex; gap: 1rem; align-items: center; }
53 header nav a, header nav button {
54 color: var(--text-muted);
55 text-decoration: none;
56 font-size: 0.875rem;
57 background: none;
58 border: none;
59 cursor: pointer;
60 padding: 0.25rem 0.75rem;
61 border-radius: 6px;
62 }
63 header nav a:hover, header nav button:hover {
64 color: var(--text);
65 background: var(--surface);
66 }
67 main {
68 max-width: 960px;
69 margin: 0 auto;
70 padding: 2rem;
71 }
72 .search-bar {
73 display: flex;
74 max-width: 480px;
75 margin: 0 auto 2rem;
76 }
77 .search-bar input {
78 flex: 1;
79 padding: 0.625rem 1rem;
80 border: 1px solid var(--border);
81 border-radius: 6px 0 0 6px;
82 background: var(--surface);
83 color: var(--text);
84 font-size: 0.875rem;
85 outline: none;
86 }
87 .search-bar input:focus { border-color: var(--accent); }
88 .search-bar button {
89 padding: 0.625rem 1.25rem;
90 background: var(--accent);
91 color: #fff;
92 border: none;
93 border-radius: 0 6px 6px 0;
94 cursor: pointer;
95 font-size: 0.875rem;
96 font-weight: 500;
97 }
98 .search-bar button:hover { background: var(--accent-hover); }
99 .search-hint {
100 text-align: center;
101 color: var(--text-muted);
102 font-size: 0.75rem;
103 margin-bottom: 2rem;
104 }
105
106 /* Explore layout */
107 .explore-page {
108 display: grid;
109 grid-template-columns: 1fr 240px;
110 gap: 2rem;
111 }
112 .explore-header {
113 display: flex;
114 justify-content: space-between;
115 align-items: center;
116 margin-bottom: 1rem;
117 }
118 .explore-header h2 {
119 font-size: 1.25rem;
120 color: var(--text);
121 }
122 .explore-sidebar h3 {
123 font-size: 0.875rem;
124 color: var(--text-muted);
125 margin-bottom: 0.75rem;
126 }
127 .collections-sidebar {
128 display: flex;
129 flex-direction: column;
130 gap: 0.5rem;
131 }
132 .sidebar-collection {
133 display: flex;
134 flex-direction: column;
135 padding: 0.5rem 0.75rem;
136 border-radius: 6px;
137 text-decoration: none;
138 color: inherit;
139 border: 1px solid transparent;
140 }
141 .sidebar-collection:hover {
142 background: var(--surface);
143 border-color: var(--border);
144 }
145 .sidebar-name { font-size: 0.8125rem; font-weight: 500; }
146 .sidebar-handle { font-size: 0.6875rem; color: var(--text-muted); }
147 .sidebar-empty { color: var(--text-muted); font-size: 0.75rem; }
148
149 /* Face feed */
150 .face-feed {
151 display: flex;
152 flex-direction: column;
153 gap: 1rem;
154 }
155 .face-card {
156 background: var(--surface);
157 border: 1px solid var(--border);
158 border-radius: 10px;
159 padding: 1rem 1.25rem;
160 transition: border-color 0.15s;
161 }
162 .face-card:hover { border-color: var(--accent); }
163 .face-top {
164 display: flex;
165 justify-content: space-between;
166 align-items: flex-start;
167 gap: 0.75rem;
168 margin-bottom: 0.5rem;
169 }
170 .face-header {
171 display: flex;
172 align-items: flex-start;
173 gap: 0.625rem;
174 text-decoration: none;
175 color: inherit;
176 flex: 1;
177 min-width: 0;
178 }
179 .face-header:hover .face-title { color: var(--accent); }
180 .face-favicon {
181 width: 20px;
182 height: 20px;
183 border-radius: 3px;
184 margin-top: 2px;
185 flex-shrink: 0;
186 }
187 .face-title-block { min-width: 0; }
188 .face-title {
189 font-size: 0.9375rem;
190 font-weight: 600;
191 color: var(--text);
192 line-height: 1.3;
193 overflow: hidden;
194 text-overflow: ellipsis;
195 white-space: nowrap;
196 }
197 .face-site {
198 font-size: 0.6875rem;
199 color: var(--text-muted);
200 }
201 .face-actions {
202 display: flex;
203 align-items: center;
204 gap: 0.5rem;
205 flex-shrink: 0;
206 }
207 .face-degree {
208 font-size: 0.625rem;
209 padding: 0.125rem 0.375rem;
210 border-radius: 8px;
211 background: var(--border);
212 color: var(--text-muted);
213 font-weight: 600;
214 }
215 .face-action-btn {
216 color: var(--text-muted);
217 font-size: 0.6875rem;
218 text-decoration: none;
219 }
220 .face-action-btn:hover { color: var(--accent); }
221 .face-desc {
222 font-size: 0.8125rem;
223 color: var(--text-muted);
224 line-height: 1.4;
225 margin-bottom: 0.75rem;
226 overflow: hidden;
227 text-overflow: ellipsis;
228 display: -webkit-box;
229 -webkit-line-clamp: 2;
230 -webkit-box-orient: vertical;
231 }
232
233 /* Face edges */
234 .face-edges {
235 display: flex;
236 gap: 1rem;
237 flex-wrap: wrap;
238 }
239 .face-neighbors {
240 flex: 1;
241 min-width: 200px;
242 }
243 .face-neighbors.incoming {
244 border-left: 2px solid var(--green);
245 padding-left: 0.75rem;
246 }
247 .face-neighbors.outgoing {
248 border-left: 2px solid var(--accent);
249 padding-left: 0.75rem;
250 }
251 .neighbors-label {
252 font-size: 0.625rem;
253 color: var(--text-muted);
254 text-transform: uppercase;
255 letter-spacing: 0.05em;
256 margin-bottom: 0.375rem;
257 font-weight: 600;
258 }
259 .face-neighbors.incoming .neighbors-label { color: var(--green); }
260 .face-neighbors.outgoing .neighbors-label { color: var(--accent); }
261 .neighbors-list {
262 display: flex;
263 flex-direction: column;
264 gap: 0.25rem;
265 }
266 .neighbor-pill {
267 display: flex;
268 align-items: center;
269 gap: 0.375rem;
270 text-decoration: none;
271 color: inherit;
272 padding: 0.25rem 0.5rem;
273 border-radius: 6px;
274 background: var(--bg);
275 border: 1px solid transparent;
276 transition: border-color 0.1s;
277 }
278 .neighbor-pill:hover { border-color: var(--border); }
279 .neighbor-pill:hover .pill-title { color: var(--accent); }
280 .pill-favicon {
281 width: 14px;
282 height: 14px;
283 border-radius: 2px;
284 flex-shrink: 0;
285 }
286 .pill-type {
287 font-size: 0.625rem;
288 color: var(--text-muted);
289 flex-shrink: 0;
290 }
291 .pill-title {
292 font-size: 0.75rem;
293 color: var(--text);
294 overflow: hidden;
295 text-overflow: ellipsis;
296 white-space: nowrap;
297 }
298
299 /* Connection items (resource page) */
300 .connection-item {
301 background: var(--surface);
302 border: 1px solid var(--border);
303 border-radius: 8px;
304 padding: 1rem 1.25rem;
305 transition: border-color 0.15s;
306 }
307 .connection-item:hover { border-color: var(--accent); }
308 .connection-item.compact {
309 padding: 0.5rem 0.75rem;
310 display: flex;
311 align-items: center;
312 gap: 0.5rem;
313 flex-wrap: wrap;
314 background: var(--bg);
315 border-radius: 6px;
316 }
317 .conn-type-badge {
318 font-size: 0.6875rem;
319 padding: 0.125rem 0.5rem;
320 border-radius: 12px;
321 background: var(--border);
322 color: var(--text);
323 }
324 .conn-uri {
325 color: var(--accent);
326 text-decoration: none;
327 font-size: 0.875rem;
328 font-weight: 500;
329 word-break: break-all;
330 }
331 .conn-uri:hover { text-decoration: underline; }
332 .conn-site {
333 font-size: 0.625rem;
334 color: var(--text-muted);
335 }
336 .conn-note-inline {
337 color: var(--text-muted);
338 font-size: 0.75rem;
339 }
340 .conn-handle-inline {
341 color: var(--text-muted);
342 font-size: 0.6875rem;
343 margin-left: auto;
344 }
345
346 /* Resource page header card */
347 .resource-header-card {
348 display: flex;
349 gap: 1rem;
350 padding: 1.25rem;
351 background: var(--surface);
352 border: 1px solid var(--border);
353 border-radius: 8px;
354 margin-bottom: 1rem;
355 }
356 .resource-favicon {
357 width: 32px;
358 height: 32px;
359 border-radius: 4px;
360 flex-shrink: 0;
361 }
362 .resource-meta { min-width: 0; }
363 .resource-title {
364 font-size: 1.125rem;
365 font-weight: 600;
366 color: var(--text);
367 margin-bottom: 0.25rem;
368 line-height: 1.3;
369 }
370 .resource-site {
371 font-size: 0.75rem;
372 color: var(--text-muted);
373 margin-bottom: 0.375rem;
374 }
375 .resource-desc {
376 font-size: 0.8125rem;
377 color: var(--text-muted);
378 line-height: 1.4;
379 }
380
381 /* Strata button */
382 .strata-btn {
383 background: none;
384 border: 1px solid var(--purple);
385 color: var(--purple);
386 font-size: 0.6875rem;
387 padding: 0.125rem 0.5rem;
388 border-radius: 4px;
389 cursor: pointer;
390 font-weight: 500;
391 }
392 .strata-btn:hover { background: var(--purple); color: #fff; }
393 .strata-btn.compact {
394 font-size: 0.625rem;
395 padding: 0.0625rem 0.375rem;
396 margin-left: auto;
397 }
398
399 /* Modal */
400 .modal-overlay {
401 position: fixed;
402 top: 0; left: 0; right: 0; bottom: 0;
403 background: rgba(0,0,0,0.6);
404 display: flex;
405 align-items: center;
406 justify-content: center;
407 z-index: 1000;
408 }
409 .modal-content {
410 background: var(--surface);
411 border: 1px solid var(--border);
412 border-radius: 12px;
413 max-width: 560px;
414 width: 90%;
415 max-height: 80vh;
416 overflow-y: auto;
417 padding: 1.5rem;
418 }
419 .modal-wide {
420 max-width: 720px;
421 }
422 .modal-header {
423 display: flex;
424 justify-content: space-between;
425 align-items: center;
426 margin-bottom: 1rem;
427 }
428 .modal-header h2 {
429 font-size: 1rem;
430 color: var(--purple);
431 }
432 .modal-close {
433 background: none;
434 border: none;
435 color: var(--text-muted);
436 font-size: 1.5rem;
437 cursor: pointer;
438 line-height: 1;
439 }
440 .modal-close:hover { color: var(--text); }
441
442 /* Analysis results */
443 .analysis-loading {
444 text-align: center;
445 color: var(--text-muted);
446 padding: 2rem;
447 }
448 .spinner {
449 width: 24px;
450 height: 24px;
451 border: 2px solid var(--border);
452 border-top-color: var(--purple);
453 border-radius: 50%;
454 animation: spin 0.8s linear infinite;
455 margin: 0 auto 0.75rem;
456 }
457 @keyframes spin { to { transform: rotate(360deg); } }
458
459 .analysis-face-header {
460 display: flex;
461 justify-content: space-between;
462 align-items: flex-start;
463 margin-bottom: 0.5rem;
464 }
465 .analysis-face-title {
466 font-size: 1.0625rem;
467 font-weight: 600;
468 color: var(--text);
469 line-height: 1.3;
470 flex: 1;
471 min-width: 0;
472 }
473 .analysis-face-degree {
474 font-size: 0.6875rem;
475 padding: 0.125rem 0.5rem;
476 border-radius: 8px;
477 background: var(--border);
478 color: var(--text-muted);
479 font-weight: 600;
480 flex-shrink: 0;
481 margin-left: 0.75rem;
482 }
483 .analysis-face-desc {
484 font-size: 0.8125rem;
485 color: var(--text-muted);
486 line-height: 1.4;
487 margin-bottom: 0.75rem;
488 }
489 .analysis-type-badges {
490 display: flex;
491 flex-wrap: wrap;
492 gap: 0.375rem;
493 margin-bottom: 0.75rem;
494 }
495 .type-badge {
496 font-size: 0.625rem;
497 padding: 0.125rem 0.5rem;
498 border-radius: 8px;
499 background: var(--border);
500 color: var(--text);
501 }
502 .analysis-domains {
503 display: flex;
504 flex-wrap: wrap;
505 gap: 0.25rem;
506 margin-bottom: 1rem;
507 }
508 .domain-tag {
509 font-size: 0.625rem;
510 padding: 0.0625rem 0.375rem;
511 border-radius: 8px;
512 background: var(--bg);
513 border: 1px solid var(--border);
514 color: var(--text-muted);
515 }
516
517 .analysis-edges {
518 display: grid;
519 grid-template-columns: 1fr 1fr;
520 gap: 1rem;
521 margin-bottom: 1rem;
522 }
523 .analysis-neighbors h4 {
524 font-size: 0.6875rem;
525 text-transform: uppercase;
526 letter-spacing: 0.05em;
527 margin-bottom: 0.375rem;
528 font-weight: 600;
529 }
530 .analysis-neighbors.incoming h4 { color: var(--green); }
531 .analysis-neighbors.outgoing h4 { color: var(--accent); }
532 .analysis-neighbor {
533 display: flex;
534 align-items: center;
535 gap: 0.375rem;
536 padding: 0.25rem 0;
537 font-size: 0.75rem;
538 }
539 .neighbor-type {
540 color: var(--text-muted);
541 font-size: 0.625rem;
542 flex-shrink: 0;
543 }
544 .neighbor-link {
545 color: var(--accent);
546 text-decoration: none;
547 overflow: hidden;
548 text-overflow: ellipsis;
549 white-space: nowrap;
550 }
551 .neighbor-link:hover { text-decoration: underline; }
552 .neighbor-note {
553 color: var(--text-muted);
554 font-size: 0.625rem;
555 overflow: hidden;
556 text-overflow: ellipsis;
557 white-space: nowrap;
558 }
559
560 .analysis-section {
561 margin-bottom: 1.25rem;
562 }
563 .analysis-section h3 {
564 font-size: 0.875rem;
565 color: var(--text-muted);
566 margin-bottom: 0.5rem;
567 }
568 .citation-mini {
569 display: flex;
570 align-items: center;
571 gap: 0.5rem;
572 padding: 0.25rem 0;
573 }
574 .citation-mini-title {
575 font-size: 0.75rem;
576 color: var(--text);
577 }
578 .citation-mini-domain {
579 font-size: 0.625rem;
580 color: var(--text-muted);
581 }
582 .analysis-error {
583 color: var(--red);
584 padding: 1rem;
585 text-align: center;
586 }
587
588 /* Resource page */
589 .resource-page { }
590 .resource-uri {
591 font-size: 1rem;
592 color: var(--accent);
593 word-break: break-all;
594 margin-bottom: 1rem;
595 padding: 0.75rem 1rem;
596 background: var(--surface);
597 border: 1px solid var(--border);
598 border-radius: 6px;
599 }
600 .resource-actions {
601 display: flex;
602 gap: 0.75rem;
603 margin-bottom: 2rem;
604 }
605 .yoneda-section {
606 margin-bottom: 2rem;
607 }
608 .yoneda-section h3 {
609 font-size: 1rem;
610 margin-bottom: 0.75rem;
611 }
612 .yoneda-hint {
613 font-size: 0.6875rem;
614 color: var(--text-muted);
615 font-weight: 400;
616 }
617 .connection-list {
618 display: flex;
619 flex-direction: column;
620 gap: 0.5rem;
621 }
622
623 /* Graph page */
624 .graph-page { }
625 .graph-meta {
626 color: var(--text-muted);
627 font-size: 0.875rem;
628 margin-bottom: 2rem;
629 }
630 .graph-connections, .graph-nodes {
631 margin-bottom: 2rem;
632 }
633 .graph-connections h3, .graph-nodes h3 {
634 font-size: 1rem;
635 margin-bottom: 0.75rem;
636 }
637 .graph-node {
638 display: inline-block;
639 padding: 0.375rem 0.75rem;
640 margin: 0.25rem;
641 background: var(--surface);
642 border: 1px solid var(--border);
643 border-radius: 6px;
644 color: var(--accent);
645 text-decoration: none;
646 font-size: 0.8125rem;
647 }
648 .graph-node:hover { border-color: var(--accent); }
649
650 /* Connect page */
651 .connect-page { max-width: 600px; }
652 .connect-hint {
653 color: var(--text-muted);
654 font-size: 0.875rem;
655 margin-bottom: 1.5rem;
656 }
657 .connect-form {
658 display: flex;
659 flex-direction: column;
660 gap: 1rem;
661 }
662 .form-field {
663 display: flex;
664 flex-direction: column;
665 gap: 0.25rem;
666 }
667 .form-field label {
668 font-size: 0.875rem;
669 font-weight: 500;
670 }
671 .form-field input, .form-field textarea, .form-field select {
672 padding: 0.625rem 0.75rem;
673 border: 1px solid var(--border);
674 border-radius: 6px;
675 background: var(--surface);
676 color: var(--text);
677 font-size: 0.875rem;
678 outline: none;
679 font-family: inherit;
680 }
681 .form-field input:focus, .form-field textarea:focus, .form-field select:focus {
682 border-color: var(--accent);
683 }
684 .form-field textarea { resize: vertical; min-height: 80px; }
685 .form-actions {
686 display: flex;
687 gap: 0.75rem;
688 }
689 .action-btn {
690 display: inline-block;
691 padding: 0.5rem 1rem;
692 border-radius: 6px;
693 font-size: 0.875rem;
694 font-weight: 500;
695 text-decoration: none;
696 cursor: pointer;
697 background: var(--surface);
698 border: 1px solid var(--border);
699 color: var(--text);
700 }
701 .action-btn:hover { border-color: var(--accent); color: var(--accent); }
702 .action-btn.primary {
703 background: var(--accent);
704 border-color: var(--accent);
705 color: #fff;
706 }
707 .action-btn.primary:hover { background: var(--accent-hover); }
708 .connect-result {
709 margin-top: 1rem;
710 }
711 .connect-result pre {
712 background: var(--surface);
713 border: 1px solid var(--border);
714 border-radius: 6px;
715 padding: 1rem;
716 font-size: 0.8125rem;
717 overflow-x: auto;
718 }
719 .preview-hint {
720 color: var(--text-muted);
721 font-size: 0.75rem;
722 margin-top: 0.5rem;
723 }
724 .pending { color: var(--yellow); }
725
726 /* Shared */
727 .back-link {
728 color: var(--accent);
729 text-decoration: none;
730 font-size: 0.875rem;
731 display: inline-block;
732 margin-right: 1rem;
733 margin-bottom: 1rem;
734 }
735 .back-link:hover { text-decoration: underline; }
736 .empty {
737 text-align: center;
738 padding: 2rem;
739 color: var(--text-muted);
740 }
741 #auth-status { display: none; }
742 #auth-status.visible { display: inline; }
743 #login-btn { display: inline; }
744 #login-btn.hidden { display: none; }
745
746 /* ── Islands feed ─────────────────────────────────────────────── */
747 .islands-feed {
748 display: flex;
749 flex-direction: column;
750 gap: 1rem;
751 }
752 .island-card {
753 background: var(--surface);
754 border: 1px solid var(--border);
755 border-radius: 10px;
756 padding: 1rem 1.25rem;
757 transition: border-color 0.15s;
758 }
759 .island-card:hover { border-color: var(--accent); }
760 .island-graph {
761 width: 100%;
762 height: 200px;
763 border-radius: 6px 6px 0 0;
764 background: var(--bg);
765 cursor: default;
766 }
767 .island-summary {
768 font-size: 0.85rem;
769 color: var(--fg-muted);
770 line-height: 1.4;
771 margin: 0;
772 padding: 0.75rem 1rem;
773 border-top: 1px solid var(--border);
774 }
775 .island-graph-large {
776 width: 100%;
777 height: 400px;
778 border-radius: 8px;
779 background: var(--bg);
780 margin-bottom: 1.5rem;
781 border: 1px solid var(--border);
782 cursor: default;
783 }
784 .island-header {
785 display: flex;
786 justify-content: space-between;
787 align-items: center;
788 margin-bottom: 0.75rem;
789 }
790 .island-size {
791 font-size: 0.75rem;
792 color: var(--text-muted);
793 font-weight: 500;
794 }
795 .island-vertices {
796 display: flex;
797 flex-direction: column;
798 gap: 0.375rem;
799 margin-bottom: 0.5rem;
800 }
801 .island-vertex {
802 display: flex;
803 flex-direction: column;
804 gap: 0.125rem;
805 }
806 .vertex-link {
807 color: var(--accent);
808 text-decoration: none;
809 font-size: 0.875rem;
810 font-weight: 500;
811 overflow: hidden;
812 text-overflow: ellipsis;
813 white-space: nowrap;
814 }
815 .vertex-link:hover { text-decoration: underline; }
816 .vertex-title {
817 font-size: 0.875rem;
818 font-weight: 500;
819 color: var(--text);
820 overflow: hidden;
821 text-overflow: ellipsis;
822 white-space: nowrap;
823 }
824 .vertex-desc {
825 font-size: 0.75rem;
826 color: var(--text-muted);
827 overflow: hidden;
828 text-overflow: ellipsis;
829 white-space: nowrap;
830 }
831 .island-more {
832 font-size: 0.6875rem;
833 color: var(--text-muted);
834 margin-bottom: 0.5rem;
835 }
836 .island-edge-types {
837 display: flex;
838 flex-wrap: wrap;
839 gap: 0.375rem;
840 margin-bottom: 0.5rem;
841 }
842 .edge-type-badge {
843 font-size: 0.625rem;
844 padding: 0.125rem 0.5rem;
845 border-radius: 8px;
846 background: var(--border);
847 color: var(--text);
848 }
849 .island-notes {
850 display: flex;
851 flex-direction: column;
852 gap: 0.25rem;
853 }
854 .island-note {
855 font-size: 0.75rem;
856 color: var(--text-muted);
857 font-style: italic;
858 }
859
860 /* ── Island detail page ───────────────────────────────────────── */
861 .island-detail { }
862 .island-meta {
863 color: var(--text-muted);
864 font-size: 0.875rem;
865 margin-bottom: 1.5rem;
866 }
867 .island-section {
868 margin-bottom: 1.5rem;
869 }
870 .island-section h3 {
871 font-size: 0.9375rem;
872 margin-bottom: 0.75rem;
873 }
874 .island-edge-detail {
875 display: flex;
876 align-items: center;
877 gap: 0.5rem;
878 flex-wrap: wrap;
879 padding: 0.375rem 0;
880 font-size: 0.8125rem;
881 border-bottom: 1px solid var(--border);
882 }
883 .island-edge-detail:last-child { border-bottom: none; }
884 .edge-source, .edge-target {
885 color: var(--accent);
886 overflow: hidden;
887 text-overflow: ellipsis;
888 white-space: nowrap;
889 max-width: 200px;
890 }
891 .edge-note {
892 color: var(--text-muted);
893 font-size: 0.6875rem;
894 flex: 1;
895 min-width: 100px;
896 overflow: hidden;
897 text-overflow: ellipsis;
898 white-space: nowrap;
899 }
900 .edge-handle {
901 color: var(--text-muted);
902 font-size: 0.625rem;
903 flex-shrink: 0;
904 }
905 .island-actions {
906 margin-top: 1.5rem;
907 }
908
909 /* ── Strata prose page ─────────────────────────────────────────── */
910 .strata-page { }
911 .strata-section {
912 margin-bottom: 1.5rem;
913 }
914 .strata-section h3 {
915 font-size: 0.9375rem;
916 margin-bottom: 0.75rem;
917 color: var(--text-muted);
918 }
919 .strata-relationships {
920 display: flex;
921 flex-direction: column;
922 gap: 0.375rem;
923 }
924 .strata-rel-line {
925 font-size: 0.875rem;
926 line-height: 1.6;
927 color: var(--text);
928 padding: 0.25rem 0;
929 }
930 .arrow {
931 font-weight: 600;
932 font-size: 1rem;
933 margin: 0 0.25rem;
934 }
935 .arrow-forward { color: var(--accent); }
936 .arrow-back { color: var(--green); }
937 .arrow-bidi { color: var(--purple); }
938 .arrow-blocked { color: var(--red); }
939 .entity-link {
940 color: var(--accent);
941 text-decoration: none;
942 border-bottom: 1px dotted var(--accent);
943 }
944 .entity-link:hover {
945 color: var(--accent-hover);
946 border-bottom-style: solid;
947 }
948 .analysis-tension {
949 padding: 0.5rem 0.75rem;
950 border-left: 3px solid var(--red);
951 background: rgba(248,81,73,0.05);
952 border-radius: 0 6px 6px 0;
953 margin-bottom: 0.5rem;
954 font-size: 0.8125rem;
955 }
956 .analysis-question {
957 padding: 0.5rem 0.75rem;
958 border-left: 3px solid var(--yellow);
959 background: rgba(210,153,34,0.05);
960 border-radius: 0 6px 6px 0;
961 margin-bottom: 0.5rem;
962 font-size: 0.8125rem;
963 }
964 .synthesis-text {
965 font-size: 0.9375rem;
966 line-height: 1.7;
967 color: var(--text);
968 }
969 .strata-btn.has-strata {
970 background: var(--purple);
971 color: #fff;
972 border-color: var(--purple);
973 }
974 .island-summary-large {
975 font-size: 1.0625rem;
976 line-height: 1.5;
977 color: var(--text);
978 margin-bottom: 0.5rem;
979 }
980 .strata-edges {
981 display: flex;
982 flex-direction: column;
983 gap: 0;
984 }
985 a.strata-edge {
986 display: flex;
987 align-items: center;
988 gap: 0.5rem;
989 flex-wrap: wrap;
990 padding: 0.375rem 0.5rem;
991 font-size: 0.8125rem;
992 border-bottom: 1px solid var(--border);
993 text-decoration: none;
994 color: var(--text);
995 transition: background 0.1s;
996 }
997 a.strata-edge:hover {
998 background: var(--surface);
999 }
1000 a.strata-edge:last-child { border-bottom: none; }
1001 .strata-edge-source, .strata-edge-target {
1002 color: var(--accent);
1003 overflow: hidden;
1004 text-overflow: ellipsis;
1005 white-space: nowrap;
1006 max-width: 200px;
1007 }
1008 .strata-edge-type {
1009 font-size: 0.6875rem;
1010 padding: 0.0625rem 0.375rem;
1011 border-radius: 8px;
1012 background: var(--border);
1013 color: var(--text);
1014 flex-shrink: 0;
1015 }
1016 .strata-edge-note {
1017 color: var(--text-muted);
1018 font-size: 0.6875rem;
1019 overflow: hidden;
1020 text-overflow: ellipsis;
1021 white-space: nowrap;
1022 flex: 1;
1023 min-width: 80px;
1024 }
1025 .strata-edge-handle {
1026 color: var(--text-muted);
1027 font-size: 0.625rem;
1028 flex-shrink: 0;
1029 }
1030
1031 /* ── Island card footer ──────────────────────────────────────── */
1032 .island-card-footer {
1033 display: flex;
1034 justify-content: space-between;
1035 align-items: center;
1036 padding: 0.75rem 1rem;
1037 border-top: 1px solid var(--border);
1038 }
1039 .island-card-footer .island-summary {
1040 margin: 0;
1041 flex: 1;
1042 }
1043 .island-card-footer .strata-btn {
1044 flex-shrink: 0;
1045 margin-left: 1rem;
1046 }
1047
1048 /* ── Theme tags (shared) ─────────────────────────────────────── */
1049 .theme-tags {
1050 display: flex;
1051 flex-wrap: wrap;
1052 gap: 0.375rem;
1053 }
1054 .theme-tag {
1055 padding: 0.25rem 0.625rem;
1056 border-radius: 12px;
1057 background: var(--border);
1058 color: var(--text);
1059 font-size: 0.75rem;
1060 }
1061 </style>
1062</head>
1063<body>
1064 <header>
1065 <h1>Stigmergic</h1>
1066 <p class="header-blurb">All content derived from <code>network.cosmik.connection</code> records on the AT Protocol</p>
1067 </header>
1068 <main>
1069 <div id="page-content"></div>
1070 </main>
1071 <script src="/app.js"></script>
1072</body>
1073</html>`;