@kitkat-vn/kitcode 0.2.0-staging.8 → 0.3.0-staging.15

package/src/onboarding-window.mjs

@@ -5,16 +5,35 @@ import {
   setupPlatformTheme,
 } from './onboarding-platform.mjs';
 import {contentSecurityPolicy, fontFaces} from './window-page.mjs';
+import {WELCOME_ENGLISH, WELCOME_TESTER_WORDS, WELCOME_WORDS} from './welcome-words.mjs';
+
+// A word into the page's markup, where it is text: the words are this package's own, but a word is never markup.
+function text(value) {
+  return String(value).replace(/[&<>"']/g, (character) => `&#${character.charCodeAt(0)};`);
+}
+
+// A word into the page's script: JSON, with every "<" escaped, so that no word can end the script element.
+function scriptValue(value) {
+  return JSON.stringify(value).replace(/</g, '\\u003c');
+}
 
 // `diagnostics`: whether this is a tester build (src/diagnostics.mjs), unless a test says. Then, and only then, Welcome says
-// that the build sends diagnostic logs to KitCode's staging server, and what they never hold, and asks, optionally, for the
-// email the tester was invited with, so that staff can find their logs by it. Without it the page is as it was, byte for
-// byte.
+// that the build sends diagnostic logs to KitCode's server, and what they never hold, and asks, optionally, for the email the
+// tester was invited with, so that staff can find their logs by it (rows 78-80 of the words file, since 2026-10-22 in
+// Vietnamese: src/welcome-words.mjs). Without it the page holds none of those words.
 export function renderOnboardingWindow(platform = resolveSetupPlatform(), {diagnostics = diagnosticsEnabled()} = {}) {
   const theme = setupPlatformTheme(platform);
+  // The words the page's script writes, and nothing else: a tester build's words are in its markup alone, so any other
+  // build's page holds none of them.
+  const scriptWords = {
+    messages: WELCOME_WORDS.messages,
+    buttons: WELCOME_WORDS.buttons,
+    projects: {empty: WELCOME_WORDS.projects.empty, removeTitle: WELCOME_WORDS.projects.removeTitle, removeName: WELCOME_WORDS.projects.removeName},
+    english: {pending: WELCOME_ENGLISH.pending, tracked: WELCOME_ENGLISH.tracked, added: WELCOME_ENGLISH.added},
+  };
   // The page's one stylesheet and one script, kept apart so that its policy allows exactly them.
   const style = `
-    ${fontFaces(['fira-code'])}
+    ${fontFaces(['jetbrains-mono'])}
 
     :root {
       color-scheme: dark;
@@ -24,7 +43,7 @@ export function renderOnboardingWindow(platform = resolveSetupPlatform(), {diagn
       --grey-text: #88888e;
       --white-text: #e1e1e6;
       --error: #ff9d9d;
-      --font-mono: 'Fira Code', 'Courier New', Courier, ui-monospace, monospace;
+      --font-mono: 'JetBrains Mono', 'Courier New', Courier, ui-monospace, monospace;
     }
 
     * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -227,9 +246,8 @@ export function renderOnboardingWindow(platform = resolveSetupPlatform(), {diagn
 
     .option {
       position: relative;
-      width: 72px;
       height: 38px;
-      flex: 0 0 72px;
+      flex: 0 0 auto;
     }
 
     .option input {
@@ -243,14 +261,17 @@ export function renderOnboardingWindow(platform = resolveSetupPlatform(), {diagn
       white-space: nowrap;
     }
 
+    /* At least 72 px, as the English answers were, and as wide as its words with 12 px either side: "[ KHÔNG ]" filled a
+       72 px card, while "[ CÓ ]" keeps the 72 px it had, with about 13 px either side. */
     .option-card {
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      width: 72px;
+      min-width: 72px;
       height: 38px;
       background: transparent;
-      padding: 0;
+      padding: 0 12px;
+      white-space: nowrap;
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 0.5px;
@@ -423,13 +444,14 @@ export function renderOnboardingWindow(platform = resolveSetupPlatform(), {diagn
       margin: 12px 0;
     }
 
+    /* The message line takes two lines when a message needs them, as the deck writes rows 66 and 76 (the plan's question
+       5c): never cut with an ellipsis. A message's own line break is the deck's. */
     .message.comment-text {
       min-width: 0;
       color: var(--white-text);
       font-size: 11px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+      white-space: pre-line;
+      overflow-wrap: break-word;
     }
 
     .message[data-state="error"] { color: var(--error); }
@@ -498,9 +520,14 @@ ${diagnostics ? `
     const setupContent = document.getElementById('setupContent');
     const railItems = [...document.querySelectorAll('.rail-item')];
     const stepSections = [...document.querySelectorAll('[data-setup-step]')];
-    const SAVE_LABEL = '+ SAVE AND OPEN KITCODE ->';${diagnostics ? `
+    const WORDS = ${scriptValue(scriptWords)};${diagnostics ? `
     const invitedEmail = document.getElementById('invitedEmail');` : ''}
     const FOLDER_ICON = '<svg class="dropzone-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
+    // A word with its count or name in place, by a function, so that a "$&" in a folder's name stays the name's own.
+    function fill(template, values) {
+      return template.replace(/\\{(N|name)\\}/g, (_match, key) => String(values[key]));
+    }
+
     let persistedProjects = [];
     let pendingProjects = [];
     let saving = false;
@@ -572,7 +599,8 @@ ${diagnostics ? `
       path.className = 'project-path';
       path.textContent = project.repoRoot;
       meta.className = 'project-meta';
-      meta.textContent = (project.sourceType || 'vibe').toUpperCase() + ' · ' + (kind === 'pending' ? 'PENDING' : 'TRACKED');
+      meta.lang = 'en';
+      meta.textContent = (project.sourceType || 'vibe').toUpperCase() + ' · ' + (kind === 'pending' ? WORDS.english.pending : WORDS.english.tracked);
       copy.append(name, path);
       row.append(copy, meta);
 
@@ -580,20 +608,20 @@ ${diagnostics ? `
       remove.type = 'button';
       remove.dataset.testid = 'remove-project';
       remove.textContent = 'x';
-      remove.title = 'Remove project';
-      remove.setAttribute('aria-label', 'Remove ' + projectName(project));
+      remove.title = WORDS.projects.removeTitle;
+      remove.setAttribute('aria-label', fill(WORDS.projects.removeName, {name: projectName(project)}));
       remove.addEventListener('click', async () => {
         if (kind === 'pending') {
           pendingProjects = pendingProjects.filter((candidate) => candidate.id !== project.id);
           renderProjects();
-          setFeedback('Project removed.', 'normal', 'projects:removed');
+          setFeedback(WORDS.messages.removed, 'normal', 'projects:removed');
           return;
         }
 
         if (!bridge?.removeProject) {
           persistedProjects = persistedProjects.filter((candidate) => candidate.id !== project.id);
           renderProjects();
-          setFeedback('Project removed from this setup.', 'normal', 'projects:removed');
+          setFeedback(WORDS.messages.removedFromSetup, 'normal', 'projects:removed');
           return;
         }
 
@@ -602,17 +630,17 @@ ${diagnostics ? `
           const result = await bridge.removeProject(project.id);
           if (!result.ok) {
             remove.disabled = false;
-            setFeedback(result.error || 'Project could not be removed.', 'error', 'error:remove-project');
+            setFeedback(result.error || WORDS.messages.removeFailed, 'error', 'error:remove-project');
             return;
           }
           persistedProjects = Array.isArray(result.projects)
             ? result.projects
             : persistedProjects.filter((candidate) => candidate.id !== project.id);
           renderProjects();
-          setFeedback('Project removed.', 'normal', 'projects:removed');
+          setFeedback(WORDS.messages.removed, 'normal', 'projects:removed');
         } catch {
           remove.disabled = false;
-          setFeedback('Project could not be removed. Try again.', 'error', 'error:remove-project');
+          setFeedback(WORDS.messages.removeFailedRetry, 'error', 'error:remove-project');
         }
       });
       row.append(remove);
@@ -623,14 +651,17 @@ ${diagnostics ? `
     function renderProjects() {
       projectList.textContent = '';
       const projects = persistedProjects.concat(pendingProjects);
-      projectCount.textContent = projects.length + ' ADDED';
+      projectCount.textContent = fill(WORDS.english.added, {N: projects.length});
       projectList.classList.toggle('is-empty', !projects.length);
       projectList.classList.toggle('tech-box-white', !projects.length);
 
       if (!projects.length) {
         const empty = document.createElement('div');
         empty.className = 'empty-state';
-        empty.innerHTML = FOLDER_ICON + '<span>No projects added</span>';
+        empty.innerHTML = FOLDER_ICON;
+        const label = document.createElement('span');
+        label.textContent = WORDS.projects.empty;
+        empty.append(label);
         projectList.append(empty);
         return;
       }
@@ -692,11 +723,11 @@ ${diagnostics ? `
     renderProjects();
 
     pickFolders.addEventListener('click', async () => {
-      setFeedback('Opening the native multi-folder picker...', 'normal', 'projects:select');
+      setFeedback(WORDS.messages.picking, 'normal', 'projects:select');
       try {
         const result = await bridge.selectFolders();
         if (result.canceled) {
-          setFeedback('Project selection canceled.', 'normal', 'projects:unchanged');
+          setFeedback(WORDS.messages.pickCanceled, 'normal', 'projects:unchanged');
           return;
         }
 
@@ -713,26 +744,26 @@ ${diagnostics ? `
         renderProjects();
         const added = (result.projects || []).length - duplicates;
         setFeedback(
-          added ? added + ' project' + (added === 1 ? '' : 's') + ' ready to add.' : 'Those projects are already added.',
+          added ? fill(WORDS.messages.readyToAdd, {N: added}) : WORDS.messages.alreadyAdded,
           'normal',
           duplicates ? 'projects:deduplicated' : 'projects:pending'
         );
       } catch {
-        setFeedback('Folder picker could not open. Restart setup and try again.', 'error', 'error:folder-picker');
+        setFeedback(WORDS.messages.pickerFailed, 'error', 'error:folder-picker');
       }
     });
 
     saveButton.addEventListener('click', async () => {
       if (saving) return;
       if (!persistedProjects.length && !pendingProjects.length) {
-        setFeedback('Add at least one readable project folder.', 'error', 'error:no-projects');
+        setFeedback(WORDS.messages.noProjects, 'error', 'error:no-projects');
         pickFolders.focus();
         return;
       }
 
       setBusy(true);
-      saveButton.textContent = 'Saving...';
-      setFeedback('Saving projects and preferences...', 'normal', 'setup:save');
+      saveButton.textContent = WORDS.buttons.saving;
+      setFeedback(WORDS.messages.saving, 'normal', 'setup:save');
       const autoTrack = document.querySelector('input[name="autoTrack"]:checked').value === 'yes';
       const companionView = 'mini';
 
@@ -753,17 +784,17 @@ ${diagnostics ? `
 
         if (!result.ok) {
           setBusy(false);
-          saveButton.textContent = 'Retry Save';
-          setFeedback(result.error || 'Setup could not be saved.', 'error', 'error:retry-available');
+          saveButton.textContent = WORDS.buttons.retry;
+          setFeedback(result.error || WORDS.messages.saveFailed, 'error', 'error:retry-available');
           return;
         }
 
-        saveButton.textContent = 'Setup Complete';
-        setFeedback('Setup complete. Opening KitCode companion...', 'success', 'setup:complete');
+        saveButton.textContent = WORDS.buttons.saved;
+        setFeedback(WORDS.messages.saved, 'success', 'setup:complete');
       } catch {
         setBusy(false);
-        saveButton.textContent = 'Retry Save';
-        setFeedback('Setup request failed. Your selections are still here.', 'error', 'error:retry-available');
+        saveButton.textContent = WORDS.buttons.retry;
+        setFeedback(WORDS.messages.requestFailed, 'error', 'error:retry-available');
       }
     });
 
@@ -789,7 +820,7 @@ ${diagnostics ? `
 
     if (!bridge) {
       setBusy(true);
-      setFeedback('KitCode setup bridge is unavailable. Close this window and run kitcode setup again.', 'error', 'error:preload');
+      setFeedback(WORDS.messages.noBridge, 'error', 'error:preload');
     } else {
       bridge.initialState().then((state) => {
         persistedProjects = Array.isArray(state.projects) ? state.projects : [];
@@ -812,99 +843,99 @@ ${diagnostics ? `
 
         if (suggestedCount) {
           setFeedback(
-            suggestedCount + ' project folder' + (suggestedCount === 1 ? '' : 's') + ' added from your chat. Review and save to continue.',
+            fill(WORDS.messages.suggested, {N: suggestedCount}),
             'normal',
             'projects:chat-suggested'
           );
         } else {
           setFeedback(
-            persistedProjects.length ? persistedProjects.length + ' tracked project' + (persistedProjects.length === 1 ? '' : 's') + ' loaded.' : 'Add one or more projects to continue.',
+            persistedProjects.length ? fill(WORDS.messages.loaded, {N: persistedProjects.length}) : WORDS.messages.ready,
             'normal',
             persistedProjects.length ? 'projects:loaded' : 'setup:ready'
           );
         }
       }).catch(() => {
         renderProjects();
-        setFeedback('Local setup state could not be loaded. Restart setup and try again.', 'error', 'error:initial-state');
+        setFeedback(WORDS.messages.stateFailed, 'error', 'error:initial-state');
       });
     }
   `;
 
   return `<!doctype html>
-<html lang="en">
+<html lang="vi">
 <head>
   <meta charset="utf-8">
   <meta http-equiv="Content-Security-Policy" content="${contentSecurityPolicy({script, style})}">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>KitCode Setup</title>
+  <title>${text(WELCOME_WORDS.title)}</title>
   <style>${style}</style>
 </head>
 <body data-platform="${theme.id}" data-theme-marker="${theme.marker}">
   <main class="shell window" data-testid="setup-shell">
     ${renderPlatformChrome(theme)}
     <div class="container">
-      <div class="top-tag">local-first setup</div>
+      <div class="top-tag" lang="en">${text(WELCOME_ENGLISH.topTag)}</div>
       <div class="dashed-divider section-divider" aria-hidden="true">==================================================================================================================================================================================================</div>
       <div class="workspace layout steps-panel" id="setupContent" data-testid="setup-step-rail">
         <aside class="sidebar">
           <div class="rail-item is-active" data-step="tracking" data-testid="setup-rail-tracking">
             <span class="rail-badge tech-box-red">01</span>
-            <span class="rail-label">START TRACKING<br>AFTER SETUP</span>
+            <span class="rail-label">${text(WELCOME_WORDS.rail.tracking.toUpperCase())}</span>
           </div>
           <div class="step-connector" aria-hidden="true"></div>
           <div class="rail-item" data-step="projects" data-testid="setup-rail-projects">
             <span class="rail-badge tech-box-red">02</span>
-            <span class="rail-label">PROJECTS</span>
+            <span class="rail-label">${text(WELCOME_WORDS.rail.projects.toUpperCase())}</span>
           </div>${diagnostics ? `
           <div class="step-connector" aria-hidden="true"></div>
           <div class="rail-item" data-step="diagnostics" data-testid="setup-rail-diagnostics">
             <span class="rail-badge tech-box-red">03</span>
-            <span class="rail-label">DIAGNOSTICS</span>
+            <span class="rail-label">${text(WELCOME_TESTER_WORDS.rail.toUpperCase())}</span>
           </div>` : ''}
         </aside>
         <div class="content">
           <fieldset class="step" id="trackingStep" data-setup-step="tracking">
-            <legend class="section-title">Start tracking after setup?</legend>
-            <div class="option-group" id="autoTrackGroup" role="radiogroup" aria-label="Start tracking after setup" data-next-focus="pickFolders">
+            <legend class="section-title">${text(WELCOME_WORDS.tracking.question)}</legend>
+            <div class="option-group" id="autoTrackGroup" role="radiogroup" aria-label="${text(WELCOME_WORDS.tracking.groupName)}" data-next-focus="pickFolders">
               <label class="option">
                 <input type="radio" name="autoTrack" value="yes" checked data-testid="auto-track-yes">
-                <span class="option-card btn btn-red tech-box-red option-mark">[ YES ]</span>
+                <span class="option-card btn btn-red tech-box-red option-mark">[ ${text(WELCOME_WORDS.tracking.yes)} ]</span>
               </label>
               <label class="option">
                 <input type="radio" name="autoTrack" value="no" data-testid="auto-track-no">
-                <span class="option-card btn btn-grey tech-box-grey option-mark">[ NO ]</span>
+                <span class="option-card btn btn-grey tech-box-grey option-mark">[ ${text(WELCOME_WORDS.tracking.no)} ]</span>
               </label>
             </div>
           </fieldset>
           <section class="step projects-step" aria-labelledby="projectsTitle" data-setup-step="projects">
             <div class="step-head">
-              <h2 class="section-title" id="projectsTitle">Select one or more local folders</h2>
-              <span class="project-count" id="projectCount">0 ADDED</span>
+              <h2 class="section-title" id="projectsTitle">${text(WELCOME_WORDS.projects.heading)}</h2>
+              <span class="project-count" id="projectCount" lang="en">${text(WELCOME_ENGLISH.added.replace('{N}', '0'))}</span>
             </div>
-            <div class="project-list is-empty tech-box-white" id="projectList" role="list" aria-label="KitCode projects" data-testid="project-list"></div>
+            <div class="project-list is-empty tech-box-white" id="projectList" role="list" aria-label="${text(WELCOME_WORDS.projects.listName)}" data-testid="project-list"></div>
             <div class="project-actions">
-              <button class="terminal-button tech-box-red" id="pickFolders" type="button" data-testid="add-projects">+ ADD PROJECTS</button>
-              <p class="hint">Existing files become the baseline.<br>Source and diffs stay local.</p>
+              <button class="terminal-button tech-box-red" id="pickFolders" type="button" data-testid="add-projects">+ ${text(WELCOME_WORDS.projects.add.toUpperCase())}</button>
+              <p class="hint">${WELCOME_WORDS.projects.hint.split('\n').map(text).join('<br>')}</p>
             </div>
           </section>${diagnostics ? `
           <section class="step diagnostics-step" aria-labelledby="diagnosticsTitle" data-setup-step="diagnostics" data-testid="setup-diagnostics">
-            <h2 class="section-title" id="diagnosticsTitle">This test build sends diagnostic logs</h2>
-            <p>This test build of KitCode sends diagnostic logs to KitCode’s staging server: KitCode’s own events and errors, such as the tracker starting or a hook failing, so that a problem you meet can be traced without asking you for it. They never hold your code, your files, your prompts or your project names.</p>
-            <label for="invitedEmail">The email address you were invited with, optional: staff find your logs by it.</label>
+            <h2 class="section-title" id="diagnosticsTitle">${text(WELCOME_TESTER_WORDS.heading)}</h2>
+            ${WELCOME_TESTER_WORDS.text.split('\n\n').map((paragraph) => `<p>${text(paragraph)}</p>`).join('\n            ')}
+            <label for="invitedEmail">${text(WELCOME_TESTER_WORDS.emailLabel)}</label>
             <input id="invitedEmail" name="invitedEmail" type="email" autocomplete="email" maxlength="254" spellcheck="false" data-testid="invited-email">
           </section>` : ''}
         </div>
       </div>
       <div class="dashed-divider section-divider" aria-hidden="true">==================================================================================================================================================================================================</div>
       <footer class="content-footer footer-action">
-        <div class="message comment-text" id="message" aria-live="polite">/* Add one or more projects to continue.</div>
-        <button class="terminal-button primary-button tech-box-red" id="saveButton" type="button" data-testid="save-setup">+ SAVE AND OPEN KITCODE -&gt;</button>
+        <div class="message comment-text" id="message" aria-live="polite">/* ${text(WELCOME_WORDS.messages.ready)}</div>
+        <button class="terminal-button primary-button tech-box-red" id="saveButton" type="button" data-testid="save-setup">+ ${text(WELCOME_WORDS.buttons.save)} -&gt;</button>
       </footer>
       <div class="dashed-divider section-divider" aria-hidden="true">==================================================================================================================================================================================================</div>
       <footer class="statusline status-bar">
-        <span class="normal-mode status-mode tech-box-red">NORMAL</span>
-        <span class="status-text" id="statusText" aria-live="polite">+++ setup: ready +++</span>
-        <span class="keyboard-hint status-shortcuts">&#8593;&#8595; move # space select # enter continue</span>
+        <span class="normal-mode status-mode tech-box-red" lang="en">${text(WELCOME_ENGLISH.mode)}</span>
+        <span class="status-text" id="statusText" aria-live="polite" lang="en">+++ setup: ready +++</span>
+        <span class="keyboard-hint status-shortcuts" lang="en">${text(WELCOME_ENGLISH.shortcuts)}</span>
       </footer>
     </div>
   </main>