feat: enhance session UX and codex defaults

public/app.js

@@ -99,6 +99,8 @@
   let sidebarSwipe = null;
   let pendingAttachments = [];
   let uploadingAttachments = [];
+  let attachmentPreviewModal = null;
+  const attachmentPreviewCache = new Map();
   let loginPasswordValue = ''; // store login password for force-change flow
   let currentCwd = null;
   let currentSessionRunning = false;
@@ -1119,6 +1121,7 @@
         },
       });
     } catch {}
+    clearAttachmentPreviewCache(id);
   }
 
   function ensureAuthenticatedWs() {
@@ -1160,14 +1163,184 @@
     });
   }
 
-  function renderAttachmentLabels(attachments, options = {}) {
+  function clearAttachmentPreviewCache(id) {
+    const entry = attachmentPreviewCache.get(id);
+    if (entry?.url && entry.objectUrl) URL.revokeObjectURL(entry.url);
+    attachmentPreviewCache.delete(id);
+  }
+
+  async function getAttachmentPreviewUrl(attachment) {
+    const id = String(attachment?.id || '').trim();
+    if (!id) throw new Error('图片附件缺少 ID');
+    if (attachment.storageState === 'expired') {
+      throw new Error('图片已过期');
+    }
+    if (attachment.previewUrl) return attachment.previewUrl;
+
+    const cached = attachmentPreviewCache.get(id);
+    if (cached?.url) return cached.url;
+    if (cached?.promise) return cached.promise;
+
+    const promise = (async () => {
+      await ensureAuthenticatedWs();
+      if (!authToken) {
+        throw new Error('登录状态已失效，请刷新页面后重新登录再预览图片。');
+      }
+      const url = `/api/attachments/${encodeURIComponent(id)}?token=${encodeURIComponent(authToken)}`;
+      attachmentPreviewCache.set(id, { url, objectUrl: false });
+      return url;
+    })().catch((err) => {
+      attachmentPreviewCache.delete(id);
+      throw err;
+    });
+
+    attachmentPreviewCache.set(id, { promise });
+    return promise;
+  }
+
+  function closeAttachmentPreviewModal() {
+    if (!attachmentPreviewModal) return;
+    const { overlay, escapeHandler } = attachmentPreviewModal;
+    if (escapeHandler) document.removeEventListener('keydown', escapeHandler);
+    if (overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay);
+    attachmentPreviewModal = null;
+  }
+
+  async function openAttachmentPreviewModal(attachment) {
+    if (!attachment || attachment.storageState === 'expired') {
+      showToast('图片已过期，无法预览');
+      return;
+    }
+
+    closeAttachmentPreviewModal();
+
+    const overlay = document.createElement('div');
+    overlay.className = 'modal-overlay attachment-preview-overlay';
+    overlay.innerHTML = `
+      <div class="modal-panel modal-panel-wide attachment-preview-panel">
+        <div class="modal-header">
+          <span class="modal-title">图片预览</span>
+          <button class="modal-close-btn" type="button" aria-label="关闭">✕</button>
+        </div>
+        <div class="attachment-preview-body">
+          <div class="attachment-preview-stage is-loading">
+            <div class="attachment-preview-placeholder">正在加载图片…</div>
+            <img class="attachment-preview-image" alt="${escapeHtml(attachment.filename || 'image')}" hidden>
+          </div>
+          <div class="attachment-preview-meta">
+            <div class="attachment-preview-name">${escapeHtml(attachment.filename || 'image')}</div>
+            <div class="attachment-preview-desc">${escapeHtml(formatFileSize(attachment.size || 0))} · 点击空白处关闭</div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    document.body.appendChild(overlay);
+    const stageEl = overlay.querySelector('.attachment-preview-stage');
+    const imgEl = overlay.querySelector('.attachment-preview-image');
+    const placeholderEl = overlay.querySelector('.attachment-preview-placeholder');
+    const closeBtn = overlay.querySelector('.modal-close-btn');
+
+    const finishClose = () => closeAttachmentPreviewModal();
+    attachmentPreviewModal = {
+      overlay,
+      escapeHandler: null,
+    };
+
+    attachmentPreviewModal.escapeHandler = (e) => {
+      if (e.key === 'Escape') finishClose();
+    };
+    document.addEventListener('keydown', attachmentPreviewModal.escapeHandler);
+
+    closeBtn.addEventListener('click', finishClose);
+    overlay.addEventListener('click', (e) => {
+      if (e.target === overlay) finishClose();
+    });
+
+    try {
+      const url = await getAttachmentPreviewUrl(attachment);
+      if (!attachmentPreviewModal || attachmentPreviewModal.overlay !== overlay) return;
+      imgEl.onload = () => {
+        if (!attachmentPreviewModal || attachmentPreviewModal.overlay !== overlay) return;
+        imgEl.hidden = false;
+        placeholderEl.hidden = true;
+        stageEl.classList.remove('is-loading');
+        stageEl.classList.add('is-ready');
+      };
+      imgEl.onerror = () => {
+        if (!attachmentPreviewModal || attachmentPreviewModal.overlay !== overlay) return;
+        placeholderEl.textContent = '图片加载失败';
+        stageEl.classList.remove('is-loading');
+        stageEl.classList.add('is-error');
+      };
+      imgEl.src = url;
+    } catch (err) {
+      if (!attachmentPreviewModal || attachmentPreviewModal.overlay !== overlay) return;
+      placeholderEl.textContent = err.message || '图片预览失败';
+      stageEl.classList.remove('is-loading');
+      stageEl.classList.add('is-error');
+    }
+  }
+
+  function hydrateAttachmentPreviews(root, attachments = []) {
+    if (!root) return;
+    const attachmentMap = new Map((Array.isArray(attachments) ? attachments : []).map((attachment) => [attachment.id, attachment]));
+    root.querySelectorAll('[data-attachment-id]').forEach((node) => {
+      const attachment = attachmentMap.get(node.dataset.attachmentId);
+      if (!attachment) return;
+      const imgEl = node.querySelector('.msg-attachment-thumb-image');
+      const placeholderEl = node.querySelector('.msg-attachment-thumb-placeholder');
+      const isExpired = attachment.storageState === 'expired';
+
+      if (!isExpired) {
+        getAttachmentPreviewUrl(attachment)
+          .then((url) => {
+            if (!node.isConnected) return;
+            imgEl.src = url;
+            imgEl.onload = () => {
+              if (!node.isConnected) return;
+              imgEl.hidden = false;
+              placeholderEl.hidden = true;
+              node.classList.add('is-loaded');
+            };
+            imgEl.onerror = () => {
+              if (!node.isConnected) return;
+              placeholderEl.textContent = '图片加载失败';
+              node.classList.add('is-error');
+            };
+          })
+          .catch((err) => {
+            if (!node.isConnected) return;
+            placeholderEl.textContent = err.message || '图片加载失败';
+            node.classList.add('is-error');
+          });
+      }
+
+      node.addEventListener('click', () => openAttachmentPreviewModal(attachment));
+    });
+  }
+
+  function renderAttachmentPreviews(attachments, options = {}) {
     if (!Array.isArray(attachments) || attachments.length === 0) return '';
-    const labels = attachments.map((attachment) => {
-      const stateSuffix = attachment.storageState === 'expired' ? '（已过期）' : '';
+    const items = attachments.map((attachment) => {
+      const state = attachment.storageState || 'available';
       const name = escapeHtml(attachment.filename || 'image');
-      return `<span class="msg-attachment-label">图片: ${name}${stateSuffix}</span>`;
+      const size = formatFileSize(attachment.size || 0);
+      const isExpired = state === 'expired';
+      return `
+        <button class="msg-attachment-card${isExpired ? ' is-expired' : ''}" type="button" data-attachment-id="${escapeHtml(attachment.id || '')}" data-attachment-state="${escapeHtml(state)}" data-attachment-name="${name}" ${isExpired ? 'disabled' : ''} title="${isExpired ? '图片已过期' : '点击放大预览'}">
+          <span class="msg-attachment-thumb">
+            <span class="msg-attachment-thumb-placeholder">${isExpired ? '已过期' : '加载中'}</span>
+            <img class="msg-attachment-thumb-image" alt="${name}" hidden>
+          </span>
+          <span class="msg-attachment-meta">
+            <span class="msg-attachment-name">图片: ${name}</span>
+            <span class="msg-attachment-note">${isExpired ? '已过期' : `${size} · 点击放大预览`}</span>
+          </span>
+        </button>
+      `;
     }).join('');
-    return `<div class="msg-attachments${options.compact ? ' compact' : ''}">${labels}</div>`;
+    return `<div class="msg-attachments${options.compact ? ' compact' : ''}">${items}</div>`;
   }
 
   function renderPendingAttachments() {
@@ -1262,7 +1435,9 @@
     try {
       const results = await Promise.allSettled(files.map(async (file) => {
         const optimized = await compressImageFile(file);
-        return uploadImageFile(optimized);
+        const uploaded = await uploadImageFile(optimized);
+        uploaded.previewUrl = URL.createObjectURL(file);
+        return uploaded;
       }));
       const errors = [];
       for (const result of results) {
@@ -2299,15 +2474,16 @@
         bubble.appendChild(textNode);
       }
       if (attachments.length > 0) {
-        bubble.insertAdjacentHTML('beforeend', renderAttachmentLabels(attachments));
+        bubble.insertAdjacentHTML('beforeend', renderAttachmentPreviews(attachments));
       }
     } else {
       renderAssistantContent(bubble, content);
       if (attachments.length > 0) {
-        bubble.insertAdjacentHTML('beforeend', renderAttachmentLabels(attachments));
+        bubble.insertAdjacentHTML('beforeend', renderAttachmentPreviews(attachments));
       }
     }
 
+    hydrateAttachmentPreviews(bubble, attachments);
     div.appendChild(avatar);
     div.appendChild(bubble);
     return div;
@@ -3258,7 +3434,10 @@
       header.title = group.cwd || group.name;
       header.innerHTML = `
         <span class="session-project-name">${escapeHtml(group.name)}</span>
-        <span class="session-project-count">${group.sessions.length}</span>
+        <span class="session-project-header-actions">
+          <span class="session-project-count">${group.sessions.length}</span>
+          <button class="session-project-create" type="button" title="在此项目新建会话" aria-label="在此项目新建会话">+</button>
+        </span>
       `;
       groupEl.appendChild(header);
 
@@ -3266,6 +3445,11 @@
         groupEl.appendChild(createSessionListItem(s));
       }
 
+      header.querySelector('.session-project-create').addEventListener('click', (e) => {
+        e.stopPropagation();
+        quickCreateProjectSession(group.cwd || '', { agent: currentAgent, mode: currentMode });
+      });
+
       sessionList.appendChild(groupEl);
     }
 
@@ -3604,7 +3788,8 @@
 	      showOptionPicker('选择 Codex 模型', baseOptions, current.base || '', (baseValue) => {
 	        const base = String(baseValue || '').trim();
 	        const thinkingOptions = [
-	          { value: '', label: '无 (默认)', desc: '不附加 (medium/high/xhigh) 后缀' },
+	          { value: '', label: '无 (默认)', desc: '不附加 (low/medium/high/xhigh) 后缀' },
+	          { value: 'low', label: 'low', desc: '较轻 thinking' },
 	          { value: 'medium', label: 'medium', desc: '中等 thinking' },
 	          { value: 'high', label: 'high', desc: '更强 thinking' },
 	          { value: 'xhigh', label: 'xhigh', desc: '最强 thinking' },
@@ -4994,6 +5179,21 @@
     try { localStorage.setItem(RECENT_CWD_KEY, JSON.stringify(list)); } catch {}
   }
 
+  function requestNewSession(options = {}) {
+    const cwd = options.cwd || null;
+    const rawCwd = options.rawCwd !== undefined ? options.rawCwd : (cwd || '');
+    const agent = normalizeAgent(options.agent || currentAgent);
+    const mode = ['default', 'plan', 'yolo'].includes(options.mode) ? options.mode : currentMode;
+    pendingNewSessionRequest = {
+      cwd,
+      rawCwd,
+      agent,
+      mode,
+    };
+    if (cwd) saveRecentCwd(cwd);
+    send({ type: 'new_session', cwd, agent, mode });
+  }
+
   // --- New Session Modal ---
   let _onCwdSuggestions = null;
 
@@ -5119,15 +5319,13 @@
     function createSession() {
       const cwd = getEffectiveCwd();
       const rawCwd = cwdInput.value.trim();
-      pendingNewSessionRequest = {
+      close();
+      requestNewSession({
         cwd,
         rawCwd,
         agent: targetAgent,
         mode: requestedMode,
-      };
-      close();
-      if (cwd) saveRecentCwd(cwd);
-      send({ type: 'new_session', cwd, agent: targetAgent, mode: requestedMode });
+      });
     }
 
     pickDirBtn.addEventListener('click', () => {
@@ -5167,6 +5365,16 @@
     cwdInput.focus();
   }
 
+  function quickCreateProjectSession(cwd, options = {}) {
+    const targetCwd = String(cwd || '').trim();
+    requestNewSession({
+      cwd: targetCwd || null,
+      rawCwd: targetCwd,
+      agent: options.agent || currentAgent,
+      mode: options.mode || currentMode,
+    });
+  }
+
   // --- Import Native Session Modal ---
   let _onNativeSessions = null;
 

public/style.css

@@ -669,6 +669,13 @@ body.session-loading-active {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  flex: 1;
+}
+.session-project-header-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
 }
 .session-project-count {
   display: inline-flex;
@@ -683,6 +690,30 @@ body.session-loading-active {
   font-size: 10px;
   letter-spacing: 0;
 }
+.session-project-create {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 1px solid rgba(221, 208, 192, 0.95);
+  border-radius: 999px;
+  background: rgba(255, 249, 242, 0.96);
+  color: var(--text-secondary);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.16s, color 0.16s, transform 0.16s, border-color 0.16s;
+}
+.session-project-create:hover {
+  background: var(--accent-light);
+  border-color: rgba(192, 85, 58, 0.24);
+  color: var(--accent);
+  transform: translateY(-1px);
+}
+.session-project-create:focus-visible {
+  outline: 2px solid rgba(192, 85, 58, 0.22);
+  outline-offset: 2px;
+}
 .session-item {
   display: flex;
   align-items: center;
@@ -1098,32 +1129,130 @@ body.session-loading-active {
   max-width: 100%;
 }
 .msg-attachments {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 220px));
+  gap: 10px;
   margin-top: 10px;
 }
-.msg-attachment-label {
-  display: inline-flex;
+.msg-attachment-card {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  padding: 8px;
+  border: 1px solid rgba(221, 208, 192, 0.92);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.82);
+  color: var(--text-primary);
+  text-align: left;
+  cursor: pointer;
+  box-shadow: 0 8px 20px rgba(45, 31, 20, 0.05);
+  transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s, background 0.16s;
+}
+.msg-attachment-card:hover {
+  transform: translateY(-1px);
+  border-color: rgba(192, 85, 58, 0.22);
+  box-shadow: 0 12px 24px rgba(45, 31, 20, 0.08);
+}
+.msg-attachment-card:focus-visible {
+  outline: 2px solid rgba(192, 85, 58, 0.24);
+  outline-offset: 2px;
+}
+.msg-attachment-card:disabled {
+  cursor: default;
+  opacity: 0.88;
+  transform: none;
+}
+.msg-attachment-card.is-expired {
+  background: rgba(249, 242, 233, 0.9);
+}
+.msg-attachment-thumb {
+  position: relative;
+  display: block;
+  width: 100%;
+  min-height: 132px;
+  overflow: hidden;
+  border-radius: 11px;
+  background:
+    linear-gradient(180deg, rgba(245, 238, 229, 0.92), rgba(232, 222, 211, 0.9));
+}
+.msg-attachment-thumb-placeholder,
+.attachment-preview-placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
   align-items: center;
-  max-width: 100%;
-  padding: 5px 9px;
-  border-radius: 999px;
-  background: rgba(91, 126, 161, 0.12);
+  justify-content: center;
+  padding: 12px;
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+.msg-attachment-thumb-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transition: opacity 0.18s ease;
+}
+.msg-attachment-card.is-loaded .msg-attachment-thumb-image {
+  opacity: 1;
+}
+.msg-attachment-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.msg-attachment-name,
+.msg-attachment-note {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.msg-attachment-name {
+  font-size: 12px;
+  font-weight: 700;
+}
+.msg-attachment-note {
   color: var(--text-secondary);
   font-size: 11px;
-  font-weight: 600;
-  line-height: 1.35;
+}
+.msg.user .msg-attachment-card {
+  background: rgba(255, 255, 255, 0.14);
+  border-color: rgba(255, 255, 255, 0.2);
+  color: #fff;
+  box-shadow: none;
+}
+.msg.user .msg-attachment-card:hover {
+  border-color: rgba(255, 255, 255, 0.34);
+}
+.msg.user .msg-attachment-thumb {
+  background: rgba(255, 255, 255, 0.08);
+}
+.msg.user .msg-attachment-thumb-placeholder,
+.msg.user .msg-attachment-note {
+  color: rgba(255, 255, 255, 0.78);
+}
+.msg.user .msg-attachment-name {
+  color: #fff;
+}
+.msg.user .msg-attachment-card.is-expired {
+  background: rgba(255, 255, 255, 0.1);
+}
+.msg-attachment-card.is-error .msg-attachment-thumb-placeholder {
+  color: var(--danger);
 }
 .msg.user .msg-bubble {
   background: var(--bg-bubble-user);
   color: #fff;
   border-bottom-right-radius: 4px;
 }
-.msg.user .msg-attachment-label {
-  background: rgba(255, 255, 255, 0.16);
-  color: rgba(255, 255, 255, 0.92);
-}
 .msg.assistant .msg-bubble {
   background: var(--bg-bubble-assistant);
   border: 1px solid var(--border-color);
@@ -2517,6 +2646,10 @@ html[data-theme='coolvibe'] .settings-back:hover {
 .modal-panel-wide {
   max-width: 600px;
 }
+.attachment-preview-panel {
+  width: min(92vw, 1040px);
+  max-width: min(92vw, 1040px);
+}
 .modal-header {
   display: flex;
   align-items: center;
@@ -2546,6 +2679,50 @@ html[data-theme='coolvibe'] .settings-back:hover {
   overflow-y: auto;
   flex: 1;
 }
+.attachment-preview-body {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 18px 20px 20px;
+}
+.attachment-preview-stage {
+  position: relative;
+  min-height: 320px;
+  max-height: 72vh;
+  border-radius: 16px;
+  overflow: hidden;
+  background:
+    linear-gradient(180deg, rgba(245, 238, 229, 0.96), rgba(232, 222, 211, 0.92));
+  border: 1px solid rgba(221, 208, 192, 0.92);
+}
+.attachment-preview-stage.is-ready {
+  background: #111;
+}
+.attachment-preview-stage.is-error {
+  border-color: rgba(192, 85, 58, 0.24);
+}
+.attachment-preview-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-height: 72vh;
+  object-fit: contain;
+  background: #111;
+}
+.attachment-preview-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.attachment-preview-name {
+  color: var(--text-primary);
+  font-size: 15px;
+  font-weight: 700;
+}
+.attachment-preview-desc {
+  color: var(--text-secondary);
+  font-size: 12px;
+}
 .modal-footer {
   display: flex;
   justify-content: flex-end;