clay-server 5.2.0-beta.10 → 5.2.0-beta.11

package/lib/public/modules/project-session-visibility-settings.js

@@ -27,12 +27,10 @@ function setSelectState(select, value, disabled) {
   select.disabled = !!disabled;
 }
 
-function isCurrentProject(active) {
-  return !!(active && active.slug && active.slug === store.get('currentSlug'));
-}
-
+// Editable for any authorised selected project: the server re-authorises the
+// exact slug (owner, permission, access, worktree) and echoes it back.
 function isReadOnly(active) {
-  return !active || !active.authorized || active.isWorktree || !isCurrentProject(active);
+  return !active || !active.authorized || active.isWorktree;
 }
 
 function renderActiveState() {
@@ -40,23 +38,26 @@ function renderActiveState() {
   var pending = pendingState();
   var select = selectElement();
   var inheritedHint = document.getElementById("ps-session-visibility-default-inherited-hint");
-  var nonCurrentHint = document.getElementById("ps-session-visibility-default-non-current-hint");
   if (inheritedHint) inheritedHint.classList.toggle("hidden", !(active && active.isWorktree));
-  if (nonCurrentHint) nonCurrentHint.classList.toggle("hidden", !(active && active.authorized && !active.isWorktree && !isCurrentProject(active)));
   if (!select || !active) return;
-  setSelectState(select, active.effectiveValue, isReadOnly(active) || !!(pending && pending.slug === active.slug));
+  // One request at a time: a pending change for any project holds the control.
+  setSelectState(select, active.effectiveValue, isReadOnly(active) || !!pending);
 }
 
-function isAuthorized(project) {
+// The server requires the project owner plus the projectSettings permission.
+// An administrator who is not the owner may see the value but not change it.
+function visibilityAccess(project) {
   var users = store.get('cachedAllUsers') || [];
   var userId = store.get('myUserId');
   var currentUser = null;
   for (var i = 0; i < users.length; i++) {
     if (users[i].id === userId) { currentUser = users[i]; break; }
   }
-  return !!(store.get('isMultiUserMode') && project &&
-    ((project.projectOwnerId && project.projectOwnerId === userId) || (currentUser && currentUser.role === "admin")) &&
-    (!store.get('permissions') || store.get('permissions').projectSettings !== false));
+  var permitted = !store.get('permissions') || store.get('permissions').projectSettings !== false;
+  var owner = !!(project && project.projectOwnerId && project.projectOwnerId === userId);
+  var admin = !!(currentUser && currentUser.role === "admin");
+  var multi = !!(store.get('isMultiUserMode') && project && permitted);
+  return { visible: multi && (owner || admin), editable: multi && owner };
 }
 
 export function initProjectSessionVisibilitySettings() {
@@ -80,7 +81,6 @@ export function initProjectSessionVisibilitySettings() {
   });
 
   store.subscribe(function (state, previous) {
-    if (state.currentSlug !== previous.currentSlug) renderActiveState();
     if (state.connected || previous.connected !== true) return;
     var pending = pendingState();
     if (!pending) return;
@@ -95,10 +95,13 @@ export function initProjectSessionVisibilitySettings() {
 export function populateProjectSessionVisibilitySettings(slug, project) {
   var field = document.getElementById("ps-session-visibility-default-field");
   var select = selectElement();
-  if (field) field.style.display = isAuthorized(project) ? "" : "none";
+  var access = visibilityAccess(project);
+  if (field) field.style.display = access.visible ? "" : "none";
+  var ownerHint = document.getElementById("ps-session-visibility-default-owner-hint");
+  if (ownerHint) ownerHint.classList.toggle("hidden", !(access.visible && !access.editable));
   if (!select) return;
   var value = project && project.sessionVisibilityDefault === "shared" ? "shared" : "private";
-  var active = { slug: slug || "", effectiveValue: value, isWorktree: !!(project && project.isWorktree), authorized: isAuthorized(project) };
+  var active = { slug: slug || "", effectiveValue: value, isWorktree: !!(project && project.isWorktree), authorized: access.editable };
   var pending = pendingState();
   setVisibilityState(active, pending);
   renderActiveState();
@@ -124,7 +127,7 @@ export function handleProjectSessionVisibilityDefault(msg) {
   var active = activeState();
   setVisibilityState(active, null);
   var select = selectElement();
-  if (!select || !active || active.slug !== msg.slug) return;
+  if (!select || !active || active.slug !== msg.slug) { renderActiveState(); return; }
   if (!msg.ok) {
     active = Object.assign({}, active, { effectiveValue: pending.previous });
     setVisibilityState(active, null);

package/lib/public/modules/project-settings.js

@@ -1,76 +1,64 @@
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
-import { trapSettingsFocus, isolateSettingsDialog, confirmSettingsAction } from './server-settings-state.js';
 import { initProjectEnvironment, openProjectEnvironment, projectEnvironmentDirty, discardProjectEnvironment } from './project-settings-environment.js';
 import { enhanceSettingsSelects } from './settings-select.js';
-// Project identity and access in a focused settings dialog.
+// Project identity, access and environment: the Project pane of the unified
+// settings shell. The shell owns the selected target; this pane only renders
+// and edits the project it was last bound to.
 import { refreshIcons } from './icons.js';
 import { showToast } from './utils.js';
 import { parseEmojis } from './markdown.js';
-import { holdNotesForSettings, releaseNotesForSettings } from './sticky-notes.js';
-import { openNotesBrowser, closeNotesBrowser, isNotesBrowserOpen } from './sticky-notes-browser.js';
+import { registerSettingsScope, openSettings, closeSettings, isSettingsShellOpen, activeSettingsScope } from './settings-shell.js';
 import { initProjectSessionVisibilitySettings, populateProjectSessionVisibilitySettings } from './project-session-visibility-settings.js';
 
 var panelEl = null;
-var navItems = null;
 var sections = null;
-var notesBrowserReopen = false;
-var restoreBackground = null;
-var returnFocus = null;
 function settingsSlug() { return store.get("projectSettingsSlug"); }
 function settingsProject() { return store.get("projectSettingsProject"); }
 
 // Emoji categories (reuse from sidebar)
 var EMOJI_CATEGORIES = null;
 
+function renameDirty() {
+  var rename = document.getElementById("ps-rename-form");
+  var project = settingsProject();
+  return !!(rename && project && !rename.classList.contains("hidden") && document.getElementById("ps-rename-input").value.trim() !== (project.name || ""));
+}
+
+function discardDrafts() {
+  discardProjectEnvironment();
+  cancelRename();
+}
+
+var controller = {
+  enter: function () {},
+  activate: function (page) { switchSection(page); },
+  leave: function () { closePsEmojiPicker(); },
+  busy: function (kind) { return kind !== "page" && (store.get("projectEnvironmentEditor") || {}).saving ? "Wait for the environment save to finish." : ""; },
+  leavePrompt: function (kind) {
+    var env = projectEnvironmentDirty();
+    var rename = renameDirty();
+    if (!env && !rename) return null;
+    if (kind === "close") return { message: "Your changes have not been saved. Discard them and close?", action: "Discard changes", apply: discardDrafts };
+    if (kind === "page") return null;
+    if (kind === "project" && rename) return { message: "Your unsaved project name change will be discarded when you switch projects. An unsaved environment draft stays in this tab.", action: "Discard name and switch", apply: cancelRename };
+    return { message: "Your unsaved project changes will remain in this tab. Leave this editor and keep the draft?", action: "Keep draft and leave" };
+  },
+  retarget: bindProjectSettings,
+  refreshTarget: refreshProjectSettings,
+  clearTarget: clearProjectSettings,
+  setEmpty: setPaneEmpty
+};
 
 export function initProjectSettings(emojiCategories) {
   EMOJI_CATEGORIES = emojiCategories;
   panelEl = document.getElementById("project-settings");
   if (!panelEl) return;
-
-  document.body.appendChild(panelEl);
-  var destinations = [{id: 'profile', label: 'General'}, {id: 'access', label: 'Access'}, {id: 'environment', label: 'Environment'}];
-  var nav = panelEl.querySelector('.server-settings-nav-items');
-  var dropdown = document.getElementById('ps-nav-dropdown');
-  destinations.forEach(function (page) {
-    var button = document.createElement('button');
-    button.className = 'settings-nav-item'; button.dataset.section = page.id; button.textContent = page.label;
-    nav.appendChild(button);
-    var option = document.createElement('option'); option.value = page.id; option.textContent = page.label; dropdown.appendChild(option);
-  });
+  controller.pane = panelEl;
+  registerSettingsScope("project", controller);
   initProjectEnvironment();
-  panelEl.addEventListener('click', function (event) { if (event.target === panelEl) closeProjectSettings(); });
-  panelEl.addEventListener('keydown', function (event) {
-    if (event.key === 'Escape' && !event.defaultPrevented) { event.preventDefault(); event.stopPropagation(); closeProjectSettings(); }
-    trapSettingsFocus(event, panelEl);
-  });
-  navItems = panelEl.querySelectorAll(".settings-nav-item");
   sections = panelEl.querySelectorAll(".ps-section");
 
-  // Nav clicks
-  for (var i = 0; i < navItems.length; i++) {
-    navItems[i].addEventListener("click", function () {
-      switchSection(this.dataset.section);
-    });
-  }
-
-  // Mobile dropdown nav
-  var psNavDropdown = document.getElementById("ps-nav-dropdown");
-  if (psNavDropdown) {
-    psNavDropdown.addEventListener("change", function () {
-      switchSection(psNavDropdown.value);
-    });
-  }
-
-  // Close button
-  var closeBtn = document.getElementById("project-settings-close");
-  if (closeBtn) {
-    closeBtn.addEventListener("click", function () {
-      closeProjectSettings();
-    });
-  }
-
   // Profile: rename
   var renameBtn = document.getElementById("ps-rename-btn");
   var renameForm = document.getElementById("ps-rename-form");
@@ -111,98 +99,105 @@ export function initProjectSettings(emojiCategories) {
   }
   if (iconRemoveBtn) {
     iconRemoveBtn.addEventListener("click", function () {
-      if (getWs() && store.get('connected')) {
-        getWs().send(JSON.stringify({ type: "set_project_icon", slug: settingsSlug(), icon: null }));
-      }
-      updateIconPreview(null);
+      var slug = settingsSlug();
+      var previous = { icon: settingsProject() ? settingsProject().icon || null : null };
+      if (slug && sendEdit("set_project_icon", { slug: slug, icon: null }, previous)) updateIconPreview(null);
     });
   }
 
   initProjectSessionVisibilitySettings();
-  store.subscribe(function (next, previous) { if (next.myUserId !== previous.myUserId) closeProjectSettings({ cleanup: true }); });
 }
 
-export function openProjectSettings(slug, project) {
-  if (!panelEl) return;
-  returnFocus = document.activeElement;
-  if (!returnFocus || returnFocus === document.body) returnFocus = document.getElementById("title-bar-project-dropdown");
-  store.set({ projectSettingsSlug: slug, projectSettingsProject: project });
+// Entry for the project context menu and mobile sheet: show this exact
+// project's settings without changing the open workspace.
+export function openProjectSettings(slug) {
+  return openSettings({ scope: "project", page: "profile", slug: slug });
+}
+
+// Bind the pane to one project. Called by the shell for every target change.
+function bindProjectSettings(slug, project) {
+  var same = settingsSlug() === slug;
+  store.set({ projectSettingsSlug: slug, projectSettingsProject: Object.assign({}, project, { name: project.title || project.project || project.name || slug }) });
   var env = store.get("projectEnvironmentEditor");
   if (env && !env.dirty && !env.saving) store.set({ projectEnvironmentEditor: Object.assign({}, env, { loaded: false, loading: false }) });
+  if (same) refreshProjectSettings(slug, project);
+  else { closePsEmojiPicker(); populateProfile(); }
+  var active = panelEl.querySelector(".ps-section.active");
+  if (active && active.dataset.section === "environment") openProjectEnvironment(slug);
+}
 
-  // Set nav title
-  var navTitle = document.getElementById("ps-nav-title");
-  if (navTitle) navTitle.textContent = project.name || slug;
-
-  // Reset to first section
-  switchSection("profile");
-
-  // Populate profile
-  populateProfile();
+function refreshProjectSettings(slug, project) {
+  if (settingsSlug() !== slug) return;
+  var name = project.title || project.project || project.name || slug;
+  store.set({ projectSettingsProject: Object.assign({}, project, { name: name }) });
+  var nameEl = document.getElementById("ps-project-name");
+  if (nameEl) nameEl.textContent = name || "-";
+  updateIconPreview(project.icon || null);
+  populateProjectSessionVisibilitySettings(slug, settingsProject());
+  document.getElementById('ps-project-path').textContent = project.path || (slug === store.get('currentSlug') ? store.get('cwd') : '') || 'Folder information unavailable';
+}
 
+// The selected project is gone or no longer authorised.
+function clearProjectSettings(slug) {
+  var env = store.get("projectEnvironmentEditor") || {};
+  var drafts = Object.assign({}, store.get("projectEnvironmentDrafts") || {});
+  delete drafts[slug];
+  store.set({ projectSettingsSlug: null, projectSettingsProject: null, projectEnvironmentDrafts: drafts });
+  if (env.slug === slug) { store.set({ projectEnvironmentEditor: {} }); }
+  closePsEmojiPicker();
+  cancelRename();
+}
 
-  // Sticky notes must not sit over settings; remember what to restore.
-  if (panelEl.classList.contains("hidden")) {
-    notesBrowserReopen = isNotesBrowserOpen();
-    if (notesBrowserReopen) closeNotesBrowser();
-    holdNotesForSettings();
+var EMPTY_HEADINGS = { loading: "Loading projects", empty: "No project selected", error: "Projects unavailable", lost: "Project unavailable" };
+function setPaneEmpty(text, kind) {
+  var empty = document.getElementById("ps-empty");
+  if (empty) {
+    empty.hidden = !text;
+    document.getElementById("ps-empty-text").textContent = text || "";
+    empty.querySelector("h2").textContent = EMPTY_HEADINGS[kind] || EMPTY_HEADINGS.empty;
   }
+  panelEl.classList.toggle("ps-no-target", !!text);
+}
 
-  // Show panel
-  panelEl.classList.remove("hidden");
-  if (!restoreBackground) restoreBackground = isolateSettingsDialog(panelEl);
-  document.getElementById("project-settings-close").focus();
-  enhanceSettingsSelects(panelEl);
-  refreshIcons();
+// Rename and icon edits are bound to the exact project, request and (for the
+// reply) the slug the server echoes; a reply for another project never
+// changes the view.
+var pendingEdits = {};
+var editSequence = 0;
+function sendEdit(type, fields, previous) {
+  var ws = getWs();
+  if (!ws || !store.get("connected")) return false;
+  editSequence += 1;
+  var requestId = "project-settings-" + Date.now() + "-" + editSequence;
+  pendingEdits[requestId] = { slug: fields.slug, type: type, previous: previous };
+  ws.send(JSON.stringify(Object.assign({ type: type, requestId: requestId }, fields)));
+  return true;
+}
+
+export function handleProjectSettingsEditResult(msg) {
+  var pending = msg && msg.requestId && pendingEdits[msg.requestId];
+  if (!pending) return;
+  delete pendingEdits[msg.requestId];
+  if (msg.slug !== pending.slug || msg.ok || settingsSlug() !== pending.slug) return;
+  if (pending.type === "set_project_title") updateProjectSettingsName(pending.previous.name);
+  else updateProjectSettingsIcon(pending.previous.icon);
 }
 
-// `cleanup` is for teardown while leaving the project: the notes workbench is
-// not reopened over whatever screen comes next.
 export function closeProjectSettings(opts) {
-  if (!panelEl) return;
-  if (!(opts && opts.cleanup) && (store.get("projectEnvironmentEditor") || {}).saving) { showToast("Wait for the environment save to finish."); return; }
-  var rename = document.getElementById("ps-rename-form");
-  var renameDirty = rename && !rename.classList.contains("hidden") && document.getElementById("ps-rename-input").value.trim() !== (settingsProject().name || "");
-  if (!(opts && (opts.cleanup || opts.confirmed)) && (projectEnvironmentDirty() || renameDirty)) {
-    confirmSettingsAction('Your changes have not been saved. Discard them and close?', 'Discard changes', function () {
-      discardProjectEnvironment(); closeProjectSettings({ confirmed: true });
-    });
-    return;
-  }
-  var wasOpen = !panelEl.classList.contains("hidden");
-  panelEl.classList.add("hidden");
-  closePsEmojiPicker();
-  if (restoreBackground) { restoreBackground(); restoreBackground = null; }
-  if (returnFocus && returnFocus.isConnected && !(opts && opts.cleanup)) returnFocus.focus();
-  if (wasOpen) {
-    releaseNotesForSettings();
-    if (notesBrowserReopen && !(opts && opts.cleanup)) openNotesBrowser();
-    notesBrowserReopen = false;
-  }
+  closeSettings({ cleanup: !!(opts && opts.cleanup), onlyScope: "project" });
 }
 
 export function isProjectSettingsOpen() {
-  return panelEl && !panelEl.classList.contains("hidden");
+  return isSettingsShellOpen() && activeSettingsScope() === "project";
 }
 
 function switchSection(name) {
-  for (var i = 0; i < navItems.length; i++) {
-    var active = navItems[i].dataset.section === name;
-    navItems[i].classList.toggle("active", active);
-    navItems[i].setAttribute("aria-current", active ? "page" : "false");
-  }
   for (var j = 0; j < sections.length; j++) {
-    var active2 = sections[j].dataset.section === name;
-    sections[j].classList.toggle("active", active2);
+    sections[j].classList.toggle("active", sections[j].dataset.section === name);
   }
-
-  // Sync mobile dropdown
-  var psNavDropdown = document.getElementById("ps-nav-dropdown");
-  if (psNavDropdown && psNavDropdown.value !== name) {
-    psNavDropdown.value = name;
-  }
-
-  if (name === "environment") openProjectEnvironment(settingsSlug());
+  if (name === "environment" && settingsSlug()) openProjectEnvironment(settingsSlug());
+  enhanceSettingsSelects(panelEl);
+  refreshIcons();
 }
 
 function populateProfile() {
@@ -229,15 +224,13 @@ function commitRename() {
   var renameInput = document.getElementById("ps-rename-input");
   var nameEl = document.getElementById("ps-project-name");
   var newName = renameInput ? renameInput.value.trim() : "";
-  if (newName && getWs() && store.get('connected')) {
-    getWs().send(JSON.stringify({ type: "set_project_title", slug: settingsSlug(), title: newName }));
+  var slug = settingsSlug();
+  var previous = { name: settingsProject() ? settingsProject().name : "" };
+  if (newName && slug && sendEdit("set_project_title", { slug: slug, title: newName }, previous)) {
     if (nameEl) nameEl.textContent = newName;
     if (settingsProject()) settingsProject().name = newName;
-    var navTitle = document.getElementById("ps-nav-title");
-    if (navTitle) navTitle.textContent = newName;
-  }
-  if (newName && getWs() && store.get("connected")) cancelRename();
-  else showToast("Enter a name and connect to the server before saving.");
+    cancelRename();
+  } else showToast("Enter a name and connect to the server before saving.");
 }
 
 function cancelRename() {
@@ -330,10 +323,9 @@ function showPsEmojiPicker() {
         btn.addEventListener("click", function (e) {
           e.stopPropagation();
           closePsEmojiPicker();
-          if (getWs() && store.get('connected')) {
-            getWs().send(JSON.stringify({ type: "set_project_icon", slug: settingsSlug(), icon: emoji }));
-          }
-          updateIconPreview(emoji);
+          var slug = settingsSlug();
+          var previous = { icon: settingsProject() ? settingsProject().icon || null : null };
+          if (slug && sendEdit("set_project_icon", { slug: slug, icon: emoji }, previous)) updateIconPreview(emoji);
         });
         grid.appendChild(btn);
       })(emojis[i]);
@@ -365,8 +357,6 @@ export function updateProjectSettingsName(name) {
   if (settingsProject()) settingsProject().name = name;
   var nameEl = document.getElementById("ps-project-name");
   if (nameEl) nameEl.textContent = name || "-";
-  var navTitle = document.getElementById("ps-nav-title");
-  if (navTitle) navTitle.textContent = name || "-";
 }
 
 export function handleProjectOwnerChanged(msg) {

package/lib/public/modules/project-start-dialog.js

@@ -0,0 +1,130 @@
+// project-start-dialog.js - One fixed-size dialog for choosing how to start a project
+
+import { store } from './store.js';
+import { iconHtml, refreshIcons } from './icons.js';
+import { openState, closeState, selectView } from './project-start-state.js';
+import { folderViewHtml, bindFolderView, renderFolderView, startFolderBrowse, resetFolderState, handleBrowseDirResult } from './project-start-folder-view.js';
+import { formViewHtml, bindFormView, renderFormView } from './project-start-forms.js';
+import { submitFolder, handleAddProjectResult, handleCloneProgress } from './project-start-submit.js';
+
+export { handleBrowseDirResult, handleAddProjectResult, handleCloneProgress };
+
+var TITLES = { choices: 'Start a project', open: 'Open a folder', create: 'Create a project', clone: 'Clone a repository' };
+var CHOICES = [
+  { view: 'open', icon: 'folder-open', title: 'Open an existing folder', text: 'Use a directory on the machine running Clay.' },
+  { view: 'create', icon: 'plus', title: 'Create a new project', text: 'Start in a new, empty project directory.' },
+  { view: 'clone', icon: 'git-branch', title: 'Clone a repository', text: 'Bring an existing Git repository into Clay.' },
+];
+var shownGen = -1;
+var opener = null;
+
+function modal() { return document.getElementById('project-start-modal'); }
+function body() { return document.getElementById('project-start-body'); }
+function current() { return store.get('projectStart'); }
+
+function choicesHtml() {
+  var html = '<div class="project-start-view" data-view="choices"><div class="project-start-scroll"><ul class="project-start-rows project-start-choices" role="list">';
+  for (var i = 0; i < CHOICES.length; i++) {
+    var c = CHOICES[i];
+    html += '<li><button type="button" class="project-start-row project-start-choice" data-choice="' + c.view + '">' +
+      iconHtml(c.icon, 'project-start-choice-icon') + '<span class="project-start-choice-text"><strong>' + c.title + '</strong><span>' + c.text + '</span></span>' +
+      iconHtml('chevron-right') + '</button></li>';
+  }
+  return html + '</ul></div></div>';
+}
+
+function focusFirst(view) {
+  var target = null;
+  if (view === 'choices') target = body().querySelector('[data-choice]');
+  else if (view === 'open') target = body().querySelector('[data-ps="list"]');
+  else target = body().querySelector('[data-ps="field"]');
+  if (!target) target = modal().querySelector('.project-start-dialog');
+  target.focus({ preventScroll: true });
+}
+
+function renderShell(view) {
+  var container = body();
+  document.getElementById('project-start-title').textContent = TITLES[view];
+  document.getElementById('project-start-back').hidden = view === 'choices';
+  document.getElementById('project-start-subtitle').hidden = view !== 'choices';
+  if (view === 'choices') container.innerHTML = choicesHtml();
+  else if (view === 'open') { container.innerHTML = folderViewHtml(); bindFolderView(submitFolder); }
+  else { container.innerHTML = formViewHtml(view); bindFormView(view); }
+  refreshIcons();
+}
+
+function render(state, previous) {
+  var overlay = modal();
+  if (!overlay) return;
+  if (state.view === null) {
+    if (!overlay.classList.contains('hidden')) hide();
+    return;
+  }
+  if (state.gen !== shownGen || previous.view === null) {
+    shownGen = state.gen;
+    overlay.classList.remove('hidden');
+    renderShell(state.view);
+    if (state.view === 'open') { resetFolderState(); startFolderBrowse(); }
+    if (state.view === 'create' || state.view === 'clone') renderFormView(state.view);
+    focusFirst(state.view);
+    return;
+  }
+  if (state.view === 'open') renderFolderView();
+  else if (state.view === 'create' || state.view === 'clone') renderFormView(state.view);
+}
+
+function hide() {
+  modal().classList.add('hidden');
+  body().innerHTML = '';
+  shownGen = -1;
+  resetFolderState();
+  var target = opener;
+  opener = null;
+  if (target && document.contains(target) && typeof target.focus === 'function') target.focus({ preventScroll: true });
+}
+
+export function openAddProjectModal(mode) {
+  if (current().view === null) opener = document.activeElement;
+  store.set({ projectStart: openState(current(), mode) });
+}
+
+export function closeAddProjectModal() {
+  if (current().view === null) return;
+  store.set({ projectStart: closeState(current()) });
+}
+
+function trapTab(event, dialog) {
+  var items = dialog.querySelectorAll('button:not([disabled]):not([hidden]), input:not([disabled]):not([hidden]), [tabindex="-1"][data-ps="list"]');
+  var focusable = [];
+  for (var i = 0; i < items.length; i++) if (items[i].offsetParent !== null && items[i].tabIndex >= 0) focusable.push(items[i]);
+  if (!focusable.length) { event.preventDefault(); dialog.focus(); return; }
+  var first = focusable[0];
+  var last = focusable[focusable.length - 1];
+  var active = document.activeElement;
+  if (event.shiftKey && (active === first || active === dialog)) { event.preventDefault(); last.focus(); }
+  else if (!event.shiftKey && active === last) { event.preventDefault(); first.focus(); }
+}
+
+export function initProjectStart() {
+  var overlay = modal();
+  var dialog = overlay.querySelector('.project-start-dialog');
+  store.subscribe(function (state, previous) {
+    if (state.projectStart !== previous.projectStart) render(state.projectStart, previous.projectStart);
+    else if (state.projectStartFolder !== previous.projectStartFolder && state.projectStart.view === 'open') renderFolderView();
+  });
+  overlay.querySelector('.project-start-backdrop').addEventListener('click', closeAddProjectModal);
+  document.getElementById('project-start-close').addEventListener('click', closeAddProjectModal);
+  document.getElementById('project-start-back').addEventListener('click', function () {
+    store.set({ projectStart: selectView(current(), 'choices') });
+  });
+  body().addEventListener('click', function (event) {
+    var choice = event.target.closest('[data-choice]');
+    if (choice) store.set({ projectStart: selectView(current(), choice.dataset.choice) });
+  });
+  dialog.addEventListener('keydown', function (event) {
+    if (event.key === 'Escape') { event.preventDefault(); closeAddProjectModal(); }
+    else if (event.key === 'Tab') trapTab(event, dialog);
+  });
+  var addButton = document.getElementById('project-list-add');
+  if (addButton) addButton.addEventListener('click', function () { openAddProjectModal(); });
+}

package/lib/public/modules/project-start-folder-state.js

@@ -0,0 +1,78 @@
+// project-start-folder-state.js - Pure state transitions for the open-folder browser.
+// A reply is applied only when its requestId matches the single in-flight request.
+
+export function emptyFolderState() {
+  return {
+    status: "idle", dir: null, parent: null, entries: [], error: null, errorKind: null,
+    requestId: null, requestedPath: null, candidates: [], candidateIdx: 0, initial: false, pathOpen: false,
+  };
+}
+
+export function beginInitial(candidates, requestId) {
+  var next = emptyFolderState();
+  next.status = "loading";
+  next.candidates = candidates.slice();
+  next.initial = true;
+  next.requestId = requestId;
+  next.requestedPath = candidates[0] || "~";
+  return next;
+}
+
+export function beginNavigate(prev, path, requestId) {
+  return Object.assign({}, prev, {
+    status: "loading", requestId: requestId, requestedPath: path, error: null, errorKind: null, initial: false,
+  });
+}
+
+function errorKindOf(message) {
+  return /not permitted|permission|EACCES|EPERM/i.test(message || "") ? "denied" : "failed";
+}
+
+function cleanEntries(entries) {
+  var out = [];
+  for (var i = 0; i < (entries || []).length; i++) {
+    var e = entries[i];
+    if (e && typeof e.name === "string" && typeof e.path === "string") out.push({ name: e.name, path: e.path });
+  }
+  return out;
+}
+
+// Returns { state, retryPath }. retryPath is set when the initial candidate failed and another remains.
+export function applyBrowseResult(prev, msg, nextRequestId) {
+  if (!msg || prev.status !== "loading" || !prev.requestId || msg.requestId !== prev.requestId) {
+    return { state: prev, retryPath: null };
+  }
+  var failed = !!msg.error;
+  var wrongTarget = !failed && (typeof msg.dir !== "string" || (msg.prefix || "") !== "");
+  if (failed || wrongTarget) {
+    var idx = prev.candidateIdx + 1;
+    if (prev.initial && idx < prev.candidates.length) {
+      var retry = Object.assign({}, prev, { candidateIdx: idx, requestId: nextRequestId, requestedPath: prev.candidates[idx] });
+      return { state: retry, retryPath: prev.candidates[idx] };
+    }
+    return {
+      state: Object.assign({}, prev, {
+        status: "error",
+        error: failed ? msg.error : "That folder was not found.",
+        errorKind: failed ? errorKindOf(msg.error) : "missing",
+      }),
+      retryPath: null,
+    };
+  }
+  return {
+    state: Object.assign({}, prev, {
+      status: "ready", dir: msg.dir, parent: typeof msg.parent === "string" ? msg.parent : null,
+      entries: cleanEntries(msg.entries), error: null, errorKind: null, initial: false,
+    }),
+    retryPath: null,
+  };
+}
+
+export function failLocally(prev, message) {
+  if (prev.status !== "loading") return prev;
+  return Object.assign({}, prev, { status: "error", error: message, errorKind: "failed" });
+}
+
+export function canOpenFolder(state) {
+  return state.status === "ready" && typeof state.dir === "string" && state.dir.length > 0;
+}