pinokiod 3.23.0 → 3.25.0

package/server/views/init/index.ejs

@@ -55,8 +55,21 @@ img.appicon {
   margin-bottom: 10px;
   opacity: 0.7;
 }
+.explain .well {
+  margin-top: 20px;
+  background: rgba(0,0,0,0.04);
+  /*
+  border-left: 5px solid rgba(0,0,0,0.1);
+  */
+  padding: 20px;
+}
+.explain ol {
+  padding-inline-start: 15px;
+}
 .container {
+/*
     max-width: 800px;
+    */
     /*
     margin: 0 auto;
     padding: 2rem;
@@ -169,9 +182,19 @@ body.dark .tab-nav {
 }
 
 */
+.tab-button h5 {
+  font-size: 15px;
+  width:  100%;
+}
 .tab-button {
+/*
     display: block;
-    padding: 10px 20px;
+    */
+    display: flex;
+    flex-direction: column;
+    width: 220px !important;
+    gap: 5px;
+    padding: 20px;
     background: none;
     border: none;
     cursor: pointer;
@@ -186,9 +209,17 @@ body.dark .tab-nav {
     border-bottom: 2px solid rgba(0,0,0,0.1);
     */
 }
+.tab-button .col {
+  display: block;
+}
+/*
+.tab-button i {
+  padding: 5px;
+}
+*/
 
 body.dark .tab-button {
-  color: rgba(255,255,255,0.6);
+  color: rgba(255,255,255,0.5);
 }
 
 .tab-button:hover {
@@ -213,6 +244,12 @@ body.dark .tab-button:hover {
 
 body.dark .tab-button.active {
     background: rgba(255,255,255,0.06);
+    color: white;
+}
+
+.row {
+  display: flex;
+  align-items: center;
 }
 
 .tab-content {
@@ -441,9 +478,6 @@ textarea:focus, input[type="url"]:focus, input[type="text"]:focus {
 
 
 
-
-
-
 .online {
   width: 10px;
   height: 10px;
@@ -499,7 +533,7 @@ body.dark .m {
   flex-direction: column;
   flex-grow: 1;
   margin: 0 auto;
-  padding: 50px 0;
+  padding: 20px;
 }
 body aside {
 /*
@@ -1106,6 +1140,61 @@ body.dark .bubble {
 body.dark .bubble:before {
   border-color: transparent rgba(0,0,0,0.4) transparent transparent;
 }
+.ai-prompt-section {
+  display: flex;
+}
+
+.ai-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin-bottom: 10px;
+}
+.ai-tab:hover {
+  color: royalblue;
+}
+.ai-tab {
+  cursor: pointer;
+  color: silver;
+  padding: 10px 20px;
+  font-size: 14px;
+  width: 200px;
+}
+.ai-tab.selected {
+  color: white;
+  background: rgba(0,0,0,0.1);
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+  font-weight: bold;
+}
+.ai-tab-content.selected {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: rgba(0,0,0,0.1);
+}
+.ai-tab-content .ai-input {
+  background: white !important;
+  color: black !important;
+}
+.ai-tab-content {
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+  display: none; 
+  padding: 20px;
+}
+.ai-container {
+  flex-grow: 1;
+}
+.ai-container h1 {
+  padding: 0;
+  font-weight: bold;
+  font-size: 25px;
+}
+.md-desc {
+  padding-left: 10px;
+  border-left: 10px solid white;
+}
 
 
 @media only screen and (max-width: 480px) {
@@ -1244,18 +1333,34 @@ body.dark .ace-editor {
       -->
       <div class="tab-container">
         <div class="tab-nav">
-            <button type="button" class="tab-button active" data-tab="launcher">
-                <i class="fa-solid fa-cloud-arrow-down" style="margin-right: 5px;"></i>
-                Git
-            </button>
-            <button type="button" class="tab-button" data-tab="cli">
-                <i class="fa-solid fa-terminal" style="margin-right: 5px;"></i>
-                CLI
-            </button>
-            <button type="button" class="tab-button" data-tab="project">
-                <i class="fa-regular fa-star" style="margin-right: 5px;"></i>
-                New project
-            </button>
+          <button type="button" class="tab-button active" data-tab="launcher">
+            <div class='row'>
+              <i class="fa-solid fa-cloud-arrow-down" style="margin-right: 5px;"></i>
+              <h5>Git Launcher</h5>
+            </div>
+            <div class='row'>Launch any git-based open source project</div>
+          </button>
+          <button type="button" class="tab-button" data-tab="cli">
+            <div class='row'>
+              <i class="fa-solid fa-terminal" style="margin-right: 5px;"></i>
+              <h5>CLI App Launcher</h5>
+            </div>
+            <div class='row'>Run any Terminal app in the browser.</div>
+          </button>
+          <button type="button" class="tab-button" data-tab="project">
+            <div class='row'>
+              <i class="fa-regular fa-star" style="margin-right: 5px;"></i>
+              <h5>Empty Launcher</h5>
+            </div>
+            <div class='row'>Start a new project with a built-in 1-click launcher.</div>
+          </button>
+          <button type="button" class="tab-button" data-tab="quickcreate">
+            <div class='row'>
+              <i class="fa-solid fa-robot" style="margin-right: 5px;"></i>
+              <h5>AI Engineer</h5>
+            </div>
+            <div class='row'>Let AI build a launcher for anything.</div>
+          </button>
         </div>
 
         <form id="bootstrap-form">
@@ -1264,16 +1369,12 @@ body.dark .ace-editor {
             <!--
                 <h2>Create a 1-Click Launcher</h2>
                 -->
+                <!--
                 <div class="header-description">
                   <img class='logo2' src="/pinokio-black.png"/>
                   <div class='bubble'>Create a launcher for any open source project via git.</div>
                 </div>
-                <div class="git-url-input">
-                    <blockquote>Name</blockquote>
-                    <div class='explain'>Enter a new folder name to create.</div>
-                    <input type="text" name="foldername-launcher" id="foldername-launcher" placeholder="folder name">
-                </div>
-                
+                -->
                 <div class="git-url-input">
                     <blockquote>Git URL</blockquote>
                     <div class='explain'>Enter a git repository URL to clone from.</div>
@@ -1358,15 +1459,12 @@ body.dark .ace-editor {
 
             <!-- CLI Tab -->
             <div class="tab-content" id="cli-tab">
+                <!--
                 <div class="header-description">
                   <img class='logo2' src="/pinokio-black.png"/>
                   <div class='bubble'>Create a launcher for any terminal apps (npx, uvx, etc.)</div>
                 </div>
-                <div class="git-url-input">
-                    <blockquote>Name</blockquote>
-                    <div class='explain'>Enter a new folder name to create.</div>
-                    <input type="text" name="foldername-cli" id="foldername-cli" placeholder="folder name">
-                </div>
+                -->
                 <blockquote>Type</blockquote>
                 <div class='explain'>Single-command apps vs. Installable apps.</div>
                 <div class="project-options">
@@ -1413,15 +1511,12 @@ body.dark .ace-editor {
 
             <!-- Project Tab -->
             <div class="tab-content" id="project-tab">
+              <!--
                 <div class="header-description">
                   <img class='logo2' src="/pinokio-black.png"/>
                   <div class='bubble'>Create a new project with a built-in 1-click launcher</div>
                 </div>
-                <div class="git-url-input">
-                    <blockquote>Name</blockquote>
-                    <div class='explain'>Enter a new folder name to create.</div>
-                    <input type="text" name="foldername-new" id="foldername-new" placeholder="folder name">
-                </div>
+                -->
                 <blockquote>Type</blockquote>
                 <div class='explain'>Set up a new 1-click launcher project.</div>
                 <div class="project-options">
@@ -1499,18 +1594,47 @@ body.dark .ace-editor {
 
             </div>
 
-            <!-- AI Prompt Section (shared across both tabs) -->
-            <div class="ai-prompt-section" style="margin-top: 2rem;">
-            <!--
-                <h2>AI Prompt (Optional)</h2>
-                <p>Enter a prompt to build your app with AI assistance.</p>
-                -->
-                <blockquote>What do you want to build?</blockquote>
-                <div class='explain'>(Optional) Explain what the project should do. Will be saved as README.md, and will be automatically used by AI Coding tools to build the app.</div>
+            <!-- Quick Create Tab -->
+            <div class="tab-content" id="quickcreate-tab">
+                <div class="ai-prompt-section">
+                  <div class='ai-tabs'>
+                    <% ai.forEach((item, i) => { %>
+                      <div data-title="<%=item.title%>" class='ai-tab <%=i===0 ? "selected" : ""%>'><%=item.title%></div>
+                    <% }) %>
+                  </div>
+                  <div class='ai-container'>
+                    <% ai.forEach((item, i) => { %>
+                      <div class='ai-tab-content <%=i===0 ? "selected" : ""%>' data-title="<%=item.title%>">
+                        <h1><%=item.title%></h1>
+                        <div class='md-desc'><%=item.description%></div>
+                        <% Object.keys(item.meta).forEach((key) => { %>
+                          <input class='ai-input' type='text' placeholder='<%=item.meta[key]%>' name='<%=key%>'>
+                        <% }) %>
+                        <textarea><%=item.content%></textarea>
+                        <pre class='hidden'><%=item.content%></pre>
+                      </div>
+                    <% }) %>
+                  </div>
                 <!--
-                <blockquote>The prompt will be stored in README.md, and ANY AI coding tool will be automatically instructed about the project (Just say "build the app").</blockquote>
-                -->
-                <div id="aiPrompt" class="ace-editor" data-name="aiPrompt" data-placeholder="Describe what you want to build... (optional)" style="height: 150px;"></div>
+                    <blockquote>What do you want to build?</blockquote>
+                    -->
+                    <textarea class='hidden' id='aiPrompt' data-name="aiPrompt" data-placeholder="Describe what you want to build..." placeholder="What do you want to build?"></textarea>
+                    <!--
+                    <div id="aiPrompt" class="ace-editor" data-name="aiPrompt" data-placeholder="Describe what you want to build..." style="height: 150px;"></div>
+                    -->
+
+                    <!--
+                    <div class='explain'>
+                      <div class='well'>
+                        <ol>
+                          <li>Describe what the project should do, and click "create".</li>
+                          <li>This will be saved inside README.md.</li>
+                          <li>AI coding tools will automatically read the README.md file to figure out what to build. You just need to tell them to "build".</li>
+                        </ol>
+                      </div>
+                    </div>
+                    -->
+                </div>
             </div>
 
             <div class="button-group" style="margin-top: 2rem;">
@@ -1523,9 +1647,48 @@ body.dark .ace-editor {
   </div>
 </main>
 <script>
+const resizeAITextarea = () => {
+  let textarea = document.querySelector(".ai-container .ai-tab-content.selected textarea")
+  textarea.style.height = "";
+  textarea.style.height = textarea.scrollHeight + "px";
+}
 document.addEventListener('DOMContentLoaded', function() {
     // Initialize tabs
     initializeTabs();
+
+    document.querySelector(".ai-tabs").addEventListener("click", (e) => {
+      document.querySelectorAll(".ai-tab").forEach((el) => {
+        el.classList.remove('selected')
+      })
+      e.target.classList.add("selected")
+      document.querySelectorAll(`.ai-tab-content`).forEach((el) => {
+        el.classList.remove("selected")
+      })
+      let title = e.target.getAttribute("data-title")
+      document.querySelector(`.ai-tab-content[data-title="${title}"]`).classList.add('selected')
+      resizeAITextarea()
+    })
+    document.querySelectorAll(".ai-tab-content").forEach((tab) => {
+      tab.addEventListener("input", (e) => {
+        if (e.target.classList.contains("ai-input")) {
+          let name = e.target.name
+          // get all values from all ai-input and replace
+          let els = e.target.closest(".ai-tab-content").querySelectorAll(".ai-input")
+          let vals = {}
+          let pre = e.target.closest(".ai-tab-content").querySelector("pre")
+          let textarea = e.target.closest(".ai-tab-content").querySelector("textarea")
+          resizeAITextarea()
+          let md = pre.textContent
+          for(let el of els) {
+            let pattern = `{{${el.name}}}`
+            md = md.replaceAll(pattern, el.value)
+          }
+          textarea.value = md
+          document.querySelector("#aiPrompt").value = md
+        }
+      })
+    })
+
     
     // Show launcher tab by default
     showTab('launcher');
@@ -1680,6 +1843,11 @@ function showTab(tabName) {
     if (tabName !== 'cli') {
         clearCliInputs();
     }
+
+    if (tabName === "quickcreate") {
+        resizeAITextarea()
+    }
+
 }
 
 function hideAllConditionalOptions() {
@@ -1878,7 +2046,8 @@ function validateForm() {
     const activeTab = document.querySelector('.tab-content.active').id;
     const isLauncher = activeTab === 'launcher-tab';
     const isCli = activeTab === 'cli-tab';
-        const gitUrl = document.getElementById('gitUrl').value.trim();
+    const isQuickCreate = activeTab === 'quickcreate-tab';
+    const gitUrl = document.getElementById('gitUrl').value.trim();
     
     // Validate Git URL for launcher tab
     if (isLauncher) {
@@ -1887,15 +2056,6 @@ function validateForm() {
             alert('Please enter a Git repository URL.');
             return false;
         }
-        const name = document.getElementById('foldername-launcher').value.trim();
-        if (!name) {
-            alert('Please enter a folder name.');
-            return false;
-        }
-        if (name.includes(" ")) {
-            alert('No spaces allowed');
-            return false;
-        }
         
         const projectType = document.querySelector('input[name="projectType"]:checked');
         if (!projectType) {
@@ -1911,16 +2071,6 @@ function validateForm() {
             alert('Please select a CLI type.');
             return false;
         }
-
-        const name = document.getElementById('foldername-cli').value.trim();
-        if (!name) {
-            alert('Please enter a folder name.');
-            return false;
-        }
-        if (name.includes(" ")) {
-            alert('No spaces allowed');
-            return false;
-        }
         
         if (cliType.value === 'instant') {
             const launchCommand = document.querySelector('input[name="launchCommand"]').value.trim();
@@ -1942,23 +2092,18 @@ function validateForm() {
         }
     }
     
+    // Validate quick create tab
+    if (isQuickCreate) {
+        // No additional validation needed for quick create
+    }
+    
     // Validate project tab
-    if (!isLauncher && !isCli) {
+    if (!isLauncher && !isCli && !isQuickCreate) {
         const projectType = document.querySelector('input[name="projectType"]:checked');
         if (!projectType) {
             alert('Please select a project type.');
             return false;
         }
-
-        const name = document.getElementById('foldername-new').value.trim();
-        if (!name) {
-            alert('Please enter a folder name.');
-            return false;
-        }
-        if (name.includes(" ")) {
-            alert('No spaces allowed');
-            return false;
-        }
         
         // Validate Documentation options
         if (projectType.value === 'documentation') {
@@ -1994,10 +2139,28 @@ function handleSubmit(event) {
         return;
     }
 
+    // Prompt for folder name
+    let name = prompt('Enter a folder name to create:');
+    if (!name) {
+        return; // User cancelled or entered empty name
+    }
+    
+    name = name.trim();
+    if (!name) {
+        alert('Please enter a valid folder name.');
+        return;
+    }
+    
+    if (name.includes(' ')) {
+        alert('No spaces allowed in folder names.');
+        return;
+    }
+
     const formData = new FormData(event.target);
     const activeTab = document.querySelector('.tab-content.active').id;
     const isLauncher = activeTab === 'launcher-tab';
     const isCli = activeTab === 'cli-tab';
+    const isQuickCreate = activeTab === 'quickcreate-tab';
     const gitUrl = isLauncher ? formData.get('gitUrl').trim() : '';
 
     // Get values from Ace editors and clean them
@@ -2005,22 +2168,26 @@ function handleSubmit(event) {
     const cloneStartCommandText = aceEditors['cloneStartCommand'] ? aceEditors['cloneStartCommand'].getValue().trim() : '';
     const installCommandText = aceEditors['installCommand'] ? aceEditors['installCommand'].getValue().trim() : '';
     const installableLaunchCommandText = aceEditors['installableLaunchCommand'] ? aceEditors['installableLaunchCommand'].getValue().trim() : '';
-    const aiPromptText = aceEditors['aiPrompt'] ? aceEditors['aiPrompt'].getValue().trim() : '';
+    
+    // Only get AI prompt text if Quick Create tab is active
+//    const aiPromptText = isQuickCreate && aceEditors['aiPrompt'] ? aceEditors['aiPrompt'].getValue().trim() : '';
+    const aiPromptText = isQuickCreate && document.querySelector("#aiPrompt") ? document.querySelector("#aiPrompt").value.trim() : '';
 
     // Set startType and projectType based on active tab
-    let startType, projectType, name;
+    let startType, projectType;
     if (isLauncher) {
         startType = 'clone';
         projectType = formData.get('projectType');
-        name = formData.get("foldername-launcher").trim();
     } else if (isCli) {
         startType = 'new';
         projectType = 'cli';
-        name = formData.get("foldername-cli").trim();
+    } else if (isQuickCreate) {
+        startType = 'new';
+        //projectType = 'empty';
+        projectType = 'ai';
     } else {
         startType = 'new';
         projectType = formData.get('projectType');
-        name = formData.get("foldername-new").trim();
     }
 
     // For CLI category, map the projectType to cliType for backwards compatibility

package/server/views/net.ejs

@@ -430,16 +430,13 @@ body.dark .net {
     </div>
   </h1>
 </header>
-<form class='search'>
-  <div class='app-btns'>
-    <a class='btn create-new' href="/init"><i class="fa-solid fa-plus"></i> Build</a>
-    <a class='btn' id='explore' href="/?mode=explore"><i class="fa-solid fa-magnifying-glass"></i> Discover</a>
-  </div>
-  <input type='search' class="flexible" placeholder='Filter network apps'>
-</form>
 <main>
 <div id='terminal' class='hidden'></div>
 <aside>
+  <div class='btn-tab'>
+    <a href="/init" class='btn'><i class="fa-solid fa-plus"></i> Create</a>
+    <a class='btn' id='explore' href="/?mode=explore"><i class="fa-solid fa-globe"></i> Discover</a>
+  </div>
   <a href="/" class='tab'><i class='fas fa-laptop-code'></i> Local</a>
   <a href="/network" class='tab'><i class="fa-solid fa-wifi"></i> Network</a>
   <% if (list.length > 0) { %>
@@ -452,9 +449,17 @@ body.dark .net {
       <% } %>
     <% }) %>
   <% } %>
-  <div class='tab'><i class="fa-solid fa-code"></i> Dev</div>
 </aside>
 <div class='container'>
+    <form class='search'>
+      <!--
+      <div class='app-btns'>
+        <a class='btn create-new' href="/init"><i class="fa-solid fa-plus"></i> Build</a>
+        <a class='btn' id='explore' href="/?mode=explore"><i class="fa-solid fa-magnifying-glass"></i> Discover</a>
+      </div>
+      -->
+      <input type='search' class="flexible" placeholder='Search apps'>
+    </form>
     <div class='running-apps'>
       <% if (current_host === host) { %>
         <div class='section-header'>

package/server/views/network.ejs

@@ -131,8 +131,10 @@ a.badge {
   text-decoration: none;
 }
 body.dark .btn {
-  color: white;
+  background: rgba(255,255,255,0.05) !important;
+  /*
   border: 1px solid rgba(255,255,255,0.3);
+  */
 }
 body.dark .badge {
   background: rgba(255,255,255,0.1);
@@ -278,7 +280,7 @@ body.dark .config {
   background: rgba(0,0,0,0.9);
   */
   color: black;
-  padding: 10px 100px 0;
+  padding: 50px 50px 0;
   text-align: left;
 }
 .config-header {
@@ -565,6 +567,7 @@ input[type=search] {
 </div>
 </h1>
 </header>
+    <!--
 <form class='search'>
   <div class='app-btns'>
     <a class='btn create-new' href="/init"><i class="fa-solid fa-plus"></i> Build</a>
@@ -572,8 +575,13 @@ input[type=search] {
   </div>
   <input type='search' class="flexible" placeholder='Filter network apps'>
 </form>
+    -->
 <main>
   <aside>
+    <div class='btn-tab'>
+      <a href="/init" class='btn'><i class="fa-solid fa-plus"></i> Create</a>
+      <a class='btn' id='explore' href="/?mode=explore"><i class="fa-solid fa-globe"></i> Discover</a>
+    </div>
     <a href="/" class='tab'><i class='fas fa-laptop-code'></i> Local</a>
     <a href="/network" class='tab selected'><i class="fa-solid fa-wifi"></i> Network</a>
     <% if (list.length > 0) { %>
@@ -582,7 +590,6 @@ input[type=search] {
         <a href="/net/<%=name%>" class='submenu tab'><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=name%> (<%=current_host === host ? 'this machine' : host%>)</a>
       <% }) %>
     <% } %>
-    <div class='tab'><i class="fa-solid fa-code"></i> Dev</div>
   </aside>
   <div class='container'>
     <div class='config'>

package/server/views/partials/dynamic.ejs

@@ -15,7 +15,7 @@
         <div <%=item.default ? 'data-default' : ''%> data-action="<%=JSON.stringify(item.action)%>" class='btn header-item frame-link <%=item.display || ""%>'>
           <div class='tab'><%-item.btn%></div>
         </div>
-      <% } else if (item.run) { %>
+      <% } else if (item.run && typeof item.run === 'string') { %>
         <div data-run="<%=item.run%>" data-cwd="<%=item.cwd%>" class='btn header-item frame-link <%=item.display || ""%>'>
           <div class='tab'><%-item.btn%></div>
         </div>
@@ -36,6 +36,9 @@
         </a>
       <% } else { %>
         <a <%=item.default ? 'data-default' : ''%> data-confirm="<%=item.confirm%>" data-index="<%=index+4%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link <%=item.display || ""%>' <%=item.shell_id ? `data-shell=${item.shell_id}` : ""%> <%=item.script_id ? `data-script=${item.script_id}` : ''%>>
+          <% if (item.running) { %>
+            <i class="fa-solid fa-circle"></i>
+          <% } %>
           <div class='tab'><%-item.btn%></div>
           <% if (item.running) { %>
             <% if (item.online) { %>

package/server/views/partials/menu.ejs

@@ -51,6 +51,9 @@
         </a>
       <% } else { %>
         <a <%=item.default ? 'data-default' : ''%> data-confirm="<%=item.confirm%>" data-index="<%=index%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link <%=item.display || ""%>' <%=item.shell_id ? `data-shell=${item.shell_id}` : ""%> <%=item.script_id ? `data-script=${item.script_id}` : ''%>>
+          <% if (item.running) { %>
+            <i class="fa-solid fa-circle"></i>
+          <% } %>
           <div class='tab'><%-item.btn%></div>
           <% if (item.running) { %>
             <!--

package/server/views/partials/running.ejs

@@ -0,0 +1,22 @@
+<% dynamic.forEach((item, index) => { %>
+  <a <%=item.default ? 'data-default' : ''%> data-confirm="<%=item.confirm%>" data-index="<%=index+4%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link <%=item.display || ""%>' <%=item.shell_id ? `data-shell=${item.shell_id}` : ""%> <%=item.script_id ? `data-script=${item.script_id}` : ''%>>
+    <% if (item.running) { %>
+      <i class="fa-solid fa-circle"></i>
+    <% } %>
+    <div class='tab'><%-item.btn%></div>
+    <% if (item.running) { %>
+      <% if (item.online) { %>
+        <div class='loader shutdown online'>
+        </div>
+      <% } else { %>
+        <div class='loader shutdown'>
+          <button class='btn'>
+          <i class="fa-solid fa-square"></i> Stop
+          </button>
+        </div>
+      <% } %>
+    <% } else { %>
+      <i class="fa-solid fa-angle-right"></i>
+    <% } %>
+  </a>
+<% }) %>

package/server/views/settings.ejs

@@ -417,7 +417,7 @@ body.dark .keys pre {
         <div>Keys are array values stored for unique host names, stored at <code>~/pinokio/key.json</code>, and can be set through <code>pre</code> attributes in pinokio scripts. Here's an example:</div>
         <pre>{
   "openai.com": [
-    "sk-proj-2najBvCGFx18belpjf13T3BlbkFJIAR5KXK031n41WzAsPEn"
+    "12345678-FAKEaccesstoken1234567890abcdef"
   ],
   "x.com": [
     "12345678-FAKEaccesstoken1234567890abcdef",