@ai-ecoverse/slicc-spectrum 1.3.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -6
- package/dist/{chunk-JASEW37G.js → chunk-2BBOXTOJ.js} +5 -3
- package/dist/chunk-2EPADERK.js +25260 -0
- package/dist/chunk-2EPADERK.js.map +7 -0
- package/dist/{chunk-HBUX7E54.js → chunk-4JUIYZ4Q.js} +4 -4
- package/dist/{chunk-OFQ56DAN.js → chunk-CDYGCBW7.js} +5 -5
- package/dist/{chunk-YPQKCWWG.js → chunk-FXM4K5WL.js} +4 -4
- package/dist/{chunk-I2NMYJ25.js → chunk-H57UPFSK.js} +3 -3
- package/dist/{chunk-4GQ6THC2.js → chunk-JCRICTXR.js} +6 -6
- package/dist/{chunk-6JNYNXUQ.js → chunk-LR5GBIK7.js} +7 -7
- package/dist/{chunk-6N3GZNXH.js → chunk-MJOCPOXZ.js} +8 -8
- package/dist/{chunk-5XWUZJTT.js → chunk-N27WNL5Q.js} +4 -4
- package/dist/chunk-WCSKGA5W.js +30 -0
- package/dist/chunk-WCSKGA5W.js.map +7 -0
- package/dist/chunk-YWO2TNED.js +71 -0
- package/dist/chunk-YWO2TNED.js.map +7 -0
- package/dist/slicc-dummy.js +981 -115
- package/dist/slicc-dummy.js.map +4 -4
- package/dist/slicc-kernel-model.js +379 -0
- package/dist/slicc-kernel-model.js.map +7 -0
- package/dist/slicc-terminal.js +3 -26
- package/dist/slicc-terminal.js.map +3 -3
- package/dist/slicc-ui.js +2638 -2243
- package/dist/slicc-ui.js.map +4 -4
- package/dist/types/app/app.d.ts +5 -1
- package/dist/types/app/files.d.ts +11 -0
- package/dist/types/app/fonts.d.ts +8 -0
- package/dist/types/app/lucide.d.ts +24 -0
- package/dist/types/app/messages.d.ts +2 -1
- package/dist/types/app/panels.d.ts +3 -3
- package/dist/types/app/spectrum.d.ts +2 -0
- package/dist/types/app/sprinkle.d.ts +18 -1
- package/dist/types/kernel/files.d.ts +20 -0
- package/dist/types/kernel/idle.d.ts +51 -0
- package/dist/types/kernel/index.d.ts +17 -0
- package/dist/types/kernel/terminals.d.ts +21 -0
- package/dist/types/kernel.d.ts +7 -0
- package/dist/types/model/types.d.ts +4 -0
- package/package.json +7 -2
- /package/dist/{chunk-JASEW37G.js.map → chunk-2BBOXTOJ.js.map} +0 -0
- /package/dist/{chunk-HBUX7E54.js.map → chunk-4JUIYZ4Q.js.map} +0 -0
- /package/dist/{chunk-OFQ56DAN.js.map → chunk-CDYGCBW7.js.map} +0 -0
- /package/dist/{chunk-YPQKCWWG.js.map → chunk-FXM4K5WL.js.map} +0 -0
- /package/dist/{chunk-5XWUZJTT.js.map → chunk-H57UPFSK.js.map} +0 -0
- /package/dist/{chunk-4GQ6THC2.js.map → chunk-JCRICTXR.js.map} +0 -0
- /package/dist/{chunk-6JNYNXUQ.js.map → chunk-LR5GBIK7.js.map} +0 -0
- /package/dist/{chunk-6N3GZNXH.js.map → chunk-MJOCPOXZ.js.map} +0 -0
- /package/dist/{chunk-I2NMYJ25.js.map → chunk-N27WNL5Q.js.map} +0 -0
package/dist/slicc-dummy.js
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
import {
|
|
2
|
+
DummySettings,
|
|
3
|
+
clock
|
|
4
|
+
} from "./chunk-YWO2TNED.js";
|
|
1
5
|
import {
|
|
2
6
|
Emitter
|
|
3
7
|
} from "./chunk-T5NHW4KC.js";
|
|
@@ -662,13 +666,954 @@ var DummyBrowser = class extends Emitter {
|
|
|
662
666
|
}
|
|
663
667
|
};
|
|
664
668
|
|
|
665
|
-
// src/dummy/
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
669
|
+
// src/dummy/sprinkles/suggestions.shtml
|
|
670
|
+
var suggestions_default = `<!DOCTYPE html>
|
|
671
|
+
<html lang="en">
|
|
672
|
+
<head>
|
|
673
|
+
<title>Suggestions</title>
|
|
674
|
+
|
|
675
|
+
<link rel="icon" href="ice-cream-cone" />
|
|
676
|
+
<meta charset="utf-8" />
|
|
677
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
678
|
+
<style>
|
|
679
|
+
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
680
|
+
|
|
681
|
+
body {
|
|
682
|
+
font-family: var(--s2-font-family, 'Adobe Clean', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
|
|
683
|
+
background: transparent;
|
|
684
|
+
color: var(--s2-content-default, #e8e8e8);
|
|
685
|
+
padding: 14px 18px 20px;
|
|
686
|
+
}
|
|
687
|
+
|
|
688
|
+
#gelatiereStream[hidden] { display: none; }
|
|
689
|
+
|
|
690
|
+
.gelatiere-entry { padding: 18px 0; }
|
|
691
|
+
.gelatiere-entry:first-child { padding-top: 2px; }
|
|
692
|
+
.gelatiere-entry + .gelatiere-entry,
|
|
693
|
+
.gelatiere-done {
|
|
694
|
+
border-top: 1px solid var(--s2-border-subtle, var(--s2-gray-200, #e8e8e8));
|
|
695
|
+
}
|
|
696
|
+
|
|
697
|
+
.gelatiere-entry__head {
|
|
698
|
+
display: flex;
|
|
699
|
+
align-items: center;
|
|
700
|
+
gap: 8px;
|
|
701
|
+
font-size: 13px;
|
|
702
|
+
font-weight: 600;
|
|
703
|
+
line-height: 1.35;
|
|
704
|
+
color: var(--s2-content-default, #e8e8e8);
|
|
705
|
+
}
|
|
706
|
+
|
|
707
|
+
.gelatiere-entry__head :is(i, svg) { width: 15px; height: 15px; flex-shrink: 0; }
|
|
708
|
+
.gelatiere-entry__title { flex: 1; }
|
|
709
|
+
.gelatiere-kind {
|
|
710
|
+
font-size: 10px;
|
|
711
|
+
font-weight: 600;
|
|
712
|
+
text-transform: uppercase;
|
|
713
|
+
letter-spacing: 0.08em;
|
|
714
|
+
color: var(--s2-content-tertiary, #8a8a8a);
|
|
715
|
+
white-space: nowrap;
|
|
716
|
+
}
|
|
717
|
+
|
|
718
|
+
.gelatiere-why {
|
|
719
|
+
margin-top: 6px;
|
|
720
|
+
font-size: 12px;
|
|
721
|
+
line-height: 1.55;
|
|
722
|
+
color: var(--s2-content-secondary, #a1a1a1);
|
|
723
|
+
}
|
|
724
|
+
.gelatiere-cmd {
|
|
725
|
+
margin-top: 8px;
|
|
726
|
+
font-size: 11px;
|
|
727
|
+
color: var(--s2-content-tertiary, #8a8a8a);
|
|
728
|
+
overflow-wrap: anywhere;
|
|
729
|
+
}
|
|
730
|
+
.gelatiere-cmd code,
|
|
731
|
+
.gelatiere-why code {
|
|
732
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
733
|
+
font-size: 11px;
|
|
734
|
+
}
|
|
735
|
+
|
|
736
|
+
.gelatiere-actions {
|
|
737
|
+
display: flex;
|
|
738
|
+
align-items: center;
|
|
739
|
+
justify-content: flex-end;
|
|
740
|
+
gap: 14px;
|
|
741
|
+
margin-top: 12px;
|
|
742
|
+
}
|
|
743
|
+
.gelatiere-actions .gelatiere-taken-note { margin-right: auto; }
|
|
744
|
+
|
|
745
|
+
.gelatiere-quiet-btn {
|
|
746
|
+
background: none;
|
|
747
|
+
border: none;
|
|
748
|
+
font-family: inherit;
|
|
749
|
+
font-size: 12px;
|
|
750
|
+
color: var(--s2-content-tertiary, #8a8a8a);
|
|
751
|
+
cursor: pointer;
|
|
752
|
+
padding: 4px 0;
|
|
753
|
+
}
|
|
754
|
+
.gelatiere-quiet-btn:hover { color: var(--s2-content-secondary, #a1a1a1); }
|
|
755
|
+
|
|
756
|
+
.gelatiere-empty { padding: 2px 0 4px; }
|
|
757
|
+
.gelatiere-explore {
|
|
758
|
+
margin-top: 18px;
|
|
759
|
+
padding-top: 14px;
|
|
760
|
+
border-top: 1px solid var(--s2-border-subtle, var(--s2-gray-200, #e8e8e8));
|
|
761
|
+
}
|
|
762
|
+
.gelatiere-explore__link {
|
|
763
|
+
display: block;
|
|
764
|
+
padding: 10px 0;
|
|
765
|
+
text-decoration: none;
|
|
766
|
+
color: inherit;
|
|
767
|
+
}
|
|
768
|
+
.gelatiere-explore__link + .gelatiere-explore__link {
|
|
769
|
+
border-top: 1px solid var(--s2-border-subtle, var(--s2-gray-200, #e8e8e8));
|
|
770
|
+
}
|
|
771
|
+
.gelatiere-explore__link:hover .gelatiere-entry__title { text-decoration: underline; }
|
|
772
|
+
|
|
773
|
+
.gelatiere-entry--taken .gelatiere-entry__head,
|
|
774
|
+
.gelatiere-entry--taken .gelatiere-why,
|
|
775
|
+
.gelatiere-entry--taken .gelatiere-cmd { opacity: 0.6; }
|
|
776
|
+
.gelatiere-taken-note {
|
|
777
|
+
display: flex;
|
|
778
|
+
align-items: center;
|
|
779
|
+
gap: 6px;
|
|
780
|
+
font-size: 12px;
|
|
781
|
+
color: var(--s2-content-positive, #2d9d78);
|
|
782
|
+
}
|
|
783
|
+
.gelatiere-taken-note :is(i, svg) { width: 14px; height: 14px; flex-shrink: 0; }
|
|
784
|
+
|
|
785
|
+
.gelatiere-done { margin-top: 6px; padding-top: 14px; }
|
|
786
|
+
.gelatiere-done-title {
|
|
787
|
+
padding-bottom: 6px;
|
|
788
|
+
font-size: 10px;
|
|
789
|
+
font-weight: 600;
|
|
790
|
+
text-transform: uppercase;
|
|
791
|
+
letter-spacing: 0.08em;
|
|
792
|
+
color: var(--s2-content-tertiary, #8a8a8a);
|
|
793
|
+
}
|
|
794
|
+
.gelatiere-done-row {
|
|
795
|
+
display: flex;
|
|
796
|
+
align-items: center;
|
|
797
|
+
gap: 8px;
|
|
798
|
+
padding: 3px 0;
|
|
799
|
+
font-size: 12px;
|
|
800
|
+
color: var(--s2-content-secondary, #a1a1a1);
|
|
801
|
+
}
|
|
802
|
+
.gelatiere-done-row :is(i, svg) {
|
|
803
|
+
width: 13px;
|
|
804
|
+
height: 13px;
|
|
805
|
+
flex-shrink: 0;
|
|
806
|
+
color: var(--s2-content-positive, #2d9d78);
|
|
807
|
+
}
|
|
808
|
+
.gelatiere-done-row .gelatiere-done-title-text {
|
|
809
|
+
flex: 1;
|
|
810
|
+
min-width: 0;
|
|
811
|
+
overflow: hidden;
|
|
812
|
+
text-overflow: ellipsis;
|
|
813
|
+
white-space: nowrap;
|
|
814
|
+
}
|
|
815
|
+
.gelatiere-done-row .gelatiere-done-what {
|
|
816
|
+
color: var(--s2-content-tertiary, #8a8a8a);
|
|
817
|
+
white-space: nowrap;
|
|
818
|
+
}
|
|
819
|
+
</style>
|
|
820
|
+
</head>
|
|
821
|
+
<body>
|
|
822
|
+
|
|
823
|
+
<div id="gelatiereStream" hidden></div>
|
|
824
|
+
|
|
825
|
+
<script>
|
|
826
|
+
|
|
827
|
+
var GELATIERE_SUGGESTIONS_PATH = '/shared/.gelatiere/suggestions.json';
|
|
828
|
+
|
|
829
|
+
var KIND_LABELS = {
|
|
830
|
+
'skill': { label: 'Skill', icon: 'package', action: 'Install', done: 'installed' },
|
|
831
|
+
'use-case': { label: 'Try this', icon: 'sparkles', action: 'Try it', done: 'tried' },
|
|
832
|
+
'tip': { label: 'Tip', icon: 'lightbulb', action: null, done: 'tried' },
|
|
833
|
+
'skill-idea': { label: 'New skill', icon: 'wand-sparkles', action: 'Draft it', done: 'drafted' },
|
|
834
|
+
'issue': { label: 'Report', icon: 'bug', action: 'Report it', done: 'reported' },
|
|
835
|
+
};
|
|
836
|
+
|
|
837
|
+
var USE_CASE_COMMAND = 'gelatiere use-cases --limit 3 --json';
|
|
838
|
+
var USE_CASE_CACHE_MS = 12 * 60 * 60 * 1000;
|
|
839
|
+
var EMPTY_HEADLINE = 'Nothing here yet';
|
|
840
|
+
var EMPTY_BODY =
|
|
841
|
+
'The gelatiere reads how you actually work \u2014 nightly, and after each chat ' +
|
|
842
|
+
'ends \u2014 and leaves what it finds here: a skill worth installing, a use ' +
|
|
843
|
+
'case worth trying, a habit worth changing. Check back after your next session.';
|
|
844
|
+
|
|
845
|
+
function el(tag, className, text) {
|
|
846
|
+
var node = document.createElement(tag);
|
|
847
|
+
if (className) node.className = className;
|
|
848
|
+
if (text != null) node.textContent = text;
|
|
849
|
+
return node;
|
|
850
|
+
}
|
|
851
|
+
|
|
852
|
+
function lucide(name) {
|
|
853
|
+
var ic = document.createElement('i');
|
|
854
|
+
ic.setAttribute('data-lucide', name);
|
|
855
|
+
return ic;
|
|
856
|
+
}
|
|
857
|
+
|
|
858
|
+
function gelatierePrimaryButton(label, onClick) {
|
|
859
|
+
var btn = el('button', 'sprinkle-btn sprinkle-btn--primary', label);
|
|
860
|
+
btn.type = 'button';
|
|
861
|
+
btn.onclick = onClick;
|
|
862
|
+
return btn;
|
|
863
|
+
}
|
|
864
|
+
|
|
865
|
+
function gelatiereQuietButton(label, onClick, title) {
|
|
866
|
+
var btn = el('button', 'gelatiere-quiet-btn', label);
|
|
867
|
+
btn.type = 'button';
|
|
868
|
+
if (title) btn.title = title;
|
|
869
|
+
btn.onclick = onClick;
|
|
870
|
+
return btn;
|
|
871
|
+
}
|
|
872
|
+
|
|
873
|
+
function buildSuggestionCard(s) {
|
|
874
|
+
var meta = KIND_LABELS[s.kind] || KIND_LABELS.tip;
|
|
875
|
+
var card = el('div', 'gelatiere-entry');
|
|
876
|
+
card.dataset.id = s.id;
|
|
877
|
+
|
|
878
|
+
var head = el('div', 'gelatiere-entry__head');
|
|
879
|
+
head.appendChild(lucide(meta.icon));
|
|
880
|
+
head.appendChild(el('span', 'gelatiere-entry__title', s.title));
|
|
881
|
+
head.appendChild(el('span', 'gelatiere-kind', meta.label));
|
|
882
|
+
card.appendChild(head);
|
|
883
|
+
|
|
884
|
+
card.appendChild(el('div', 'gelatiere-why', s.body));
|
|
885
|
+
if (s.install) {
|
|
886
|
+
var install = el('div', 'gelatiere-cmd');
|
|
887
|
+
install.appendChild(document.createTextNode('Installs with '));
|
|
888
|
+
install.appendChild(el('code', null, s.install));
|
|
889
|
+
card.appendChild(install);
|
|
890
|
+
}
|
|
891
|
+
|
|
892
|
+
var actions = el('div', 'gelatiere-actions');
|
|
893
|
+
|
|
894
|
+
function markTaken(note) {
|
|
895
|
+
card.classList.add('gelatiere-entry--taken');
|
|
896
|
+
var done = el('div', 'gelatiere-taken-note');
|
|
897
|
+
done.appendChild(lucide('check'));
|
|
898
|
+
done.appendChild(document.createTextNode(note));
|
|
899
|
+
actions.replaceChildren(done);
|
|
900
|
+
if (window.LucideIcons) window.LucideIcons.render();
|
|
901
|
+
}
|
|
902
|
+
|
|
903
|
+
actions.appendChild(gelatiereQuietButton('Dismiss', function () {
|
|
904
|
+
if (window.slicc) slicc.lick({ action: 'gelatiere-dismiss', data: { id: s.id } });
|
|
905
|
+
card.remove();
|
|
906
|
+
if (!document.querySelector('.gelatiere-entry')) renderGelatiereCaughtUp();
|
|
907
|
+
}, "that's not for me"));
|
|
908
|
+
if (s.kind === 'skill') {
|
|
909
|
+
actions.appendChild(gelatierePrimaryButton(meta.action, function () {
|
|
910
|
+
if (window.slicc) slicc.lick({ action: 'gelatiere-install',
|
|
911
|
+
data: { id: s.id, skill: s.skill || null, install: s.install || null, title: s.title } });
|
|
912
|
+
markTaken('Installing \u2014 the cone is on it.');
|
|
913
|
+
}));
|
|
914
|
+
} else if (meta.action && s.prompt) {
|
|
915
|
+
actions.appendChild(gelatierePrimaryButton(meta.action, function () {
|
|
916
|
+
if (window.slicc) slicc.lick({ action: 'gelatiere-try',
|
|
917
|
+
data: { id: s.id, prompt: s.prompt, title: s.title } });
|
|
918
|
+
markTaken('Sent to the cone \u2014 watch the chat.');
|
|
919
|
+
}));
|
|
920
|
+
} else if (s.url && /^https?:\\/\\//i.test(s.url)) {
|
|
921
|
+
|
|
922
|
+
var link = el('a', 'gelatiere-quiet-btn', 'Read more');
|
|
923
|
+
link.href = s.url;
|
|
924
|
+
link.target = '_blank';
|
|
925
|
+
link.rel = 'noopener';
|
|
926
|
+
actions.appendChild(link);
|
|
927
|
+
}
|
|
928
|
+
card.appendChild(actions);
|
|
929
|
+
return card;
|
|
930
|
+
}
|
|
931
|
+
|
|
932
|
+
var DONE_LEDGER_LIMIT = 5;
|
|
933
|
+
function buildDoneLedger(taken) {
|
|
934
|
+
var wrap = el('div', 'gelatiere-done');
|
|
935
|
+
wrap.appendChild(el('div', 'gelatiere-done-title', 'Done'));
|
|
936
|
+
taken.slice(0, DONE_LEDGER_LIMIT).forEach(function (s) {
|
|
937
|
+
var meta = KIND_LABELS[s.kind] || KIND_LABELS.tip;
|
|
938
|
+
var row = el('div', 'gelatiere-done-row');
|
|
939
|
+
row.appendChild(lucide('check'));
|
|
940
|
+
row.appendChild(el('span', 'gelatiere-done-title-text', s.title));
|
|
941
|
+
row.appendChild(el('span', 'gelatiere-done-what', meta.done));
|
|
942
|
+
wrap.appendChild(row);
|
|
943
|
+
});
|
|
944
|
+
return wrap;
|
|
945
|
+
}
|
|
946
|
+
|
|
947
|
+
function readCachedUseCases() {
|
|
948
|
+
try {
|
|
949
|
+
var saved = window.slicc && slicc.getState && slicc.getState();
|
|
950
|
+
if (!saved || !saved.useCases || !saved.fetchedAt) return null;
|
|
951
|
+
if (Date.now() - saved.fetchedAt > USE_CASE_CACHE_MS) return null;
|
|
952
|
+
return saved.useCases;
|
|
953
|
+
} catch (e) { return null; }
|
|
954
|
+
}
|
|
955
|
+
|
|
956
|
+
function loadUseCases() {
|
|
957
|
+
var cached = readCachedUseCases();
|
|
958
|
+
if (cached) return Promise.resolve(cached);
|
|
959
|
+
if (!window.slicc || typeof slicc.exec !== 'function') return Promise.resolve([]);
|
|
960
|
+
return Promise.resolve(slicc.exec(USE_CASE_COMMAND)).then(function (result) {
|
|
961
|
+
if (!result || result.exitCode !== 0) return [];
|
|
962
|
+
var parsed = JSON.parse(result.stdout);
|
|
963
|
+
if (!Array.isArray(parsed)) return [];
|
|
964
|
+
var cases = parsed.filter(function (c) { return c && c.url && c.title; });
|
|
965
|
+
try { slicc.setState({ fetchedAt: Date.now(), useCases: cases }); } catch (e) {}
|
|
966
|
+
return cases;
|
|
967
|
+
}, function () { return []; });
|
|
968
|
+
}
|
|
969
|
+
|
|
970
|
+
function appendUseCases(stream) {
|
|
971
|
+
loadUseCases().then(function (cases) {
|
|
972
|
+
if (!cases.length || !stream.isConnected) return;
|
|
973
|
+
var wrap = el('div', 'gelatiere-explore');
|
|
974
|
+
wrap.appendChild(el('div', 'gelatiere-done-title', 'Meanwhile, from sliccy.com'));
|
|
975
|
+
cases.forEach(function (c) {
|
|
976
|
+
var link = el('a', 'gelatiere-explore__link');
|
|
977
|
+
link.href = c.url;
|
|
978
|
+
link.target = '_blank';
|
|
979
|
+
link.rel = 'noopener';
|
|
980
|
+
var head = el('div', 'gelatiere-entry__head');
|
|
981
|
+
head.appendChild(el('span', 'gelatiere-entry__title', c.title));
|
|
982
|
+
head.appendChild(lucide('arrow-up-right'));
|
|
983
|
+
link.appendChild(head);
|
|
984
|
+
if (c.description) link.appendChild(el('div', 'gelatiere-why', c.description));
|
|
985
|
+
wrap.appendChild(link);
|
|
986
|
+
});
|
|
987
|
+
stream.appendChild(wrap);
|
|
988
|
+
if (window.LucideIcons) window.LucideIcons.render();
|
|
989
|
+
});
|
|
990
|
+
}
|
|
991
|
+
|
|
992
|
+
function renderGelatiereEmpty(headline, body) {
|
|
993
|
+
var stream = document.getElementById('gelatiereStream');
|
|
994
|
+
stream.innerHTML = '';
|
|
995
|
+
var empty = el('div', 'gelatiere-empty');
|
|
996
|
+
var head = el('div', 'gelatiere-entry__head');
|
|
997
|
+
head.appendChild(lucide('ice-cream-cone'));
|
|
998
|
+
head.appendChild(el('span', 'gelatiere-entry__title', headline));
|
|
999
|
+
empty.appendChild(head);
|
|
1000
|
+
empty.appendChild(el('div', 'gelatiere-why', body));
|
|
1001
|
+
stream.appendChild(empty);
|
|
1002
|
+
stream.hidden = false;
|
|
1003
|
+
if (window.LucideIcons) window.LucideIcons.render();
|
|
1004
|
+
appendUseCases(stream);
|
|
1005
|
+
}
|
|
1006
|
+
|
|
1007
|
+
function renderGelatiereCaughtUp() {
|
|
1008
|
+
renderGelatiereEmpty(
|
|
1009
|
+
'All caught up',
|
|
1010
|
+
'You have answered everything the gelatiere left here. The next pass runs ' +
|
|
1011
|
+
'tonight, and again after your next chat ends.'
|
|
1012
|
+
);
|
|
1013
|
+
}
|
|
1014
|
+
|
|
1015
|
+
function renderGelatiereStream() {
|
|
1016
|
+
var stream = document.getElementById('gelatiereStream');
|
|
1017
|
+
if (!stream) return;
|
|
1018
|
+
|
|
1019
|
+
if (!window.slicc || typeof slicc.readFile !== 'function') {
|
|
1020
|
+
renderGelatiereEmpty(EMPTY_HEADLINE, EMPTY_BODY);
|
|
1021
|
+
return;
|
|
1022
|
+
}
|
|
1023
|
+
|
|
1024
|
+
Promise.resolve(slicc.exists(GELATIERE_SUGGESTIONS_PATH)).then(function (present) {
|
|
1025
|
+
return present ? slicc.readFile(GELATIERE_SUGGESTIONS_PATH) : '[]';
|
|
1026
|
+
}).then(function (raw) {
|
|
1027
|
+
var list = [];
|
|
1028
|
+
try { list = JSON.parse(raw); } catch (e) { list = []; }
|
|
1029
|
+
if (!Array.isArray(list)) list = [];
|
|
1030
|
+
var readable = list.filter(function (s) {
|
|
1031
|
+
return s && typeof s === 'object' && s.id && s.title && s.body;
|
|
1032
|
+
});
|
|
1033
|
+
|
|
1034
|
+
var open = readable.filter(function (s) { return !s.dismissedAt && !s.takenAt; });
|
|
1035
|
+
var taken = readable.filter(function (s) { return s.takenAt; });
|
|
1036
|
+
if (open.length === 0 && taken.length === 0) {
|
|
1037
|
+
renderGelatiereEmpty(EMPTY_HEADLINE, EMPTY_BODY);
|
|
1038
|
+
return;
|
|
1039
|
+
}
|
|
1040
|
+
|
|
1041
|
+
if (open.length === 0) {
|
|
1042
|
+
renderGelatiereCaughtUp();
|
|
1043
|
+
stream.appendChild(buildDoneLedger(taken));
|
|
1044
|
+
if (window.LucideIcons) window.LucideIcons.render();
|
|
1045
|
+
return;
|
|
1046
|
+
}
|
|
1047
|
+
stream.innerHTML = '';
|
|
1048
|
+
open.forEach(function (s) { stream.appendChild(buildSuggestionCard(s)); });
|
|
1049
|
+
if (taken.length > 0) stream.appendChild(buildDoneLedger(taken));
|
|
1050
|
+
stream.hidden = false;
|
|
1051
|
+
if (window.LucideIcons) window.LucideIcons.render();
|
|
1052
|
+
}, function () {
|
|
1053
|
+
renderGelatiereEmpty(EMPTY_HEADLINE, EMPTY_BODY);
|
|
1054
|
+
});
|
|
1055
|
+
}
|
|
1056
|
+
|
|
1057
|
+
renderGelatiereStream();
|
|
1058
|
+
<\/script>
|
|
1059
|
+
</body>
|
|
1060
|
+
</html>
|
|
1061
|
+
`;
|
|
1062
|
+
|
|
1063
|
+
// src/dummy/sprinkles/welcome.shtml
|
|
1064
|
+
var welcome_default = `<!DOCTYPE html>
|
|
1065
|
+
<html lang="en">
|
|
1066
|
+
<head>
|
|
1067
|
+
<title>Welcome</title>
|
|
1068
|
+
<meta charset="utf-8" />
|
|
1069
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
1070
|
+
<style>
|
|
1071
|
+
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
1072
|
+
|
|
1073
|
+
body {
|
|
1074
|
+
font-family: var(--s2-font-family, 'Adobe Clean', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
|
|
1075
|
+
background: transparent;
|
|
1076
|
+
color: var(--s2-content-default, #e8e8e8);
|
|
1077
|
+
}
|
|
1078
|
+
|
|
1079
|
+
.step { display: none; animation: fadeUp 0.18s ease both; }
|
|
1080
|
+
.step.active { display: block; }
|
|
1081
|
+
@keyframes fadeUp {
|
|
1082
|
+
from { opacity: 0; transform: translateY(6px); }
|
|
1083
|
+
to { opacity: 1; transform: translateY(0); }
|
|
1084
|
+
}
|
|
1085
|
+
|
|
1086
|
+
.pills {
|
|
1087
|
+
display: flex;
|
|
1088
|
+
flex-wrap: wrap;
|
|
1089
|
+
gap: 8px;
|
|
1090
|
+
margin-top: 14px;
|
|
1091
|
+
}
|
|
1092
|
+
.pill {
|
|
1093
|
+
display: inline-flex;
|
|
1094
|
+
align-items: center;
|
|
1095
|
+
gap: 6px;
|
|
1096
|
+
height: 34px;
|
|
1097
|
+
padding: 0 14px;
|
|
1098
|
+
border-radius: var(--s2-radius-pill, 9999px);
|
|
1099
|
+
background: var(--s2-bg-elevated, #2c2c2c);
|
|
1100
|
+
border: 1px solid var(--s2-border-subtle, #3a3a3a);
|
|
1101
|
+
cursor: pointer;
|
|
1102
|
+
font-family: inherit;
|
|
1103
|
+
font-size: 13px;
|
|
1104
|
+
font-weight: 500;
|
|
1105
|
+
color: var(--s2-content-default, #e8e8e8);
|
|
1106
|
+
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
|
|
1107
|
+
user-select: none;
|
|
1108
|
+
white-space: nowrap;
|
|
1109
|
+
}
|
|
1110
|
+
.pill:hover {
|
|
1111
|
+
background: var(--s2-bg-layer-2, #252525);
|
|
1112
|
+
border-color: var(--s2-border-default, #4a4a4a);
|
|
1113
|
+
}
|
|
1114
|
+
.pill.selected {
|
|
1115
|
+
border-color: var(--s2-accent, #3562ff);
|
|
1116
|
+
box-shadow: 0 0 0 1px var(--s2-accent, #3562ff);
|
|
1117
|
+
background: var(--s2-bg-layer-2, #252525);
|
|
1118
|
+
}
|
|
1119
|
+
|
|
1120
|
+
.step-heading {
|
|
1121
|
+
font-size: 15px;
|
|
1122
|
+
font-weight: 700;
|
|
1123
|
+
color: var(--s2-content-default, #e8e8e8);
|
|
1124
|
+
line-height: 1.3;
|
|
1125
|
+
}
|
|
1126
|
+
.step-sub {
|
|
1127
|
+
font-size: 12px;
|
|
1128
|
+
color: var(--s2-content-secondary, #a1a1a1);
|
|
1129
|
+
margin-top: 3px;
|
|
1130
|
+
}
|
|
1131
|
+
|
|
1132
|
+
.input-row {
|
|
1133
|
+
display: flex;
|
|
1134
|
+
align-items: center;
|
|
1135
|
+
gap: 8px;
|
|
1136
|
+
margin-top: 14px;
|
|
1137
|
+
background: var(--s2-bg-elevated, #2c2c2c);
|
|
1138
|
+
border: 1px solid var(--s2-border-subtle, #3a3a3a);
|
|
1139
|
+
border-radius: var(--s2-radius-pill, 9999px);
|
|
1140
|
+
padding: 6px 6px 6px 14px;
|
|
1141
|
+
}
|
|
1142
|
+
|
|
1143
|
+
.input-row input {
|
|
1144
|
+
flex: 1;
|
|
1145
|
+
border: none;
|
|
1146
|
+
outline: none;
|
|
1147
|
+
background: transparent;
|
|
1148
|
+
font-family: inherit;
|
|
1149
|
+
font-size: 14px;
|
|
1150
|
+
color: var(--s2-content-default, #e8e8e8);
|
|
1151
|
+
}
|
|
1152
|
+
.input-row input::placeholder { color: var(--s2-content-tertiary, #8a8a8a); }
|
|
1153
|
+
.input-row button {
|
|
1154
|
+
width: 30px;
|
|
1155
|
+
height: 30px;
|
|
1156
|
+
border-radius: 50%;
|
|
1157
|
+
border: none;
|
|
1158
|
+
background: var(--s2-accent, #3562ff);
|
|
1159
|
+
color: var(--s2-gray-25, #f5f5f5);
|
|
1160
|
+
cursor: pointer;
|
|
1161
|
+
display: flex;
|
|
1162
|
+
align-items: center;
|
|
1163
|
+
justify-content: center;
|
|
1164
|
+
flex-shrink: 0;
|
|
1165
|
+
transition: background 0.15s;
|
|
1166
|
+
}
|
|
1167
|
+
.input-row button:hover { background: var(--s2-accent-hover, #4a75ff); }
|
|
1168
|
+
|
|
1169
|
+
.cta-row { margin-top: 14px; }
|
|
1170
|
+
.cta {
|
|
1171
|
+
display: inline-flex;
|
|
1172
|
+
align-items: center;
|
|
1173
|
+
justify-content: center;
|
|
1174
|
+
padding: 8px 22px;
|
|
1175
|
+
border-radius: var(--s2-radius-pill, 9999px);
|
|
1176
|
+
background: var(--s2-accent, #3562ff);
|
|
1177
|
+
color: var(--s2-gray-25, #f5f5f5);
|
|
1178
|
+
border: none;
|
|
1179
|
+
font-family: inherit;
|
|
1180
|
+
font-size: 13px;
|
|
1181
|
+
font-weight: 600;
|
|
1182
|
+
cursor: pointer;
|
|
1183
|
+
transition: background 0.15s;
|
|
1184
|
+
}
|
|
1185
|
+
.cta:hover { background: var(--s2-accent-hover, #4a75ff); }
|
|
1186
|
+
|
|
1187
|
+
.footer {
|
|
1188
|
+
display: flex;
|
|
1189
|
+
align-items: center;
|
|
1190
|
+
justify-content: space-between;
|
|
1191
|
+
margin-top: 16px;
|
|
1192
|
+
}
|
|
1193
|
+
.dots { display: flex; gap: 5px; }
|
|
1194
|
+
.dot {
|
|
1195
|
+
width: 5px;
|
|
1196
|
+
height: 5px;
|
|
1197
|
+
border-radius: 50%;
|
|
1198
|
+
background: var(--s2-gray-300, #4a4a4a);
|
|
1199
|
+
transition: background 0.2s, transform 0.2s;
|
|
1200
|
+
}
|
|
1201
|
+
.dot.active { background: var(--s2-accent, #3562ff); transform: scale(1.3); }
|
|
1202
|
+
.dot.done { background: var(--s2-accent, #3562ff); }
|
|
1203
|
+
|
|
1204
|
+
.skip-btn {
|
|
1205
|
+
background: none;
|
|
1206
|
+
border: none;
|
|
1207
|
+
font-family: inherit;
|
|
1208
|
+
font-size: 11px;
|
|
1209
|
+
color: var(--s2-content-tertiary, #8a8a8a);
|
|
1210
|
+
cursor: pointer;
|
|
1211
|
+
padding: 2px 4px;
|
|
1212
|
+
}
|
|
1213
|
+
.skip-btn:hover { color: var(--s2-content-secondary, #a1a1a1); }
|
|
1214
|
+
|
|
1215
|
+
.back-btn {
|
|
1216
|
+
background: none;
|
|
1217
|
+
border: none;
|
|
1218
|
+
font-family: inherit;
|
|
1219
|
+
font-size: 11px;
|
|
1220
|
+
color: var(--s2-content-secondary, #a1a1a1);
|
|
1221
|
+
cursor: pointer;
|
|
1222
|
+
display: inline-flex;
|
|
1223
|
+
align-items: center;
|
|
1224
|
+
gap: 3px;
|
|
1225
|
+
padding: 2px 0;
|
|
1226
|
+
margin-bottom: 10px;
|
|
1227
|
+
}
|
|
1228
|
+
.back-btn:hover { color: var(--s2-content-default, #e8e8e8); }
|
|
1229
|
+
.back-btn[hidden] { display: none; }
|
|
1230
|
+
|
|
1231
|
+
.done-state {
|
|
1232
|
+
text-align: center;
|
|
1233
|
+
padding: 12px 0 4px;
|
|
1234
|
+
font-size: 14px;
|
|
1235
|
+
color: var(--s2-content-secondary, #a1a1a1);
|
|
1236
|
+
}
|
|
1237
|
+
</style>
|
|
1238
|
+
</head>
|
|
1239
|
+
<body>
|
|
1240
|
+
<div class="sprinkle-action-card">
|
|
1241
|
+
|
|
1242
|
+
<div class="sprinkle-action-card__body" style="padding: 16px 24px 0">
|
|
1243
|
+
<button class="back-btn" id="backBtn" hidden onclick="goBack()">
|
|
1244
|
+
<i data-lucide="arrow-left" style="width:12px;height:12px"></i> Back
|
|
1245
|
+
</button>
|
|
1246
|
+
|
|
1247
|
+
<div class="step active" id="s1">
|
|
1248
|
+
<div class="step-heading">What brings you here?</div>
|
|
1249
|
+
<div class="pills" id="purposePills"></div>
|
|
1250
|
+
</div>
|
|
1251
|
+
|
|
1252
|
+
<div class="step" id="s2">
|
|
1253
|
+
<div class="step-heading" id="s2Heading">What do you do?</div>
|
|
1254
|
+
<div class="pills" id="rolePills"></div>
|
|
1255
|
+
</div>
|
|
1256
|
+
|
|
1257
|
+
<div class="step" id="s3">
|
|
1258
|
+
<div class="step-heading" id="s3Heading">What do you want to tackle?</div>
|
|
1259
|
+
<div class="step-sub">Pick as many as you like</div>
|
|
1260
|
+
<div class="pills" id="taskPills"></div>
|
|
1261
|
+
<div class="cta-row">
|
|
1262
|
+
<button class="cta" onclick="goStep(4)">Continue</button>
|
|
1263
|
+
</div>
|
|
1264
|
+
</div>
|
|
1265
|
+
|
|
1266
|
+
<div class="step" id="s4">
|
|
1267
|
+
<div class="step-heading">What should I call you?</div>
|
|
1268
|
+
<div class="input-row">
|
|
1269
|
+
<input type="text" id="nameIn" placeholder="Your name"
|
|
1270
|
+
onkeydown="if(event.key==='Enter') advanceFrom(4)" />
|
|
1271
|
+
<button onclick="advanceFrom(4)" aria-label="Continue">
|
|
1272
|
+
<i data-lucide="arrow-right" style="width:14px;height:14px"></i>
|
|
1273
|
+
</button>
|
|
1274
|
+
</div>
|
|
1275
|
+
</div>
|
|
1276
|
+
|
|
1277
|
+
<div class="step" id="s5">
|
|
1278
|
+
<div class="step-heading">Where do you work?</div>
|
|
1279
|
+
<div class="input-row">
|
|
1280
|
+
<input type="text" id="companyIn" placeholder="Company or organization"
|
|
1281
|
+
onkeydown="if(event.key==='Enter') advanceFrom(5)" />
|
|
1282
|
+
<button onclick="advanceFrom(5)" aria-label="Continue">
|
|
1283
|
+
<i data-lucide="arrow-right" style="width:14px;height:14px"></i>
|
|
1284
|
+
</button>
|
|
1285
|
+
</div>
|
|
1286
|
+
</div>
|
|
1287
|
+
|
|
1288
|
+
<div class="step" id="s6">
|
|
1289
|
+
<div class="step-heading" id="s6Heading">What apps do you use most?</div>
|
|
1290
|
+
<div class="step-sub">Pick any that apply</div>
|
|
1291
|
+
<div class="pills" id="appPills"></div>
|
|
1292
|
+
<div class="cta-row">
|
|
1293
|
+
<button class="cta" onclick="finish()">Let's go</button>
|
|
1294
|
+
</div>
|
|
1295
|
+
</div>
|
|
1296
|
+
|
|
1297
|
+
<div class="step" id="sDone">
|
|
1298
|
+
<div class="done-state" id="sDoneText">Setting things up…</div>
|
|
1299
|
+
</div>
|
|
1300
|
+
</div>
|
|
1301
|
+
|
|
1302
|
+
<div class="sprinkle-action-card__body" style="padding-top:0" id="footerArea">
|
|
1303
|
+
<div class="footer">
|
|
1304
|
+
<div class="dots" id="dots">
|
|
1305
|
+
<div class="dot active"></div>
|
|
1306
|
+
<div class="dot"></div>
|
|
1307
|
+
<div class="dot"></div>
|
|
1308
|
+
<div class="dot"></div>
|
|
1309
|
+
<div class="dot"></div>
|
|
1310
|
+
<div class="dot"></div>
|
|
1311
|
+
</div>
|
|
1312
|
+
<button class="skip-btn" id="skipBtn" onclick="skipStep()">skip</button>
|
|
1313
|
+
</div>
|
|
1314
|
+
</div>
|
|
1315
|
+
|
|
1316
|
+
</div>
|
|
1317
|
+
|
|
1318
|
+
<script>
|
|
1319
|
+
var cur = 1;
|
|
1320
|
+
var profile = { purpose: '', role: '', tasks: [], name: '', company: '', apps: [] };
|
|
1321
|
+
|
|
1322
|
+
var ROLE_FONTS = {
|
|
1323
|
+
'developer': 'monospace',
|
|
1324
|
+
'designer': 'Papyrus, fantasy',
|
|
1325
|
+
'product-pm': '"Comic Sans MS", "Comic Sans", cursive',
|
|
1326
|
+
};
|
|
1327
|
+
|
|
1328
|
+
var TASK_HEADINGS_BY_ROLE = {
|
|
1329
|
+
'developer': 'What are you hacking?',
|
|
1330
|
+
'designer': 'What do you dream of?',
|
|
1331
|
+
'product-pm': "What's your mission?",
|
|
1332
|
+
'content-creator': "What's your story?",
|
|
1333
|
+
'marketer': "What's your ambition?",
|
|
1334
|
+
'founder': 'What do you want to create?',
|
|
1335
|
+
'student': 'What are you learning?',
|
|
1336
|
+
'researcher': 'What are you researching?',
|
|
1337
|
+
};
|
|
1338
|
+
var TASK_HEADING_DEFAULT = 'What do you want to tackle?';
|
|
1339
|
+
|
|
1340
|
+
var PURPOSES = [
|
|
1341
|
+
{ id: 'work', label: 'Work', icon: 'briefcase' },
|
|
1342
|
+
{ id: 'school', label: 'School', icon: 'graduation-cap' },
|
|
1343
|
+
{ id: 'personal', label: 'Personal', icon: 'user' },
|
|
1344
|
+
{ id: 'side-project',label: 'Side project', icon: 'lightbulb' },
|
|
1345
|
+
{ id: 'exploring', label: 'Just exploring', icon: 'compass' },
|
|
1346
|
+
];
|
|
1347
|
+
|
|
1348
|
+
var ROLES_BY_PURPOSE = {
|
|
1349
|
+
work: {
|
|
1350
|
+
heading: "What's your role?",
|
|
1351
|
+
roles: [
|
|
1352
|
+
{ id: 'developer', label: 'Developer', icon: 'code' },
|
|
1353
|
+
{ id: 'designer', label: 'Designer', icon: 'palette' },
|
|
1354
|
+
{ id: 'content-creator', label: 'Content creator', icon: 'pen-tool' },
|
|
1355
|
+
{ id: 'marketer', label: 'Marketer', icon: 'megaphone' },
|
|
1356
|
+
{ id: 'product-pm', label: 'Product / PM', icon: 'layout-dashboard' },
|
|
1357
|
+
{ id: 'founder', label: 'Founder', icon: 'rocket' },
|
|
1358
|
+
{ id: 'other', label: 'Something else', icon: 'help-circle' },
|
|
1359
|
+
],
|
|
1360
|
+
},
|
|
1361
|
+
school: {
|
|
1362
|
+
heading: "What are you studying?",
|
|
1363
|
+
roles: [
|
|
1364
|
+
{ id: 'student', label: 'Student', icon: 'book-open' },
|
|
1365
|
+
{ id: 'researcher', label: 'Researcher', icon: 'microscope' },
|
|
1366
|
+
{ id: 'developer', label: 'Developer', icon: 'code' },
|
|
1367
|
+
{ id: 'designer', label: 'Designer', icon: 'palette' },
|
|
1368
|
+
{ id: 'other', label: 'Something else', icon: 'help-circle' },
|
|
1369
|
+
],
|
|
1370
|
+
},
|
|
1371
|
+
_default: {
|
|
1372
|
+
heading: "What's your background?",
|
|
1373
|
+
roles: [
|
|
1374
|
+
{ id: 'developer', label: 'Developer', icon: 'code' },
|
|
1375
|
+
{ id: 'designer', label: 'Designer', icon: 'palette' },
|
|
1376
|
+
{ id: 'content-creator', label: 'Content creator', icon: 'pen-tool' },
|
|
1377
|
+
{ id: 'marketer', label: 'Marketer', icon: 'megaphone' },
|
|
1378
|
+
{ id: 'product-pm', label: 'Product / PM', icon: 'layout-dashboard' },
|
|
1379
|
+
{ id: 'student', label: 'Student', icon: 'book-open' },
|
|
1380
|
+
{ id: 'researcher', label: 'Researcher', icon: 'microscope' },
|
|
1381
|
+
{ id: 'founder', label: 'Founder', icon: 'rocket' },
|
|
1382
|
+
{ id: 'other', label: 'Something else', icon: 'help-circle' },
|
|
1383
|
+
],
|
|
1384
|
+
},
|
|
1385
|
+
};
|
|
1386
|
+
|
|
1387
|
+
var TASKS = [
|
|
1388
|
+
{ id: 'build-websites', label: 'Build websites', icon: 'globe' },
|
|
1389
|
+
{ id: 'migrate-page-aem', label: 'Migrate a page to AEM', icon: 'book-up' },
|
|
1390
|
+
{ id: 'automate', label: 'Automate tasks', icon: 'zap' },
|
|
1391
|
+
{ id: 'research', label: 'Research & analyze', icon: 'search' },
|
|
1392
|
+
{ id: 'write-content', label: 'Write content', icon: 'file-text' },
|
|
1393
|
+
{ id: 'extract-data', label: 'Extract data', icon: 'database' },
|
|
1394
|
+
{ id: 'monitor', label: 'Monitor sites', icon: 'activity' },
|
|
1395
|
+
{ id: 'seo', label: 'SEO & audits', icon: 'bar-chart' },
|
|
1396
|
+
{ id: 'manage-files', label: 'Manage files', icon: 'folder' },
|
|
1397
|
+
{ id: 'browser-automation', label: 'Browser automation', icon: 'mouse-pointer' },
|
|
1398
|
+
{ id: 'not-sure', label: 'Not sure yet', icon: 'circle-help' },
|
|
1399
|
+
];
|
|
1400
|
+
|
|
1401
|
+
var APPS = [
|
|
1402
|
+
{ id: 'aem', label: 'Adobe Experience Manager', icon: 'box',
|
|
1403
|
+
relevance: ['build-websites','migrate-page-aem','write-content','seo','content-creator','marketer','designer'] },
|
|
1404
|
+
{ id: 'imessage', label: 'iMessage', icon: 'message-circle',
|
|
1405
|
+
relevance: ['personal','side-project','exploring'] },
|
|
1406
|
+
{ id: 'teams', label: 'Microsoft Teams', icon: 'users',
|
|
1407
|
+
relevance: ['work','school','developer','designer','marketer','product-pm','founder','student'] },
|
|
1408
|
+
{ id: 'slack', label: 'Slack', icon: 'hash',
|
|
1409
|
+
relevance: ['work','school','developer','designer','marketer','product-pm','founder','student'] },
|
|
1410
|
+
];
|
|
1411
|
+
|
|
1412
|
+
function applyFontJoke(stepEl) {
|
|
1413
|
+
var font = ROLE_FONTS[profile.role];
|
|
1414
|
+
if (font) stepEl.style.fontFamily = font;
|
|
1415
|
+
else stepEl.style.fontFamily = '';
|
|
1416
|
+
}
|
|
1417
|
+
|
|
1418
|
+
function makePill(item, multiSelect, onSelect, preselected) {
|
|
1419
|
+
var btn = document.createElement('button');
|
|
1420
|
+
btn.className = 'pill';
|
|
1421
|
+
btn.dataset.id = item.id;
|
|
1422
|
+
if (preselected) btn.classList.add('selected');
|
|
1423
|
+
if (item.icon) {
|
|
1424
|
+
var ic = document.createElement('i');
|
|
1425
|
+
ic.setAttribute('data-lucide', item.icon);
|
|
1426
|
+
ic.style.width = '14px';
|
|
1427
|
+
ic.style.height = '14px';
|
|
1428
|
+
btn.appendChild(ic);
|
|
1429
|
+
}
|
|
1430
|
+
btn.appendChild(document.createTextNode(item.label));
|
|
1431
|
+
btn.onclick = function () {
|
|
1432
|
+
if (multiSelect) {
|
|
1433
|
+
btn.classList.toggle('selected');
|
|
1434
|
+
} else {
|
|
1435
|
+
btn.parentElement.querySelectorAll('.pill').forEach(function(p){ p.classList.remove('selected'); });
|
|
1436
|
+
btn.classList.add('selected');
|
|
1437
|
+
}
|
|
1438
|
+
onSelect(item, btn);
|
|
1439
|
+
};
|
|
1440
|
+
return btn;
|
|
1441
|
+
}
|
|
1442
|
+
|
|
1443
|
+
function buildPills(containerId, items, multiSelect, onSelect, selectedIds) {
|
|
1444
|
+
var el = document.getElementById(containerId);
|
|
1445
|
+
el.innerHTML = '';
|
|
1446
|
+
var pre = selectedIds || [];
|
|
1447
|
+
items.forEach(function(item) {
|
|
1448
|
+
el.appendChild(makePill(item, multiSelect, onSelect, pre.indexOf(item.id) >= 0));
|
|
1449
|
+
});
|
|
1450
|
+
if (window.LucideIcons) window.LucideIcons.render();
|
|
1451
|
+
}
|
|
1452
|
+
|
|
1453
|
+
function getRelevantApps() {
|
|
1454
|
+
var ctx = profile.tasks.concat([profile.role, profile.purpose]);
|
|
1455
|
+
return APPS.slice().sort(function(a, b) {
|
|
1456
|
+
var sa = a.relevance.filter(function(t){ return ctx.indexOf(t) >= 0; }).length;
|
|
1457
|
+
var sb = b.relevance.filter(function(t){ return ctx.indexOf(t) >= 0; }).length;
|
|
1458
|
+
return sb - sa;
|
|
1459
|
+
});
|
|
1460
|
+
}
|
|
1461
|
+
|
|
1462
|
+
function updateDots(step) {
|
|
1463
|
+
|
|
1464
|
+
var effective = step;
|
|
1465
|
+
if (profile.purpose !== 'work' && step >= 5) effective = step - 1;
|
|
1466
|
+
var dots = document.getElementById('dots').children;
|
|
1467
|
+
for (var i = 0; i < dots.length; i++) {
|
|
1468
|
+
dots[i].className = 'dot';
|
|
1469
|
+
if (i + 1 === effective) dots[i].className = 'dot active';
|
|
1470
|
+
else if (i + 1 < effective) dots[i].className = 'dot done';
|
|
1471
|
+
}
|
|
1472
|
+
|
|
1473
|
+
dots[5].style.display = (profile.purpose !== 'work') ? 'none' : '';
|
|
1474
|
+
}
|
|
1475
|
+
|
|
1476
|
+
function goBack() {
|
|
1477
|
+
var prev = cur - 1;
|
|
1478
|
+
if (prev === 5 && profile.purpose !== 'work') prev = 4;
|
|
1479
|
+
if (prev >= 1) goStep(prev);
|
|
1480
|
+
}
|
|
1481
|
+
|
|
1482
|
+
function skipStep() {
|
|
1483
|
+
if (cur === 4) {
|
|
1484
|
+
profile.name = '';
|
|
1485
|
+
var nameIn = document.getElementById('nameIn');
|
|
1486
|
+
if (nameIn) nameIn.value = '';
|
|
1487
|
+
goStep(nextStep(cur));
|
|
1488
|
+
} else if (cur === 5) {
|
|
1489
|
+
profile.company = '';
|
|
1490
|
+
var companyIn = document.getElementById('companyIn');
|
|
1491
|
+
if (companyIn) companyIn.value = '';
|
|
1492
|
+
goStep(nextStep(cur));
|
|
1493
|
+
} else if (cur < 6) {
|
|
1494
|
+
goStep(nextStep(cur));
|
|
1495
|
+
} else {
|
|
1496
|
+
finish();
|
|
1497
|
+
}
|
|
1498
|
+
}
|
|
1499
|
+
|
|
1500
|
+
function nextStep(n) {
|
|
1501
|
+
if (n === 4 && profile.purpose !== 'work') return 6;
|
|
1502
|
+
return n + 1;
|
|
1503
|
+
}
|
|
1504
|
+
|
|
1505
|
+
function advanceFrom(n) {
|
|
1506
|
+
goStep(nextStep(n));
|
|
1507
|
+
}
|
|
1508
|
+
|
|
1509
|
+
function goStep(n) {
|
|
1510
|
+
|
|
1511
|
+
if (cur === 4) profile.name = (document.getElementById('nameIn').value || '').trim();
|
|
1512
|
+
if (cur === 5) profile.company = (document.getElementById('companyIn').value || '').trim();
|
|
1513
|
+
|
|
1514
|
+
if (n === 1) {
|
|
1515
|
+
buildPills('purposePills', PURPOSES, false, function(item) {
|
|
1516
|
+
profile.purpose = item.id;
|
|
1517
|
+
setTimeout(function(){ goStep(2); }, 280);
|
|
1518
|
+
}, profile.purpose ? [profile.purpose] : []);
|
|
1519
|
+
}
|
|
1520
|
+
if (n === 2) {
|
|
1521
|
+
var cfg = ROLES_BY_PURPOSE[profile.purpose] || ROLES_BY_PURPOSE._default;
|
|
1522
|
+
document.getElementById('s2Heading').textContent = cfg.heading;
|
|
1523
|
+
buildPills('rolePills', cfg.roles, false, function(item) {
|
|
1524
|
+
profile.role = item.id;
|
|
1525
|
+
setTimeout(function(){ goStep(3); }, 280);
|
|
1526
|
+
}, profile.role ? [profile.role] : []);
|
|
1527
|
+
}
|
|
1528
|
+
if (n === 3) {
|
|
1529
|
+
var s3 = document.getElementById('s3');
|
|
1530
|
+
applyFontJoke(s3);
|
|
1531
|
+
var taskHeading = TASK_HEADINGS_BY_ROLE[profile.role] || TASK_HEADING_DEFAULT;
|
|
1532
|
+
document.getElementById('s3Heading').textContent = taskHeading;
|
|
1533
|
+
buildPills('taskPills', TASKS, true, function(item) {
|
|
1534
|
+
profile.tasks = [];
|
|
1535
|
+
document.querySelectorAll('#taskPills .pill.selected').forEach(function(p){
|
|
1536
|
+
profile.tasks.push(p.dataset.id);
|
|
1537
|
+
});
|
|
1538
|
+
}, profile.tasks);
|
|
1539
|
+
}
|
|
1540
|
+
if (n === 6) {
|
|
1541
|
+
var s6 = document.getElementById('s6');
|
|
1542
|
+
applyFontJoke(s6);
|
|
1543
|
+
buildPills('appPills', getRelevantApps(), true, function(item) {
|
|
1544
|
+
profile.apps = [];
|
|
1545
|
+
document.querySelectorAll('#appPills .pill.selected').forEach(function(p){
|
|
1546
|
+
profile.apps.push(p.dataset.id);
|
|
1547
|
+
});
|
|
1548
|
+
}, profile.apps);
|
|
1549
|
+
}
|
|
1550
|
+
|
|
1551
|
+
document.getElementById('s' + cur).classList.remove('active');
|
|
1552
|
+
document.getElementById('s' + n).classList.add('active');
|
|
1553
|
+
cur = n;
|
|
1554
|
+
updateDots(n);
|
|
1555
|
+
|
|
1556
|
+
document.getElementById('backBtn').hidden = (n <= 1 || n > 6);
|
|
1557
|
+
document.getElementById('footerArea').style.display = (n > 6) ? 'none' : '';
|
|
1558
|
+
|
|
1559
|
+
if (n === 4) setTimeout(function(){ document.getElementById('nameIn').focus(); }, 80);
|
|
1560
|
+
if (n === 5) setTimeout(function(){ document.getElementById('companyIn').focus(); }, 80);
|
|
1561
|
+
}
|
|
1562
|
+
|
|
1563
|
+
function finish() {
|
|
1564
|
+
if (!profile.name) profile.name = (document.getElementById('nameIn').value || '').trim();
|
|
1565
|
+
if (!profile.company) profile.company = (document.getElementById('companyIn').value || '').trim();
|
|
1566
|
+
|
|
1567
|
+
document.getElementById('s' + cur).classList.remove('active');
|
|
1568
|
+
document.getElementById('sDone').classList.add('active');
|
|
1569
|
+
document.getElementById('footerArea').style.display = 'none';
|
|
1570
|
+
document.getElementById('backBtn').hidden = true;
|
|
1571
|
+
|
|
1572
|
+
if (window.slicc) {
|
|
1573
|
+
slicc.lick({ action: 'onboarding-complete', data: profile });
|
|
1574
|
+
}
|
|
1575
|
+
}
|
|
1576
|
+
|
|
1577
|
+
function startWizard() {
|
|
1578
|
+
document.getElementById('sDone').classList.remove('active');
|
|
1579
|
+
document.getElementById('s1').classList.add('active');
|
|
1580
|
+
document.getElementById('footerArea').style.display = '';
|
|
1581
|
+
|
|
1582
|
+
buildPills('purposePills', PURPOSES, false, function(item) {
|
|
1583
|
+
profile.purpose = item.id;
|
|
1584
|
+
setTimeout(function(){ goStep(2); }, 280);
|
|
1585
|
+
}, profile.purpose ? [profile.purpose] : []);
|
|
1586
|
+
|
|
1587
|
+
updateDots(1);
|
|
1588
|
+
document.getElementById('backBtn').hidden = true;
|
|
1589
|
+
document.getElementById('dots').children[5].style.display = 'none';
|
|
1590
|
+
}
|
|
1591
|
+
|
|
1592
|
+
function showAlreadyComplete() {
|
|
1593
|
+
var wizard = document.querySelector('.sprinkle-action-card');
|
|
1594
|
+
if (wizard) wizard.remove();
|
|
1595
|
+
}
|
|
1596
|
+
|
|
1597
|
+
['s1','s2','s3','s4','s5','s6','sDone'].forEach(function(id){
|
|
1598
|
+
var el = document.getElementById(id);
|
|
1599
|
+
if (el) el.classList.remove('active');
|
|
1600
|
+
});
|
|
1601
|
+
|
|
1602
|
+
function bootByMarker() {
|
|
1603
|
+
if (!window.slicc || typeof slicc.exists !== 'function') {
|
|
1604
|
+
startWizard();
|
|
1605
|
+
return;
|
|
1606
|
+
}
|
|
1607
|
+
Promise.resolve(slicc.exists('/shared/.welcomed')).then(
|
|
1608
|
+
function(welcomed) { welcomed ? showAlreadyComplete() : startWizard(); },
|
|
1609
|
+
function() { startWizard(); }
|
|
1610
|
+
);
|
|
1611
|
+
}
|
|
1612
|
+
bootByMarker();
|
|
1613
|
+
<\/script>
|
|
1614
|
+
</body>
|
|
1615
|
+
</html>
|
|
1616
|
+
`;
|
|
672
1617
|
|
|
673
1618
|
// src/dummy/extras.ts
|
|
674
1619
|
var day = 864e5;
|
|
@@ -803,60 +1748,23 @@ var memories = [
|
|
|
803
1748
|
updatedAt: now - 7 * day
|
|
804
1749
|
}
|
|
805
1750
|
];
|
|
806
|
-
var sprinkleStyle = `
|
|
807
|
-
body { margin: 0; padding: 16px; font: 13px/1.45 var(--font, system-ui, sans-serif); color: var(--fg); background: var(--bg); }
|
|
808
|
-
h1 { font-size: 15px; margin: 0 0 12px; }
|
|
809
|
-
ul { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
|
|
810
|
-
li { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
|
|
811
|
-
li .state { margin-left: auto; color: var(--muted); }
|
|
812
|
-
li.done .state { color: var(--positive); }
|
|
813
|
-
button { font: inherit; padding: 4px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); cursor: pointer; }
|
|
814
|
-
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
|
|
815
|
-
.actions { display: flex; gap: 8px; }
|
|
816
|
-
p.note { color: var(--muted); }
|
|
817
|
-
`;
|
|
818
|
-
var sprinkleScript = `
|
|
819
|
-
document.addEventListener('click', (event) => {
|
|
820
|
-
const button = event.target.closest('[data-event]');
|
|
821
|
-
if (!button) return;
|
|
822
|
-
parent.postMessage({ type: 'sprinkle-event', event: button.dataset.event, detail: button.dataset.detail ?? null }, '*');
|
|
823
|
-
const note = document.querySelector('.note');
|
|
824
|
-
if (note) note.textContent = 'Sent \u201C' + button.textContent.trim() + '\u201D to the agent.';
|
|
825
|
-
});
|
|
826
|
-
`;
|
|
827
|
-
function page2(body) {
|
|
828
|
-
return `<!doctype html><html><head><meta charset="utf-8"><style>${sprinkleStyle}</style></head><body>${body}<script>${sprinkleScript}<\/script></body></html>`;
|
|
829
|
-
}
|
|
830
1751
|
var sprinkles = [
|
|
831
1752
|
{
|
|
832
|
-
id: "
|
|
833
|
-
name: "
|
|
834
|
-
title: "
|
|
835
|
-
icon: "
|
|
836
|
-
agentId: "cone-
|
|
837
|
-
html:
|
|
838
|
-
|
|
839
|
-
<li class="done">Retry pull request merged <span class="state">done</span></li>
|
|
840
|
-
<li class="done">Release notes drafted <span class="state">done</span></li>
|
|
841
|
-
<li>Docs updated to Celsius <span class="state">in review</span></li>
|
|
842
|
-
<li>Staging smoke test <span class="state">waiting</span></li>
|
|
843
|
-
</ul>
|
|
844
|
-
<div class="actions"><button class="primary" data-event="ship" data-detail="1.9.0">Ship 1.9.0</button><button data-event="hold">Hold</button></div>
|
|
845
|
-
<p class="note"></p>`)
|
|
1753
|
+
id: "welcome",
|
|
1754
|
+
name: "welcome",
|
|
1755
|
+
title: "Welcome",
|
|
1756
|
+
icon: "hand",
|
|
1757
|
+
agentId: "cone-sliccy",
|
|
1758
|
+
html: welcome_default,
|
|
1759
|
+
inline: true
|
|
846
1760
|
},
|
|
847
1761
|
{
|
|
848
|
-
id: "
|
|
849
|
-
name: "
|
|
850
|
-
title: "
|
|
851
|
-
icon: "
|
|
1762
|
+
id: "suggestions",
|
|
1763
|
+
name: "suggestions",
|
|
1764
|
+
title: "Suggestions",
|
|
1765
|
+
icon: "ice-cream-cone",
|
|
852
1766
|
agentId: "cone-sliccy",
|
|
853
|
-
html:
|
|
854
|
-
<ul>
|
|
855
|
-
<li>Reply to the vendor about Thursday <button data-event="done" data-detail="vendor">Done</button></li>
|
|
856
|
-
<li>Renew the staging certificate <button data-event="done" data-detail="certificate">Done</button></li>
|
|
857
|
-
<li>Move the cache to KV <button data-event="done" data-detail="kv">Done</button></li>
|
|
858
|
-
</ul>
|
|
859
|
-
<p class="note"></p>`)
|
|
1767
|
+
html: suggestions_default
|
|
860
1768
|
}
|
|
861
1769
|
];
|
|
862
1770
|
var tray = {
|
|
@@ -1468,8 +2376,8 @@ function work() {
|
|
|
1468
2376
|
{
|
|
1469
2377
|
type: "delegation",
|
|
1470
2378
|
kind: "sprinkle",
|
|
1471
|
-
scoop: "
|
|
1472
|
-
text: "Opened the
|
|
2379
|
+
scoop: "suggestions",
|
|
2380
|
+
text: "Opened the suggestions sprinkle"
|
|
1473
2381
|
},
|
|
1474
2382
|
{ type: "delegation", kind: "drop", scoop: "amber-heron", text: "Wrapped up amber-heron" }
|
|
1475
2383
|
]
|
|
@@ -1986,6 +2894,19 @@ var queues = { "cone-kitchen": showcaseQueue() };
|
|
|
1986
2894
|
var conversations = {
|
|
1987
2895
|
"cone-kitchen": showcase(),
|
|
1988
2896
|
"cone-sliccy": [
|
|
2897
|
+
{
|
|
2898
|
+
id: "m-s0",
|
|
2899
|
+
role: "assistant",
|
|
2900
|
+
status: "done",
|
|
2901
|
+
createdAt: at2(-24 * 60),
|
|
2902
|
+
parts: [
|
|
2903
|
+
{
|
|
2904
|
+
type: "text",
|
|
2905
|
+
text: "Hi, I am sliccy. Tell me a little about yourself, and I will set things up for you."
|
|
2906
|
+
},
|
|
2907
|
+
{ type: "sprinkle", sprinkle: "welcome" }
|
|
2908
|
+
]
|
|
2909
|
+
},
|
|
1989
2910
|
{
|
|
1990
2911
|
id: "m-s1",
|
|
1991
2912
|
role: "user",
|
|
@@ -2414,60 +3335,6 @@ var DummyMonitor = class extends Emitter {
|
|
|
2414
3335
|
}
|
|
2415
3336
|
};
|
|
2416
3337
|
|
|
2417
|
-
// src/dummy/settings.ts
|
|
2418
|
-
var key = "slicc-ui.settings";
|
|
2419
|
-
var DummySettings = class extends Emitter {
|
|
2420
|
-
#settings;
|
|
2421
|
-
#accounts;
|
|
2422
|
-
#models;
|
|
2423
|
-
#storage;
|
|
2424
|
-
#clock;
|
|
2425
|
-
constructor(defaults2, models2, accounts2, storage, clock2) {
|
|
2426
|
-
super();
|
|
2427
|
-
this.#storage = storage;
|
|
2428
|
-
this.#clock = clock2;
|
|
2429
|
-
this.#models = models2;
|
|
2430
|
-
this.#accounts = accounts2.map((account) => ({ ...account }));
|
|
2431
|
-
this.#settings = { ...defaults2, ...this.#load() };
|
|
2432
|
-
}
|
|
2433
|
-
#load() {
|
|
2434
|
-
try {
|
|
2435
|
-
return JSON.parse(this.#storage?.getItem(key) ?? "{}");
|
|
2436
|
-
} catch {
|
|
2437
|
-
return {};
|
|
2438
|
-
}
|
|
2439
|
-
}
|
|
2440
|
-
get() {
|
|
2441
|
-
return { ...this.#settings };
|
|
2442
|
-
}
|
|
2443
|
-
update(patch) {
|
|
2444
|
-
this.#settings = { ...this.#settings, ...patch };
|
|
2445
|
-
this.#storage?.setItem(key, JSON.stringify(this.#settings));
|
|
2446
|
-
this.emit("settings", this.get());
|
|
2447
|
-
}
|
|
2448
|
-
models() {
|
|
2449
|
-
return this.#models;
|
|
2450
|
-
}
|
|
2451
|
-
accounts() {
|
|
2452
|
-
return this.#accounts.map((account) => ({ ...account }));
|
|
2453
|
-
}
|
|
2454
|
-
#set(id, patch) {
|
|
2455
|
-
this.#accounts = this.#accounts.map(
|
|
2456
|
-
(account) => account.id === id ? { ...account, ...patch } : account
|
|
2457
|
-
);
|
|
2458
|
-
this.emit("accounts", this.accounts());
|
|
2459
|
-
}
|
|
2460
|
-
async connect(id) {
|
|
2461
|
-
await this.#clock.sleep(10);
|
|
2462
|
-
const account = this.#accounts.find((candidate) => candidate.id === id);
|
|
2463
|
-
const identity = account?.identity || `${id}-user@example.com`;
|
|
2464
|
-
this.#set(id, { status: "connected", identity });
|
|
2465
|
-
}
|
|
2466
|
-
disconnect(id) {
|
|
2467
|
-
this.#set(id, { status: "disconnected" });
|
|
2468
|
-
}
|
|
2469
|
-
};
|
|
2470
|
-
|
|
2471
3338
|
// src/dummy/sprinkles.ts
|
|
2472
3339
|
var DummySprinkles = class extends Emitter {
|
|
2473
3340
|
#sprinkles;
|
|
@@ -2484,13 +3351,12 @@ var DummySprinkles = class extends Emitter {
|
|
|
2484
3351
|
const sprinkle = this.#sprinkles.find((candidate) => candidate.id === id);
|
|
2485
3352
|
if (!sprinkle) return;
|
|
2486
3353
|
const data = payload ?? {};
|
|
2487
|
-
const what = data.event ? `\u201C${data.event}\u201D${data.detail ? ` (${data.detail})` : ""}` : "an event";
|
|
2488
3354
|
this.#agent.lick(
|
|
2489
3355
|
sprinkle.agentId,
|
|
2490
3356
|
"sprinkle",
|
|
2491
3357
|
sprinkle.title,
|
|
2492
|
-
|
|
2493
|
-
JSON.stringify(
|
|
3358
|
+
data.action || "event",
|
|
3359
|
+
JSON.stringify(data.data ?? null, null, 2)
|
|
2494
3360
|
);
|
|
2495
3361
|
}
|
|
2496
3362
|
};
|