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