@qnote/q-ai-note 1.0.5 → 1.0.7

package/dist/web/app.js

@@ -9,6 +9,20 @@ const state = {
   operations: [],
   chats: [],
   settings: {},
+  readonly: false,
+  fullAccess: false,
+  canAccessSystemSettings: false,
+  pageAccess: {
+    sandboxes: true,
+    diaries: true,
+    changes: true,
+    settings: false,
+  },
+  sandboxAccessAll: 'read',
+  sandboxReadIds: [],
+  sandboxWriteIds: [],
+  currentSandboxWritable: false,
+  projectSettingsDraft: null,
   pendingAction: null,
   nodeEntities: [],
   nodeEntityStats: null,
@@ -16,7 +30,8 @@ const state = {
   nodeEntityFilter: 'all',
   editingNodeEntityId: null,
   nodeEntityFormExpanded: false,
-  sandboxPresentationMode: false,
+  sandboxChatVisible: false,
+  sandboxChatVisibleBeforeFullscreen: false,
   sandboxFullscreenMode: false,
   workTreeViewMode: 'full',
   workItemElementPreviewMode: 'none',
@@ -38,6 +53,7 @@ let sandboxActionHandler = null;
 let sandboxEscLocked = false;
 let resizeRenderTimer = null;
 const WORK_ITEM_SHOW_ASSIGNEE_STORAGE_KEY = 'q-ai-note.work-item.show-assignee';
+const WORK_TREE_VIEW_MODE_STORAGE_KEY = 'q-ai-note.work-tree.view-mode';
 
 function loadWorkItemAssigneePreference() {
   try {
@@ -60,14 +76,132 @@ function persistWorkItemAssigneePreference() {
   }
 }
 
-function applySandboxLayoutMode() {
+function loadWorkTreeViewModePreference() {
+  try {
+    const raw = String(window.localStorage.getItem(WORK_TREE_VIEW_MODE_STORAGE_KEY) || '').trim();
+    if (raw === 'full' || raw === 'report' || raw === 'dense') {
+      state.workTreeViewMode = raw;
+    }
+  } catch {
+    // Ignore storage failures in restricted environments.
+  }
+}
+
+function persistWorkTreeViewModePreference() {
+  try {
+    window.localStorage.setItem(WORK_TREE_VIEW_MODE_STORAGE_KEY, state.workTreeViewMode || 'full');
+  } catch {
+    // Ignore storage failures in restricted environments.
+  }
+}
+
+function applySandboxChatVisibility() {
   const layout = document.getElementById('sandbox-layout');
-  const toggleBtn = document.getElementById('toggle-sandbox-present-btn');
+  const toggleBtn = document.getElementById('toggle-sandbox-chat-btn');
   if (!layout || !toggleBtn) return;
-  const isPresentation = Boolean(state.sandboxPresentationMode);
-  layout.classList.toggle('presentation-mode', isPresentation);
-  toggleBtn.textContent = isPresentation ? '退出展示态' : '展示态布局';
-  toggleBtn.setAttribute('aria-pressed', isPresentation ? 'true' : 'false');
+  const chatAllowed = !state.readonly && state.currentSandboxWritable;
+  const shouldShow = chatAllowed && Boolean(state.sandboxChatVisible);
+  layout.classList.toggle('show-chat', shouldShow);
+  toggleBtn.classList.toggle('hidden', !chatAllowed);
+  toggleBtn.innerHTML = shouldShow
+    ? '<span class="icon" aria-hidden="true">🤖</span><span>隐藏 AI 助手</span>'
+    : '<span class="icon" aria-hidden="true">🤖</span><span>显示 AI 助手</span>';
+  toggleBtn.setAttribute('aria-pressed', shouldShow ? 'true' : 'false');
+}
+
+async function loadRuntimeMode() {
+  try {
+    const runtime = await apiRequest(`${API_BASE}/runtime`);
+    state.readonly = Boolean(runtime?.readonly);
+    state.fullAccess = Boolean(runtime?.full_access);
+    state.canAccessSystemSettings = Boolean(runtime?.can_access_system_settings);
+    state.pageAccess = {
+      sandboxes: Boolean(runtime?.page_access?.sandboxes),
+      diaries: Boolean(runtime?.page_access?.diaries),
+      changes: Boolean(runtime?.page_access?.changes),
+      settings: Boolean(runtime?.page_access?.settings),
+    };
+    state.sandboxAccessAll = String(runtime?.sandbox_access_all || 'none');
+    state.sandboxReadIds = Array.isArray(runtime?.sandbox_read_ids) ? runtime.sandbox_read_ids.map((id) => String(id)) : [];
+    state.sandboxWriteIds = Array.isArray(runtime?.sandbox_write_ids) ? runtime.sandbox_write_ids.map((id) => String(id)) : [];
+    state.currentSandboxWritable = !state.readonly && (state.fullAccess || state.sandboxAccessAll === 'write');
+  } catch {
+    state.readonly = false;
+    state.fullAccess = true;
+    state.canAccessSystemSettings = true;
+    state.pageAccess = { sandboxes: true, diaries: true, changes: true, settings: true };
+    state.sandboxAccessAll = 'write';
+    state.sandboxReadIds = [];
+    state.sandboxWriteIds = [];
+    state.currentSandboxWritable = true;
+  }
+}
+
+function canReadSandboxById(sandboxId) {
+  const id = String(sandboxId || '');
+  if (!id) return false;
+  if (state.fullAccess) return true;
+  if (state.sandboxAccessAll === 'read' || state.sandboxAccessAll === 'write') return true;
+  return state.sandboxReadIds.includes(id) || state.sandboxWriteIds.includes(id);
+}
+
+function canWriteSandboxById(sandboxId) {
+  const id = String(sandboxId || '');
+  if (!id) return false;
+  if (state.readonly) return false;
+  if (state.fullAccess) return true;
+  if (state.sandboxAccessAll === 'write') return true;
+  return state.sandboxWriteIds.includes(id);
+}
+
+function setHiddenById(id, hidden = true) {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.classList.toggle('hidden', hidden);
+}
+
+function applyReadonlyMode() {
+  document.body.classList.toggle('readonly-mode', state.readonly);
+  const sandboxesNav = document.querySelector('[data-nav="sandboxes"]');
+  if (sandboxesNav instanceof HTMLElement) {
+    sandboxesNav.classList.toggle('hidden', !state.pageAccess.sandboxes && !state.fullAccess);
+  }
+  const diariesNav = document.querySelector('[data-nav="diaries"]');
+  if (diariesNav instanceof HTMLElement) {
+    diariesNav.classList.toggle('hidden', !state.pageAccess.diaries && !state.fullAccess);
+  }
+  const changesNav = document.querySelector('[data-nav="changes"]');
+  if (changesNav instanceof HTMLElement) {
+    changesNav.classList.toggle('hidden', !state.pageAccess.changes && !state.fullAccess);
+  }
+  const projectSettingsNav = document.querySelector('[data-nav="settings"]');
+  if (projectSettingsNav instanceof HTMLElement) {
+    projectSettingsNav.classList.toggle('hidden', !state.pageAccess.settings);
+  }
+  const systemSettingsNav = document.querySelector('[data-nav="system-settings"]');
+  if (systemSettingsNav instanceof HTMLElement) {
+    systemSettingsNav.classList.toggle('hidden', !state.canAccessSystemSettings);
+  }
+  setHiddenById('page-settings', !state.pageAccess.settings);
+  setHiddenById('page-system-settings', !state.canAccessSystemSettings);
+  setHiddenById('add-sandbox-btn', state.readonly || !state.fullAccess);
+  setHiddenById('add-item-btn', state.readonly || !state.currentSandboxWritable);
+  setHiddenById('toggle-node-entity-form-btn', state.readonly || !state.currentSandboxWritable);
+  setHiddenById('drawer-diary-save-btn', state.readonly || !state.currentSandboxWritable);
+  setHiddenById('save-diary-btn', state.readonly);
+  const diaryForm = document.querySelector('#page-diaries .diary-form');
+  if (diaryForm instanceof HTMLElement) {
+    diaryForm.classList.toggle('hidden', state.readonly);
+  }
+  const drawerDiaryForm = document.querySelector('#node-entity-drawer .drawer-diary-quick-form');
+  if (drawerDiaryForm instanceof HTMLElement) {
+    drawerDiaryForm.classList.toggle('hidden', state.readonly || !state.currentSandboxWritable);
+  }
+  if (state.readonly) {
+    state.sandboxChatVisible = false;
+    closeQuickChatPopover();
+  }
+  applySandboxChatVisibility();
 }
 
 function getSandboxLayoutElement() {
@@ -100,7 +234,14 @@ function applySandboxFullscreenState() {
   const layout = getSandboxLayoutElement();
   const fullscreenRoot = getSandboxFullscreenElement();
   const toggleBtn = document.getElementById('toggle-sandbox-fullscreen-btn');
+  const wasFullscreen = Boolean(state.sandboxFullscreenMode);
   const isFullscreen = Boolean(fullscreenRoot && document.fullscreenElement === fullscreenRoot);
+  if (!wasFullscreen && isFullscreen) {
+    state.sandboxChatVisibleBeforeFullscreen = Boolean(state.sandboxChatVisible);
+    state.sandboxChatVisible = false;
+  } else if (wasFullscreen && !isFullscreen) {
+    state.sandboxChatVisible = Boolean(state.sandboxChatVisibleBeforeFullscreen);
+  }
   state.sandboxFullscreenMode = isFullscreen;
   if (layout) {
     layout.classList.toggle('is-fullscreen', isFullscreen);
@@ -112,9 +253,22 @@ function applySandboxFullscreenState() {
     toggleBtn.textContent = isFullscreen ? '退出全屏' : '全屏';
     toggleBtn.setAttribute('aria-pressed', isFullscreen ? 'true' : 'false');
   }
+  applySandboxChatVisibility();
+  applySandboxLayoutHeight();
   void syncSandboxEscLock(isFullscreen);
 }
 
+function applySandboxLayoutHeight() {
+  const layout = getSandboxLayoutElement();
+  if (!(layout instanceof HTMLElement)) return;
+  const rect = layout.getBoundingClientRect();
+  const viewportHeight = Math.floor(window.visualViewport?.height || window.innerHeight || 0);
+  if (!Number.isFinite(viewportHeight) || viewportHeight <= 0) return;
+  const bottomGap = state.sandboxFullscreenMode ? 8 : 10;
+  const nextHeight = Math.max(320, viewportHeight - Math.floor(rect.top) - bottomGap);
+  layout.style.height = `${nextHeight}px`;
+}
+
 async function toggleSandboxFullscreen() {
   const fullscreenRoot = getSandboxFullscreenElement();
   if (!fullscreenRoot) return;
@@ -215,6 +369,7 @@ function applyWorkItemElementPreviewMode() {
 function renderWorkTree() {
   const tree = document.getElementById('work-tree');
   if (!tree || !state.currentSandbox) return;
+  const treeReadonly = state.readonly || !state.currentSandboxWritable;
   
   const allItems = state.currentSandbox.items || [];
   const items = applyWorkItemFilters(allItems);
@@ -230,7 +385,7 @@ function renderWorkTree() {
   }
 
   if (allItems.length === 0) {
-    tree.innerHTML = '<div class="empty-state"><p>点击上方"添加"按钮创建第一个任务</p></div>';
+    tree.innerHTML = `<div class="empty-state"><p>${treeReadonly ? '暂无任务' : '点击上方"添加"按钮创建第一个任务'}</p></div>`;
     return;
   }
 
@@ -246,7 +401,7 @@ function renderWorkTree() {
       }
       renderWorkTree();
     },
-    onAddChild: (parentId) => {
+    onAddChild: treeReadonly ? undefined : (parentId) => {
       document.getElementById('item-dialog-title').textContent = '添加子任务';
       document.getElementById('item-dialog').dataset.editId = '';
       document.getElementById('new-item-name').value = '';
@@ -257,14 +412,14 @@ function renderWorkTree() {
       document.getElementById('new-item-parent').value = parentId;
       document.getElementById('item-dialog').showModal();
     },
-    onAddDiary: (nodeId) => {
+    onAddDiary: treeReadonly ? undefined : (nodeId) => {
       showNodeEntityDrawer(nodeId, 'diary');
       const textarea = document.getElementById('drawer-diary-content');
       if (textarea instanceof HTMLTextAreaElement) {
         textarea.focus();
       }
     },
-    onEdit: (id) => {
+    onEdit: treeReadonly ? undefined : (id) => {
       editWorkItem(id);
     },
     onSelect: (id) => {
@@ -273,7 +428,7 @@ function renderWorkTree() {
     onSelectEntity: (nodeId, entityType) => {
       showNodeEntityDrawer(nodeId, entityType || 'all');
     },
-    onMoveNode: async (dragNodeId, newParentId) => {
+    onMoveNode: treeReadonly ? undefined : async (dragNodeId, newParentId) => {
       if (!state.currentSandbox) return;
       if (!dragNodeId || dragNodeId === newParentId) return;
       const byId = new Map((state.currentSandbox.items || []).map((item) => [item.id, item]));
@@ -301,7 +456,7 @@ function renderWorkTree() {
       });
       await loadSandbox(state.currentSandbox.id);
     },
-    onReorderSiblings: async (dragNodeId, targetNodeId, position) => {
+    onReorderSiblings: treeReadonly ? undefined : async (dragNodeId, targetNodeId, position) => {
       if (!state.currentSandbox) return;
       if (!dragNodeId || !targetNodeId || dragNodeId === targetNodeId) return;
       const byId = new Map((state.currentSandbox.items || []).map((item) => [item.id, item]));
@@ -334,7 +489,7 @@ function renderWorkTree() {
       });
       await loadSandbox(state.currentSandbox.id);
     },
-    onReorderLanes: async (dragRootId, targetRootId) => {
+    onReorderLanes: treeReadonly ? undefined : async (dragRootId, targetRootId) => {
       if (!state.currentSandbox) return;
       if (!dragRootId || !targetRootId || dragRootId === targetRootId) return;
       const roots = (state.currentSandbox.items || []).filter((item) => !item.parent_id);
@@ -359,19 +514,21 @@ function renderWorkTree() {
       });
       await loadSandbox(state.currentSandbox.id);
     },
-    onDelete: async (id) => {
+    onDelete: treeReadonly ? undefined : async (id) => {
       if (confirm('确定删除此任务？')) {
         await apiRequest(`${API_BASE}/items/${id}`, { method: 'DELETE' });
         await loadSandbox(state.currentSandbox.id);
       }
     },
-    onQuickChat: (id, el) => {
+    onQuickChat: treeReadonly ? undefined : (id, el) => {
       openQuickChatPopover(id, el);
     },
     renderMode: state.workTreeViewMode === 'dense' ? 'dense' : 'card',
     showAssignee: state.workItemShowAssignee,
     elementPreviewMode: state.workItemElementPreviewMode,
     entityRowsByNodeId,
+    readonly: treeReadonly,
+    selectedId: state.selectedNodeId || '',
   });
   
   populateParentSelect(allItems);
@@ -481,12 +638,17 @@ function compareSiblingOrder(a, b, keyName = 'order_key') {
   return String(a?.created_at || '').localeCompare(String(b?.created_at || ''));
 }
 
-function populateParentSelect(items) {
+function populateParentSelect(items, preferredParentId = null) {
   const select = document.getElementById('new-item-parent');
   if (!select) return;
-  
+  const expectedValue = preferredParentId === null || preferredParentId === undefined
+    ? String(select.value || '')
+    : String(preferredParentId || '');
+
   select.innerHTML = '<option value="">无（顶级）</option>' + 
     items.map(i => `<option value="${i.id}">${safeText(i.name)}</option>`).join('');
+  const hasExpectedValue = Array.from(select.options).some((option) => option.value === expectedValue);
+  select.value = hasExpectedValue ? expectedValue : '';
 }
 
 function renderMarkdownSnippet(text) {
@@ -674,6 +836,7 @@ function closeNodeEntityDrawer() {
   state.nodeEntityFilter = 'all';
   state.editingNodeEntityId = null;
   state.nodeEntityFormExpanded = false;
+  renderWorkTree();
 }
 
 function setNodeEntityFormExpanded(expanded) {
@@ -755,13 +918,15 @@ function renderNodeEntityList(nodeId) {
               <span class="entity-type-pill">diary</span>
               <strong>${safeText('日志记录')}</strong>
             </div>
-            <div class="entity-card-actions">
-              <button class="btn btn-secondary btn-sm" data-diary-edit-id="${safeText(row.id)}">编辑</button>
-              ${row.processed ? '' : `
-                <button class="btn btn-secondary btn-sm" data-diary-confirm-id="${safeText(row.id)}">采纳</button>
-                <button class="btn btn-secondary btn-sm" data-diary-ignore-id="${safeText(row.id)}">忽略</button>
-              `}
-            </div>
+            ${state.readonly ? '' : `
+              <div class="entity-card-actions">
+                <button class="btn btn-secondary btn-sm" data-diary-edit-id="${safeText(row.id)}">编辑</button>
+                ${row.processed ? '' : `
+                  <button class="btn btn-secondary btn-sm" data-diary-confirm-id="${safeText(row.id)}">采纳</button>
+                  <button class="btn btn-secondary btn-sm" data-diary-ignore-id="${safeText(row.id)}">忽略</button>
+                `}
+              </div>
+            `}
           </div>
           <div class="entity-meta">
             ${safeText(new Date(row.created_at).toLocaleString())}
@@ -778,10 +943,12 @@ function renderNodeEntityList(nodeId) {
             <span class="entity-type-pill">${safeText(row.entity_type)}</span>
             <strong>${safeText(row.title || '-')}</strong>
           </div>
-          <div class="entity-card-actions">
-            <button class="btn btn-secondary btn-sm" data-entity-edit-id="${safeText(row.id)}">编辑</button>
-            <button class="btn btn-secondary btn-sm" data-entity-delete-id="${safeText(row.id)}">删除</button>
-          </div>
+          ${state.readonly ? '' : `
+            <div class="entity-card-actions">
+              <button class="btn btn-secondary btn-sm" data-entity-edit-id="${safeText(row.id)}">编辑</button>
+              <button class="btn btn-secondary btn-sm" data-entity-delete-id="${safeText(row.id)}">删除</button>
+            </div>
+          `}
         </div>
         <div class="entity-meta">
           ${safeText(new Date(row.created_at).toLocaleString())}
@@ -920,6 +1087,7 @@ function showNodeEntityDrawer(nodeId, preferredFilter = 'all') {
   state.nodeEntityFilter = filter;
   title.textContent = node.name || nodeId;
   renderNodeEntitySummary(nodeId);
+  renderWorkTree();
   renderQuickDiaryTargetLabel();
   renderNodeEntityFilterTabs();
   renderNodeEntityList(nodeId);
@@ -1031,6 +1199,7 @@ function composeQuickChatContent(nodeId, userQuestion) {
 }
 
 async function sendSandboxChatMessage(content, options = {}) {
+  if (state.readonly) return;
   if (!content || !state.currentSandbox) return;
   const messages = document.getElementById('sandbox-chat-messages');
   const btn = document.getElementById('sandbox-send-btn');
@@ -1189,6 +1358,13 @@ function openQuickChatPopover(nodeId, anchorEl) {
 }
 
 async function loadSandboxes() {
+  if (!state.pageAccess.sandboxes && !state.fullAccess) {
+    state.sandboxes = [];
+    renderSandboxes();
+    renderSandboxesSummary();
+    updateSandboxSelect();
+    return;
+  }
   state.sandboxes = await apiRequest(`${API_BASE}/sandboxes`);
   renderSandboxes();
   renderSandboxesSummary();
@@ -1221,17 +1397,19 @@ function renderSandboxes() {
     onOpen: (id) => {
       window.location.hash = `/sandbox/${id}`;
     },
-    onDelete: async (id) => {
+    onDelete: (state.readonly || !state.fullAccess) ? undefined : async (id) => {
       if (confirm('确定删除此沙盘？')) {
         await apiRequest(`${API_BASE}/sandboxes/${id}`, { method: 'DELETE' });
         await loadSandboxes();
       }
-    }
+    },
+    readonly: state.readonly || !state.fullAccess,
   });
 }
 
 async function loadSandbox(id) {
   closeQuickChatPopover();
+  state.currentSandboxWritable = canWriteSandboxById(id);
   const [sandbox, items, diaries, entities, entityStats] = await Promise.all([
     apiRequest(`${API_BASE}/sandboxes/${id}`),
     apiRequest(`${API_BASE}/sandboxes/${id}/items`),
@@ -1247,12 +1425,20 @@ async function loadSandbox(id) {
   applyWorkTreeViewMode(state.workTreeViewMode || 'full');
   applyWorkItemAssigneeToggle();
   applyWorkItemElementPreviewMode();
-  applySandboxLayoutMode();
+  applySandboxChatVisibility();
   applySandboxFullscreenState();
   renderQuickDiaryTargetLabel();
   renderSandboxOverview();
   renderWorkTree();
-  loadSandboxChats(id);
+  applySandboxLayoutHeight();
+  applyReadonlyMode();
+  if (state.readonly || !state.currentSandboxWritable) {
+    state.chats = [];
+    const messages = document.getElementById('sandbox-chat-messages');
+    if (messages) messages.innerHTML = '';
+  } else {
+    loadSandboxChats(id);
+  }
 }
 
 function renderSandboxOverview() {
@@ -1277,6 +1463,7 @@ function renderSandboxOverview() {
 }
 
 async function loadSandboxChats(sandboxId) {
+  if (state.readonly) return;
   const messages = document.getElementById('sandbox-chat-messages');
   if (!messages) return;
   
@@ -1436,25 +1623,26 @@ function renderDiaries() {
       openDiaryWorkItemInSandbox(sandboxId, workItemId);
     },
     renderContent: (content) => renderMarkdownSnippet(content),
-    onConfirm: async (id) => {
+    onConfirm: state.readonly ? undefined : async (id) => {
       await apiRequest(`${API_BASE}/diaries/${id}/process`, {
         method: 'PUT',
         body: JSON.stringify({ action: 'confirm' }),
       });
       await loadDiaries();
     },
-    onIgnore: async (id) => {
+    onIgnore: state.readonly ? undefined : async (id) => {
       await apiRequest(`${API_BASE}/diaries/${id}/process`, {
         method: 'PUT',
         body: JSON.stringify({ action: 'ignore' }),
       });
       await loadDiaries();
     },
-    onEdit: async (id) => {
+    onEdit: state.readonly ? undefined : async (id) => {
       const diary = state.diaries.find((row) => row.id === id);
       if (!diary) return;
       openDiaryEditDialog(diary);
     },
+    readonly: state.readonly,
   });
 }
 
@@ -1741,6 +1929,252 @@ async function loadSettings() {
   apiKeyInput.placeholder = state.settings.has_api_key ? '已配置，留空表示不修改' : 'sk-...';
   document.getElementById('setting-model').value = state.settings.model || '';
   renderSettingHeadersRows(state.settings.headers || {});
+  const editableIpInput = document.getElementById('setting-editable-ips');
+  if (editableIpInput instanceof HTMLTextAreaElement) {
+    editableIpInput.value = Array.isArray(state.settings.editable_ip_allowlist)
+      ? state.settings.editable_ip_allowlist.join('\n')
+      : '';
+  }
+}
+
+function normalizeProjectSettingsDraft(config) {
+  const users = Array.isArray(config?.users) ? config.users : [];
+  const profiles = Array.isArray(config?.profiles) ? config.profiles : [];
+  const bindings = Array.isArray(config?.bindings) ? config.bindings : [];
+  return {
+    users: users.map((user, idx) => ({
+      id: String(user?.id || `user-${idx + 1}`).trim(),
+      name: String(user?.name || '').trim(),
+      ips: Array.isArray(user?.ips) ? user.ips.map((ip) => String(ip || '').trim()).filter((ip) => Boolean(ip)) : [],
+    })),
+    profiles: profiles.map((profile, idx) => ({
+      id: String(profile?.id || `profile-${idx + 1}`).trim(),
+      name: String(profile?.name || '').trim(),
+      apply_to_all_users: Boolean(profile?.apply_to_all_users),
+      page_access: {
+        sandboxes: Boolean(profile?.page_access?.sandboxes),
+        diaries: Boolean(profile?.page_access?.diaries),
+        changes: Boolean(profile?.page_access?.changes),
+        settings: Boolean(profile?.page_access?.settings),
+      },
+      sandbox_access: {
+        all: String(profile?.sandbox_access?.all || 'none'),
+        items: Array.isArray(profile?.sandbox_access?.items)
+          ? profile.sandbox_access.items.map((item) => ({
+              sandbox_id: String(item?.sandbox_id || '').trim(),
+              access: String(item?.access || 'read'),
+            }))
+          : [],
+      },
+    })),
+    bindings: bindings.map((binding) => ({
+      user_id: String(binding?.user_id || '').trim(),
+      profile_ids: Array.isArray(binding?.profile_ids)
+        ? binding.profile_ids.map((id) => String(id || '').trim()).filter((id) => Boolean(id))
+        : [],
+    })),
+  };
+}
+
+function renderProjectUsersEditor() {
+  const container = document.getElementById('project-users-list');
+  if (!(container instanceof HTMLElement)) return;
+  const users = state.projectSettingsDraft?.users || [];
+  if (!users.length) {
+    container.innerHTML = '<div class="project-empty">暂无用户，点击上方“添加用户”。</div>';
+    return;
+  }
+  container.innerHTML = users.map((user, idx) => `
+    <div class="project-row">
+      <input type="text" data-role="project-user-id" data-idx="${idx}" placeholder="用户 ID（唯一）" value="${escapeHtml(user.id)}">
+      <input type="text" data-role="project-user-name" data-idx="${idx}" placeholder="显示名称" value="${escapeHtml(user.name)}">
+      <div class="project-ip-editor">
+        <div class="project-ip-chips">
+          ${(user.ips || []).map((ip, ipIdx) => `
+            <span class="project-ip-chip">
+              <span>${escapeHtml(ip)}</span>
+              <button class="project-ip-remove" type="button" title="删除 IP" data-role="remove-project-user-ip" data-idx="${idx}" data-ip-idx="${ipIdx}">×</button>
+            </span>
+          `).join('')}
+        </div>
+        <div class="project-ip-input-row">
+          <input type="text" data-role="project-user-ip-input" data-idx="${idx}" placeholder="输入 IP 后回车或点击添加">
+          <button class="btn btn-secondary btn-sm" data-role="add-project-user-ip" data-idx="${idx}" type="button">添加 IP</button>
+        </div>
+      </div>
+      <button class="btn btn-secondary btn-sm" data-role="remove-project-user" data-idx="${idx}" type="button">删除</button>
+    </div>
+  `).join('');
+}
+
+function addUserIpAtIndex(userIdx, rawIp) {
+  if (!state.projectSettingsDraft) return;
+  const idx = Number(userIdx);
+  if (!Number.isFinite(idx) || idx < 0) return;
+  const user = state.projectSettingsDraft.users[idx];
+  if (!user) return;
+  const ip = String(rawIp || '').trim();
+  if (!ip) return;
+  if (ip.includes('/')) {
+    alert('仅支持精确 IP，不支持 CIDR。');
+    return;
+  }
+  if ((user.ips || []).includes(ip)) return;
+  user.ips = [...(user.ips || []), ip];
+  renderProjectSettingsEditor();
+}
+
+function renderProjectProfilesEditor() {
+  const container = document.getElementById('project-profiles-list');
+  if (!(container instanceof HTMLElement)) return;
+  const profiles = state.projectSettingsDraft?.profiles || [];
+  const sandboxOptions = (state.sandboxes || []).map((sandbox) => ({
+    id: String(sandbox.id || ''),
+    name: String(sandbox.name || ''),
+  }));
+  if (!profiles.length) {
+    container.innerHTML = '<div class="project-empty">暂无 Profile，点击上方“添加 Profile”。</div>';
+    return;
+  }
+  container.innerHTML = profiles.map((profile, idx) => `
+    <div class="project-profile-card">
+      <div class="project-profile-grid">
+        <input type="text" data-role="project-profile-id" data-idx="${idx}" placeholder="Profile ID（唯一）" value="${escapeHtml(profile.id)}">
+        <input type="text" data-role="project-profile-name" data-idx="${idx}" placeholder="Profile 名称" value="${escapeHtml(profile.name)}">
+        <select data-role="project-profile-all-access" data-idx="${idx}">
+          <option value="none" ${profile.sandbox_access.all === 'none' ? 'selected' : ''}>默认沙盘权限：none</option>
+          <option value="read" ${profile.sandbox_access.all === 'read' ? 'selected' : ''}>默认沙盘权限：read</option>
+          <option value="write" ${profile.sandbox_access.all === 'write' ? 'selected' : ''}>默认沙盘权限：write</option>
+        </select>
+        <label class="inline-checkbox">
+          <input type="checkbox" data-role="project-profile-apply-all" data-idx="${idx}" ${profile.apply_to_all_users ? 'checked' : ''}>
+          <span>apply_to_all_users</span>
+        </label>
+      </div>
+      <div class="project-profile-pages">
+        <label class="inline-checkbox"><input type="checkbox" data-role="project-profile-page" data-idx="${idx}" data-page="sandboxes" ${profile.page_access.sandboxes ? 'checked' : ''}><span>沙盘</span></label>
+        <label class="inline-checkbox"><input type="checkbox" data-role="project-profile-page" data-idx="${idx}" data-page="diaries" ${profile.page_access.diaries ? 'checked' : ''}><span>日记</span></label>
+        <label class="inline-checkbox"><input type="checkbox" data-role="project-profile-page" data-idx="${idx}" data-page="changes" ${profile.page_access.changes ? 'checked' : ''}><span>变化</span></label>
+        <label class="inline-checkbox"><input type="checkbox" data-role="project-profile-page" data-idx="${idx}" data-page="settings" ${profile.page_access.settings ? 'checked' : ''}><span>项目设置</span></label>
+      </div>
+      <div class="project-sandbox-items">
+        ${(profile.sandbox_access.items || []).map((item, itemIdx) => `
+          <div class="project-row compact">
+            <select data-role="project-profile-sandbox-id" data-idx="${idx}" data-item-idx="${itemIdx}">
+              <option value="">选择沙盘</option>
+              ${sandboxOptions.map((sandbox) => `
+                <option value="${escapeHtml(sandbox.id)}" ${item.sandbox_id === sandbox.id ? 'selected' : ''}>
+                  ${escapeHtml(sandbox.name || sandbox.id)} (${escapeHtml(sandbox.id)})
+                </option>
+              `).join('')}
+              ${item.sandbox_id && !sandboxOptions.some((sandbox) => sandbox.id === item.sandbox_id) ? `
+                <option value="${escapeHtml(item.sandbox_id)}" selected>
+                  已不存在的沙盘 (${escapeHtml(item.sandbox_id)})
+                </option>
+              ` : ''}
+            </select>
+            <select data-role="project-profile-sandbox-access" data-idx="${idx}" data-item-idx="${itemIdx}">
+              <option value="none" ${item.access === 'none' ? 'selected' : ''}>none</option>
+              <option value="read" ${item.access === 'read' ? 'selected' : ''}>read</option>
+              <option value="write" ${item.access === 'write' ? 'selected' : ''}>write</option>
+            </select>
+            <button class="btn btn-secondary btn-sm" data-role="remove-project-profile-sandbox-item" data-idx="${idx}" data-item-idx="${itemIdx}" type="button">删除</button>
+          </div>
+        `).join('')}
+        <button class="btn btn-secondary btn-sm" data-role="add-project-profile-sandbox-item" data-idx="${idx}" type="button">+ 添加沙盘白名单规则</button>
+      </div>
+      <div class="project-profile-footer">
+        <button class="btn btn-secondary btn-sm" data-role="remove-project-profile" data-idx="${idx}" type="button">删除 Profile</button>
+      </div>
+    </div>
+  `).join('');
+}
+
+function renderProjectBindingsEditor() {
+  const container = document.getElementById('project-bindings-list');
+  if (!(container instanceof HTMLElement)) return;
+  const bindings = state.projectSettingsDraft?.bindings || [];
+  const users = state.projectSettingsDraft?.users || [];
+  const profiles = state.projectSettingsDraft?.profiles || [];
+  if (!bindings.length) {
+    container.innerHTML = '<div class="project-empty">暂无绑定，点击上方“添加绑定”。</div>';
+    return;
+  }
+  container.innerHTML = bindings.map((binding, idx) => `
+    <div class="project-binding-card">
+      <div class="project-row compact">
+        <select data-role="project-binding-user" data-idx="${idx}">
+          <option value="">选择用户</option>
+          ${users.map((user) => `<option value="${escapeHtml(user.id)}" ${binding.user_id === user.id ? 'selected' : ''}>${escapeHtml(user.name || user.id)} (${escapeHtml(user.id)})</option>`).join('')}
+        </select>
+        <button class="btn btn-secondary btn-sm" data-role="remove-project-binding" data-idx="${idx}" type="button">删除</button>
+      </div>
+      <div class="project-binding-profiles">
+        ${profiles.map((profile) => `
+          <label class="inline-checkbox">
+            <input type="checkbox" data-role="project-binding-profile" data-idx="${idx}" data-profile-id="${escapeHtml(profile.id)}" ${binding.profile_ids.includes(profile.id) ? 'checked' : ''}>
+            <span>${escapeHtml(profile.name || profile.id)}</span>
+          </label>
+        `).join('')}
+      </div>
+    </div>
+  `).join('');
+}
+
+function renderProjectSettingsEditor() {
+  renderProjectUsersEditor();
+  renderProjectProfilesEditor();
+  renderProjectBindingsEditor();
+}
+
+async function loadProjectSettings() {
+  if (state.fullAccess || state.pageAccess.sandboxes) {
+    try {
+      await loadSandboxes();
+    } catch {
+      // Ignore sandbox list failures; project settings can still be edited.
+    }
+  }
+  const config = await apiRequest(`${API_BASE}/project-settings`);
+  state.projectSettingsDraft = normalizeProjectSettingsDraft(config);
+  renderProjectSettingsEditor();
+}
+
+function collectProjectSettingsPayload() {
+  const draft = state.projectSettingsDraft || { users: [], profiles: [], bindings: [] };
+  return {
+    users: draft.users.map((user) => ({
+      id: String(user.id || '').trim(),
+      name: String(user.name || '').trim(),
+      ips: Array.from(new Set((user.ips || []).map((ip) => String(ip || '').trim()).filter((ip) => Boolean(ip)))),
+    })),
+    profiles: draft.profiles.map((profile) => ({
+      id: String(profile.id || '').trim(),
+      name: String(profile.name || '').trim(),
+      apply_to_all_users: Boolean(profile.apply_to_all_users),
+      page_access: {
+        sandboxes: Boolean(profile.page_access?.sandboxes),
+        diaries: Boolean(profile.page_access?.diaries),
+        changes: Boolean(profile.page_access?.changes),
+        settings: Boolean(profile.page_access?.settings),
+      },
+      sandbox_access: {
+        all: String(profile.sandbox_access?.all || 'none'),
+        items: (profile.sandbox_access?.items || [])
+          .map((item) => ({
+            sandbox_id: String(item.sandbox_id || '').trim(),
+            access: String(item.access || 'none'),
+          }))
+          .filter((item) => Boolean(item.sandbox_id)),
+      },
+    })),
+    bindings: draft.bindings
+      .map((binding) => ({
+        user_id: String(binding.user_id || '').trim(),
+        profile_ids: Array.from(new Set((binding.profile_ids || []).map((id) => String(id || '').trim()).filter((id) => Boolean(id)))),
+      }))
+      .filter((binding) => Boolean(binding.user_id)),
+  };
 }
 
 function createSettingHeaderRow(key = '', value = '') {
@@ -1807,15 +2241,18 @@ function editWorkItem(id) {
   document.getElementById('new-item-assignee').value = item.assignee;
   document.getElementById('new-item-status').value = item.status;
   document.getElementById('new-item-priority').value = item.priority;
+  document.getElementById('new-item-parent').value = String(item.parent_id || '');
   
   document.getElementById('item-dialog').dataset.editId = id;
   document.getElementById('item-dialog').showModal();
 }
 
-function initApp() {
-  const hash = window.location.hash;
+async function initApp() {
+  await loadRuntimeMode();
   loadWorkItemAssigneePreference();
+  loadWorkTreeViewModePreference();
   renderQuickDiaryTargetLabel();
+  applyReadonlyMode();
   
   document.querySelectorAll('.nav-list a').forEach(link => {
     link.addEventListener('click', (e) => {
@@ -1825,6 +2262,7 @@ function initApp() {
   });
   
   document.getElementById('add-sandbox-btn')?.addEventListener('click', () => {
+    if (state.readonly) return;
     document.getElementById('sandbox-dialog').showModal();
   });
   
@@ -1833,6 +2271,7 @@ function initApp() {
   });
   
   const createSandbox = async (e) => {
+    if (state.readonly) return;
     e?.preventDefault?.();
     const name = document.getElementById('new-sandbox-name').value;
     const description = document.getElementById('new-sandbox-desc').value;
@@ -1856,6 +2295,7 @@ function initApp() {
   document.getElementById('confirm-sandbox-btn')?.addEventListener('click', createSandbox);
   
   document.getElementById('add-item-btn')?.addEventListener('click', () => {
+    if (state.readonly) return;
     document.getElementById('item-dialog-title').textContent = '添加任务';
     document.getElementById('item-dialog').dataset.editId = '';
     document.getElementById('new-item-name').value = '';
@@ -1867,9 +2307,11 @@ function initApp() {
     document.getElementById('item-dialog').showModal();
   });
 
-  document.getElementById('toggle-sandbox-present-btn')?.addEventListener('click', () => {
-    state.sandboxPresentationMode = !state.sandboxPresentationMode;
-    applySandboxLayoutMode();
+  document.getElementById('toggle-sandbox-chat-btn')?.addEventListener('click', () => {
+    if (state.readonly) return;
+    state.sandboxChatVisible = !state.sandboxChatVisible;
+    applySandboxChatVisibility();
+    applySandboxLayoutHeight();
   });
 
   document.getElementById('toggle-sandbox-fullscreen-btn')?.addEventListener('click', async () => {
@@ -1890,6 +2332,7 @@ function initApp() {
   });
 
   document.getElementById('toggle-node-entity-form-btn')?.addEventListener('click', () => {
+    if (state.readonly) return;
     setNodeEntityFormExpanded(!state.nodeEntityFormExpanded);
     if (state.nodeEntityFormExpanded) {
       document.getElementById('entity-title-input')?.focus();
@@ -1918,6 +2361,7 @@ function initApp() {
   });
 
   document.getElementById('create-node-entity-btn')?.addEventListener('click', async () => {
+    if (state.readonly) return;
     if (!state.currentSandbox || !state.selectedNodeId) return;
     const btn = document.getElementById('create-node-entity-btn');
     const title = document.getElementById('entity-title-input').value.trim();
@@ -2016,6 +2460,7 @@ function initApp() {
   });
   
   document.getElementById('confirm-item-btn')?.addEventListener('click', async () => {
+    if (state.readonly) return;
     const dialog = document.getElementById('item-dialog');
     const editId = dialog.dataset.editId || null;
     const isNewItem = !editId;
@@ -2062,6 +2507,7 @@ function initApp() {
   });
   
   document.getElementById('rollback-btn')?.addEventListener('click', async () => {
+    if (state.readonly) return;
     if (!state.currentSandbox?.items?.length) return;
     const lastItem = state.currentSandbox.items[state.currentSandbox.items.length - 1];
     await apiRequest(`${API_BASE}/items/${lastItem.id}/rollback`, { method: 'POST' });
@@ -2069,6 +2515,7 @@ function initApp() {
   });
   
   document.getElementById('sandbox-send-btn')?.addEventListener('click', async () => {
+    if (state.readonly) return;
     const input = document.getElementById('sandbox-chat-input');
     const content = input.value.trim();
     if (!content || !state.currentSandbox) return;
@@ -2186,12 +2633,14 @@ function initApp() {
   sandboxActionHandler = handleAIAction;
   
   document.getElementById('sandbox-chat-input')?.addEventListener('keypress', (e) => {
+    if (state.readonly) return;
     if (e.key === 'Enter') {
       document.getElementById('sandbox-send-btn').click();
     }
   });
   
   document.getElementById('save-diary-btn')?.addEventListener('click', async () => {
+    if (state.readonly) return;
     const content = document.getElementById('diary-content').value.trim();
     if (!content) return;
     await saveDiaryEntry({ content, sandboxId: null, workItemId: null });
@@ -2200,6 +2649,7 @@ function initApp() {
   });
 
   document.getElementById('drawer-diary-save-btn')?.addEventListener('click', async () => {
+    if (state.readonly) return;
     if (!state.currentSandbox || !state.selectedNodeId) return;
     const textarea = document.getElementById('drawer-diary-content');
     if (!(textarea instanceof HTMLTextAreaElement)) return;
@@ -2222,9 +2672,11 @@ function initApp() {
     closeDiaryEditDialog();
   });
   document.getElementById('confirm-edit-diary-btn')?.addEventListener('click', async () => {
+    if (state.readonly) return;
     await submitDiaryEditDialog();
   });
   document.getElementById('diary-edit-content')?.addEventListener('keydown', async (event) => {
+    if (state.readonly) return;
     const isSubmit = event.key === 'Enter' && (event.metaKey || event.ctrlKey);
     if (!isSubmit) return;
     event.preventDefault();
@@ -2241,10 +2693,13 @@ function initApp() {
   });
   
   document.getElementById('save-settings-btn')?.addEventListener('click', async () => {
+    if (state.readonly || !state.canAccessSystemSettings) return;
     const api_url = document.getElementById('setting-api-url').value;
     const api_key = document.getElementById('setting-api-key').value;
     const model = document.getElementById('setting-model').value;
     const headers = collectSettingHeadersFromUI();
+    const editableIpsRaw = document.getElementById('setting-editable-ips')?.value || '';
+    const editableIps = String(editableIpsRaw).split('\n').map((ip) => ip.trim()).filter((ip) => Boolean(ip));
     
     await apiRequest(`${API_BASE}/settings/api_url`, {
       method: 'PUT',
@@ -2264,17 +2719,239 @@ function initApp() {
       method: 'PUT',
       body: JSON.stringify({ value: headers }),
     });
+    await apiRequest(`${API_BASE}/settings/editable_ip_allowlist`, {
+      method: 'PUT',
+      body: JSON.stringify({ value: editableIps }),
+    });
     
     alert('设置已保存');
+    await loadRuntimeMode();
+    applyReadonlyMode();
     await loadSettings();
   });
 
   document.getElementById('add-setting-header-btn')?.addEventListener('click', () => {
+    if (state.readonly || !state.canAccessSystemSettings) return;
     const list = document.getElementById('setting-headers-list');
     if (!(list instanceof HTMLElement)) return;
     list.appendChild(createSettingHeaderRow('', ''));
   });
 
+  document.getElementById('add-project-user-btn')?.addEventListener('click', () => {
+    if (!state.projectSettingsDraft) return;
+    state.projectSettingsDraft.users.push({ id: '', name: '', ips: [] });
+    renderProjectSettingsEditor();
+  });
+
+  document.getElementById('add-project-profile-btn')?.addEventListener('click', () => {
+    if (!state.projectSettingsDraft) return;
+    state.projectSettingsDraft.profiles.push({
+      id: '',
+      name: '',
+      apply_to_all_users: false,
+      page_access: { sandboxes: true, diaries: true, changes: true, settings: false },
+      sandbox_access: { all: 'none', items: [] },
+    });
+    renderProjectSettingsEditor();
+  });
+
+  document.getElementById('add-project-binding-btn')?.addEventListener('click', () => {
+    if (!state.projectSettingsDraft) return;
+    state.projectSettingsDraft.bindings.push({ user_id: '', profile_ids: [] });
+    renderProjectSettingsEditor();
+  });
+
+  document.getElementById('project-users-list')?.addEventListener('click', (event) => {
+    const target = event.target;
+    if (!(target instanceof HTMLElement)) return;
+    if (!state.projectSettingsDraft) return;
+    if (target.dataset.role === 'add-project-user-ip') {
+      const idx = Number(target.dataset.idx);
+      const input = document.querySelector(`[data-role="project-user-ip-input"][data-idx="${idx}"]`);
+      if (input instanceof HTMLInputElement) {
+        addUserIpAtIndex(idx, input.value);
+      }
+      return;
+    }
+    if (target.dataset.role === 'remove-project-user-ip') {
+      const idx = Number(target.dataset.idx);
+      const ipIdx = Number(target.dataset.ipIdx);
+      if (!Number.isFinite(idx) || idx < 0 || !Number.isFinite(ipIdx) || ipIdx < 0) return;
+      const user = state.projectSettingsDraft.users[idx];
+      if (!user) return;
+      user.ips.splice(ipIdx, 1);
+      renderProjectSettingsEditor();
+      return;
+    }
+    if (target.dataset.role !== 'remove-project-user') return;
+    const idx = Number(target.dataset.idx);
+    if (!Number.isFinite(idx) || idx < 0) return;
+    const removed = state.projectSettingsDraft.users[idx];
+    state.projectSettingsDraft.users.splice(idx, 1);
+    if (removed?.id) {
+      state.projectSettingsDraft.bindings = (state.projectSettingsDraft.bindings || []).filter((binding) => binding.user_id !== removed.id);
+    }
+    renderProjectSettingsEditor();
+  });
+
+  document.getElementById('project-users-list')?.addEventListener('input', (event) => {
+    const target = event.target;
+    if (!(target instanceof HTMLInputElement) || !state.projectSettingsDraft) return;
+    const idx = Number(target.dataset.idx);
+    if (!Number.isFinite(idx) || idx < 0) return;
+    const user = state.projectSettingsDraft.users[idx];
+    if (!user) return;
+    if (target.dataset.role === 'project-user-id') {
+      user.id = target.value.trim();
+    } else if (target.dataset.role === 'project-user-name') {
+      user.name = target.value.trim();
+    }
+  });
+
+  document.getElementById('project-users-list')?.addEventListener('keydown', (event) => {
+    const target = event.target;
+    if (!(target instanceof HTMLInputElement) || !state.projectSettingsDraft) return;
+    if (target.dataset.role !== 'project-user-ip-input') return;
+    if (event.key !== 'Enter') return;
+    event.preventDefault();
+    const idx = Number(target.dataset.idx);
+    addUserIpAtIndex(idx, target.value);
+  });
+
+  document.getElementById('project-profiles-list')?.addEventListener('click', (event) => {
+    const target = event.target;
+    if (!(target instanceof HTMLElement) || !state.projectSettingsDraft) return;
+    const profileIdx = Number(target.dataset.idx);
+    if (!Number.isFinite(profileIdx) || profileIdx < 0) return;
+    if (target.dataset.role === 'remove-project-profile') {
+      const removed = state.projectSettingsDraft.profiles[profileIdx];
+      state.projectSettingsDraft.profiles.splice(profileIdx, 1);
+      if (removed?.id) {
+        state.projectSettingsDraft.bindings.forEach((binding) => {
+          binding.profile_ids = (binding.profile_ids || []).filter((id) => id !== removed.id);
+        });
+      }
+      renderProjectSettingsEditor();
+      return;
+    }
+    if (target.dataset.role === 'add-project-profile-sandbox-item') {
+      const profile = state.projectSettingsDraft.profiles[profileIdx];
+      if (!profile) return;
+      profile.sandbox_access.items.push({ sandbox_id: '', access: 'read' });
+      renderProjectSettingsEditor();
+      return;
+    }
+    if (target.dataset.role === 'remove-project-profile-sandbox-item') {
+      const profile = state.projectSettingsDraft.profiles[profileIdx];
+      if (!profile) return;
+      const itemIdx = Number(target.dataset.itemIdx);
+      if (!Number.isFinite(itemIdx) || itemIdx < 0) return;
+      profile.sandbox_access.items.splice(itemIdx, 1);
+      renderProjectSettingsEditor();
+    }
+  });
+
+  document.getElementById('project-profiles-list')?.addEventListener('input', (event) => {
+    const target = event.target;
+    if (!(target instanceof HTMLInputElement) || !state.projectSettingsDraft) return;
+    const profileIdx = Number(target.dataset.idx);
+    if (!Number.isFinite(profileIdx) || profileIdx < 0) return;
+    const profile = state.projectSettingsDraft.profiles[profileIdx];
+    if (!profile) return;
+    if (target.dataset.role === 'project-profile-id') {
+      profile.id = target.value.trim();
+      return;
+    }
+    if (target.dataset.role === 'project-profile-name') {
+      profile.name = target.value.trim();
+      return;
+    }
+    if (target.dataset.role === 'project-profile-apply-all') {
+      profile.apply_to_all_users = target.checked;
+      return;
+    }
+    if (target.dataset.role === 'project-profile-page') {
+      const page = target.dataset.page;
+      if (page === 'sandboxes' || page === 'diaries' || page === 'changes' || page === 'settings') {
+        profile.page_access[page] = target.checked;
+      }
+      return;
+    }
+  });
+
+  document.getElementById('project-profiles-list')?.addEventListener('change', (event) => {
+    const target = event.target;
+    if (!(target instanceof HTMLSelectElement) || !state.projectSettingsDraft) return;
+    const profileIdx = Number(target.dataset.idx);
+    if (!Number.isFinite(profileIdx) || profileIdx < 0) return;
+    const profile = state.projectSettingsDraft.profiles[profileIdx];
+    if (!profile) return;
+    if (target.dataset.role === 'project-profile-all-access') {
+      profile.sandbox_access.all = target.value || 'none';
+      return;
+    }
+    if (target.dataset.role === 'project-profile-sandbox-id') {
+      const itemIdx = Number(target.dataset.itemIdx);
+      if (!Number.isFinite(itemIdx) || itemIdx < 0) return;
+      const item = profile.sandbox_access.items[itemIdx];
+      if (item) item.sandbox_id = String(target.value || '').trim();
+      return;
+    }
+    if (target.dataset.role === 'project-profile-sandbox-access') {
+      const itemIdx = Number(target.dataset.itemIdx);
+      if (!Number.isFinite(itemIdx) || itemIdx < 0) return;
+      const item = profile.sandbox_access.items[itemIdx];
+      if (item) item.access = target.value || 'none';
+    }
+  });
+
+  document.getElementById('project-bindings-list')?.addEventListener('click', (event) => {
+    const target = event.target;
+    if (!(target instanceof HTMLElement) || !state.projectSettingsDraft) return;
+    if (target.dataset.role !== 'remove-project-binding') return;
+    const idx = Number(target.dataset.idx);
+    if (!Number.isFinite(idx) || idx < 0) return;
+    state.projectSettingsDraft.bindings.splice(idx, 1);
+    renderProjectSettingsEditor();
+  });
+
+  document.getElementById('project-bindings-list')?.addEventListener('change', (event) => {
+    const target = event.target;
+    if (!state.projectSettingsDraft) return;
+    const idx = Number(target instanceof HTMLElement ? target.dataset.idx : NaN);
+    if (!Number.isFinite(idx) || idx < 0) return;
+    const binding = state.projectSettingsDraft.bindings[idx];
+    if (!binding) return;
+    if (target instanceof HTMLSelectElement && target.dataset.role === 'project-binding-user') {
+      binding.user_id = target.value || '';
+      return;
+    }
+    if (target instanceof HTMLInputElement && target.dataset.role === 'project-binding-profile') {
+      const profileId = String(target.dataset.profileId || '').trim();
+      const set = new Set(binding.profile_ids || []);
+      if (target.checked) set.add(profileId);
+      else set.delete(profileId);
+      binding.profile_ids = Array.from(set);
+    }
+  });
+
+  document.getElementById('save-project-settings-btn')?.addEventListener('click', async () => {
+    if (state.readonly || (!state.fullAccess && !state.pageAccess.settings)) return;
+    try {
+      const payload = collectProjectSettingsPayload();
+      await apiRequest(`${API_BASE}/project-settings`, {
+        method: 'PUT',
+        body: JSON.stringify(payload),
+      });
+      alert('项目设置已保存');
+      await loadRuntimeMode();
+      applyReadonlyMode();
+      await loadProjectSettings();
+    } catch (error) {
+      alert(`项目设置保存失败: ${error?.message || error}`);
+    }
+  });
+
   document.getElementById('work-item-search')?.addEventListener('input', (e) => {
     state.workItemSearch = e.target.value || '';
     renderWorkTree();
@@ -2288,6 +2965,7 @@ function initApp() {
   document.getElementById('work-tree-view-mode')?.addEventListener('change', (e) => {
     const nextMode = e.target.value || 'full';
     applyWorkTreeViewMode(nextMode);
+    persistWorkTreeViewModePreference();
     renderWorkTree();
   });
 
@@ -2411,12 +3089,13 @@ function initApp() {
       clearTimeout(resizeRenderTimer);
     }
     resizeRenderTimer = setTimeout(() => {
+      applySandboxLayoutHeight();
       renderWorkTree();
     }, 120);
   });
   
   window.addEventListener('hashchange', handleRoute);
-  handleRoute();
+  await handleRoute();
   
   async function handleRoute() {
     const hash = window.location.hash.slice(1) || '/';
@@ -2428,13 +3107,31 @@ function initApp() {
     }
     
     if (pathHash === '/') {
-      showPage('sandboxes');
-      await loadSandboxes();
+      if (state.pageAccess.sandboxes || state.fullAccess) {
+        showPage('sandboxes');
+        await loadSandboxes();
+      } else if (state.pageAccess.diaries) {
+        window.location.hash = '/diaries';
+      } else if (state.pageAccess.changes) {
+        window.location.hash = '/changes';
+      } else if (state.pageAccess.settings) {
+        window.location.hash = '/settings';
+      } else if (state.canAccessSystemSettings) {
+        window.location.hash = '/system-settings';
+      }
     } else if (pathHash === '/sandboxes') {
+      if (!state.pageAccess.sandboxes && !state.fullAccess) {
+        window.location.hash = '/';
+        return;
+      }
       showPage('sandboxes');
       await loadSandboxes();
     } else if (pathHash.startsWith('/sandbox/')) {
       const id = decodeURIComponent(pathHash.split('/')[2] || '');
+      if (!canReadSandboxById(id)) {
+        window.location.hash = '/';
+        return;
+      }
       showPage('sandbox-detail');
       await loadSandbox(id);
       const targetNodeId = String(query.get('node_id') || '').trim();
@@ -2444,15 +3141,34 @@ function initApp() {
         showNodeEntityDrawer(targetNodeId, preferredFilter);
       }
     } else if (pathHash === '/diaries') {
+      if (!state.pageAccess.diaries && !state.fullAccess) {
+        window.location.hash = '/';
+        return;
+      }
       showPage('diaries');
       await loadDiaries();
       await loadSandboxes();
     } else if (pathHash === '/changes') {
+      if (!state.pageAccess.changes && !state.fullAccess) {
+        window.location.hash = '/';
+        return;
+      }
       showPage('changes');
       await loadSandboxes();
       await loadChanges();
     } else if (pathHash === '/settings') {
+      if (!state.pageAccess.settings && !state.fullAccess) {
+        window.location.hash = '/';
+        return;
+      }
       showPage('settings');
+      await loadProjectSettings();
+    } else if (pathHash === '/system-settings') {
+      if (!state.canAccessSystemSettings) {
+        window.location.hash = '/';
+        return;
+      }
+      showPage('system-settings');
       await loadSettings();
     }
   }