nandi.uk
This repository has no description
30 kB
1164 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: 320px;
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 .pds-link {
868 color: var(--accent);
869 text-decoration: none;
870 font-size: 0.8rem;
871 }
872 .pds-link:hover { text-decoration: underline; }
873 .island-section {
874 margin-bottom: 1.5rem;
875 }
876 .island-section h3 {
877 font-size: 0.9375rem;
878 margin-bottom: 0.75rem;
879 }
880 .island-edge-detail {
881 display: flex;
882 align-items: center;
883 gap: 0.5rem;
884 flex-wrap: wrap;
885 padding: 0.375rem 0;
886 font-size: 0.8125rem;
887 border-bottom: 1px solid var(--border);
888 }
889 .island-edge-detail:last-child { border-bottom: none; }
890 .edge-source, .edge-target {
891 color: var(--accent);
892 overflow: hidden;
893 text-overflow: ellipsis;
894 white-space: nowrap;
895 max-width: 200px;
896 }
897 .edge-note {
898 color: var(--text-muted);
899 font-size: 0.6875rem;
900 flex: 1;
901 min-width: 100px;
902 overflow: hidden;
903 text-overflow: ellipsis;
904 white-space: nowrap;
905 }
906 .edge-handle {
907 color: var(--text-muted);
908 font-size: 0.625rem;
909 flex-shrink: 0;
910 }
911 .island-actions {
912 margin-top: 1.5rem;
913 }
914
915 /* ── Strata prose page ─────────────────────────────────────────── */
916 .strata-page { }
917 .strata-section {
918 margin-bottom: 1.5rem;
919 }
920 .strata-section h3 {
921 font-size: 0.9375rem;
922 margin-bottom: 0.75rem;
923 color: var(--text-muted);
924 }
925 .strata-relationships {
926 display: flex;
927 flex-direction: column;
928 gap: 0.375rem;
929 }
930 .strata-rel-line {
931 font-size: 0.875rem;
932 line-height: 1.6;
933 color: var(--text);
934 padding: 0.25rem 0;
935 }
936 .arrow {
937 font-weight: 600;
938 font-size: 1rem;
939 margin: 0 0.25rem;
940 }
941 .arrow-forward { color: var(--accent); }
942 .arrow-back { color: var(--green); }
943 .arrow-bidi { color: var(--purple); }
944 .arrow-blocked { color: var(--red); }
945 .entity-link {
946 color: var(--accent);
947 text-decoration: none;
948 border-bottom: 1px dotted var(--accent);
949 }
950 .entity-link:hover {
951 color: var(--accent-hover);
952 border-bottom-style: solid;
953 }
954 .analysis-tension {
955 padding: 0.5rem 0.75rem;
956 border-left: 3px solid var(--red);
957 background: rgba(248,81,73,0.05);
958 border-radius: 0 6px 6px 0;
959 margin-bottom: 0.5rem;
960 font-size: 0.8125rem;
961 }
962 .analysis-question {
963 padding: 0.5rem 0.75rem;
964 border-left: 3px solid var(--yellow);
965 background: rgba(210,153,34,0.05);
966 border-radius: 0 6px 6px 0;
967 margin-bottom: 0.5rem;
968 font-size: 0.8125rem;
969 }
970 .synthesis-text {
971 font-size: 0.9375rem;
972 line-height: 1.7;
973 color: var(--text);
974 }
975 .strata-btn.has-strata {
976 background: var(--purple);
977 color: #fff;
978 border-color: var(--purple);
979 }
980 .island-summary-large {
981 font-size: 1.0625rem;
982 line-height: 1.5;
983 color: var(--text);
984 margin-bottom: 0.5rem;
985 }
986 .strata-edges {
987 display: flex;
988 flex-direction: column;
989 gap: 0;
990 }
991 a.strata-edge {
992 display: flex;
993 align-items: center;
994 gap: 0.5rem;
995 flex-wrap: wrap;
996 padding: 0.375rem 0.5rem;
997 font-size: 0.8125rem;
998 border-bottom: 1px solid var(--border);
999 text-decoration: none;
1000 color: var(--text);
1001 transition: background 0.1s;
1002 }
1003 a.strata-edge:hover {
1004 background: var(--surface);
1005 }
1006 a.strata-edge:last-child { border-bottom: none; }
1007 .strata-edge-source, .strata-edge-target {
1008 color: var(--accent);
1009 overflow: hidden;
1010 text-overflow: ellipsis;
1011 white-space: nowrap;
1012 max-width: 60%;
1013 }
1014 .strata-edge-type {
1015 font-size: 0.6875rem;
1016 padding: 0.0625rem 0.375rem;
1017 border-radius: 8px;
1018 background: var(--border);
1019 color: var(--text);
1020 flex-shrink: 0;
1021 }
1022 .strata-edge-note {
1023 color: var(--text-muted);
1024 font-size: 0.6875rem;
1025 overflow: hidden;
1026 text-overflow: ellipsis;
1027 white-space: nowrap;
1028 flex: 1;
1029 min-width: 80px;
1030 }
1031 .strata-edge-handle {
1032 color: var(--text-muted);
1033 font-size: 0.625rem;
1034 flex-shrink: 0;
1035 }
1036
1037 /* ── Island card footer ──────────────────────────────────────── */
1038 .island-card-footer {
1039 display: flex;
1040 justify-content: space-between;
1041 align-items: center;
1042 padding: 0.75rem 1rem;
1043 border-top: 1px solid var(--border);
1044 }
1045 .island-card-footer .island-summary {
1046 margin: 0;
1047 flex: 1;
1048 }
1049 .island-card-footer .strata-btn {
1050 flex-shrink: 0;
1051 margin-left: 1rem;
1052 }
1053
1054 /* ── Theme tags (shared) ─────────────────────────────────────── */
1055 .theme-tags {
1056 display: flex;
1057 flex-wrap: wrap;
1058 gap: 0.375rem;
1059 }
1060 .theme-tag {
1061 padding: 0.25rem 0.625rem;
1062 border-radius: 12px;
1063 background: var(--border);
1064 color: var(--text);
1065 font-size: 0.75rem;
1066 display: inline-flex;
1067 align-items: center;
1068 gap: 0.25rem;
1069 }
1070 .theme-tag[contenteditable] { cursor: text; outline: none; }
1071 .theme-tag[contenteditable]:focus { background: var(--accent); color: #fff; }
1072 .theme-remove {
1073 cursor: pointer;
1074 opacity: 0.4;
1075 font-size: 0.875rem;
1076 line-height: 1;
1077 }
1078 .theme-remove:hover { opacity: 1; color: #f85149; }
1079 .theme-add {
1080 display: inline-flex;
1081 align-items: center;
1082 justify-content: center;
1083 width: 1.5rem;
1084 height: 1.5rem;
1085 border-radius: 12px;
1086 background: var(--border);
1087 color: var(--text-muted);
1088 font-size: 0.875rem;
1089 cursor: pointer;
1090 transition: all 0.15s;
1091 }
1092 .theme-add:hover { background: var(--accent); color: #fff; }
1093
1094 /* Editable fields */
1095 .editable { cursor: text; border-radius: 4px; transition: outline 0.15s; outline: 1px solid transparent; }
1096 .editable:focus { outline: 1px solid var(--accent); background: rgba(88,166,255,0.05); }
1097 .edit-hint { opacity: 0; font-size: 0.75rem; color: var(--text-muted); cursor: pointer; transition: opacity 0.15s; }
1098 .strata-section:hover .edit-hint { opacity: 1; }
1099 .editable-list .list-add {
1100 color: var(--text-muted);
1101 font-size: 0.8rem;
1102 cursor: pointer;
1103 padding: 0.25rem 0;
1104 opacity: 0.6;
1105 transition: opacity 0.15s;
1106 }
1107 .editable-list .list-add:hover { opacity: 1; }
1108
1109 /* Diff highlight — brief glow on regenerated fields */
1110 .field-changed {
1111 animation: field-glow 2s ease-out;
1112 }
1113 @keyframes field-glow {
1114 0% { background: rgba(188,140,255,0.3); }
1115 100% { background: transparent; }
1116 }
1117
1118 /* Strata action bar */
1119 .strata-actions {
1120 display: flex;
1121 align-items: center;
1122 gap: 0.75rem;
1123 margin: 1.5rem 0;
1124 padding-top: 1rem;
1125 border-top: 1px solid var(--border);
1126 }
1127 .regenerate-btn {
1128 background: var(--accent);
1129 border-color: var(--accent);
1130 color: #fff;
1131 font-size: 0.75rem;
1132 padding: 0.375rem 1rem;
1133 }
1134 .regenerate-btn:hover { background: #79c0ff; border-color: #79c0ff; }
1135 .regenerate-btn:disabled { opacity: 0.5; cursor: wait; }
1136 .save-btn {
1137 background: #238636;
1138 border-color: #238636;
1139 color: #fff;
1140 font-size: 0.75rem;
1141 padding: 0.375rem 1rem;
1142 }
1143 .save-btn:hover { background: #2ea043; border-color: #2ea043; }
1144 .save-btn:disabled { opacity: 0.5; cursor: wait; }
1145 .save-status { font-size: 0.8rem; color: var(--text-muted); }
1146 .hidden { display: none !important; }
1147
1148 /* Hot edges */
1149 .highlights-count { font-size: 0.7rem; color: var(--accent); font-weight: 400; margin-left: 0.25rem; }
1150 .hot-edge { border-left: 2px solid var(--accent); padding-left: 0.5rem; }
1151 .hot-badge { color: var(--accent); font-size: 0.75rem; margin-right: 0.25rem; }
1152 </style>
1153</head>
1154<body>
1155 <header>
1156 <h1>Stigmergic</h1>
1157 <p class="header-blurb">All content derived from <code>network.cosmik.connection</code> records on the AT Protocol</p>
1158 </header>
1159 <main>
1160 <div id="page-content"></div>
1161 </main>
1162 <script src="/app.js"></script>
1163</body>
1164</html>`;