@rexvane/piweb 0.3.24 → 0.3.26

package/src/components/SessionImportSection.tsx

@@ -130,9 +130,9 @@ export function SessionImportSection({ cwd }: { cwd: string }) {
 	 */
 	const [activeSource, setActiveSource] = useState("");
 	useEffect(() => {
-		if (activeSource && groups.some((group) => group.source === activeSource)) return;
-		setActiveSource(groups[0]?.source ?? "");
-	}, [groups, activeSource]);
+		// 扫描完成的 effect 可能晚于用户点击；按执行时的最新选择决定是否回退。
+		setActiveSource((current) => groups.some((group) => group.source === current) ? current : groups[0]?.source ?? "");
+	}, [groups]);
 	const activeGroup = groups.find((group) => group.source === activeSource);
 
 	const toggle = (summary: Summary) => {
@@ -348,36 +348,51 @@ export function SessionImportSection({ cwd }: { cwd: string }) {
 							return (
 								<label
 									key={rowKey}
-									className="flex cursor-pointer items-center gap-3 rounded-xl px-3 py-2 transition-colors"
+									className="flex cursor-pointer items-center gap-3 rounded-2xl px-3.5 py-2.5 transition-all"
 									style={{
-										border: `0.5px solid ${checked ? "var(--dsw-accent)" : "var(--dsw-border-l2)"}`,
-										background: checked ? "var(--dsw-accent-soft)" : "transparent",
-										opacity: done ? 0.5 : 1,
+										border: `1px solid ${checked ? "var(--dsw-accent)" : "var(--dsw-border-l2)"}`,
+										background: checked ? "var(--dsw-accent-soft)" : "var(--dsw-bg-elevated)",
+										opacity: done ? 0.45 : 1,
+										transition: "all 0.2s var(--isx-ease)",
+									}}
+									onMouseEnter={(e) => {
+										if (!checked && !done) {
+											e.currentTarget.style.borderColor = "var(--dsw-border-l3)";
+											e.currentTarget.style.background = "var(--dsw-hover)";
+											e.currentTarget.style.transform = "translateY(-1px)";
+										}
+									}}
+									onMouseLeave={(e) => {
+										if (!checked && !done) {
+											e.currentTarget.style.borderColor = "var(--dsw-border-l2)";
+											e.currentTarget.style.background = "var(--dsw-bg-elevated)";
+											e.currentTarget.style.transform = "none";
+										}
 									}}
 								>
-									<input type="checkbox" checked={checked} disabled={done} onChange={() => toggle(row)} className="flex-none" />
+									<input type="checkbox" checked={checked} disabled={done} onChange={() => toggle(row)} className="flex-none accent-[var(--dsw-accent)]" />
 									<div className="flex min-w-0 flex-1 flex-col gap-0.5">
-										<div className="truncate" style={{ fontSize: 12.5, color: done ? "var(--dsw-label-tertiary)" : "var(--dsw-label-primary)" }} title={row.title}>
+										<div className="truncate font-medium" style={{ fontSize: 12.5, color: done ? "var(--dsw-label-tertiary)" : "var(--dsw-label-primary)" }} title={row.title}>
 											{row.title || t.importUntitled}
 										</div>
 										<div className="flex min-w-0 items-center gap-1.5" title={row.projectPath}>
 											<span
-												className="flex-none rounded px-1 py-0.5"
-												style={{ fontSize: 10, background: "var(--dsw-selector)", color: "var(--dsw-label-tertiary)" }}
+												className="flex-none rounded-full px-2 py-0.5"
+												style={{ fontSize: 10, background: "var(--dsw-selector)", color: "var(--dsw-label-secondary)", border: "1px solid var(--dsw-border-l1)" }}
 											>
 												{goesOriginal ? t.importGoesOriginal : t.importGoesFallback}
 											</span>
-											<span className="truncate" style={{ fontSize: 11, color: "var(--dsw-label-caption)" }}>
+											<span className="truncate font-mono" style={{ fontSize: 11, color: "var(--dsw-label-caption)" }}>
 												{target || t.importNoProject}
 											</span>
 										</div>
 									</div>
-									<span className="flex-none" style={{ fontSize: 11, color: "var(--dsw-label-caption)", whiteSpace: "nowrap" }}>
+									<span className="flex-none font-mono" style={{ fontSize: 11, color: "var(--dsw-label-caption)", whiteSpace: "nowrap" }}>
 										{typeof row.messageCount === "number" ? t.importMessages.replace("{n}", String(row.messageCount)) : "—"}
 									</span>
-									<span className="flex-none" style={{ fontSize: 11, color: "var(--dsw-label-caption)", whiteSpace: "nowrap" }}>{dayOf(row.updatedAt ?? row.createdAt)}</span>
+									<span className="flex-none font-mono" style={{ fontSize: 11, color: "var(--dsw-label-caption)", whiteSpace: "nowrap" }}>{dayOf(row.updatedAt ?? row.createdAt)}</span>
 									{done && (
-										<span className="flex-none rounded-full px-2 py-0.5" style={{ fontSize: 10, background: "var(--dsw-selector)", color: "var(--dsw-label-caption)" }}>
+										<span className="flex-none rounded-full px-2 py-0.5 font-medium" style={{ fontSize: 10, background: "var(--dsw-selector)", color: "var(--dsw-label-caption)", border: "1px solid var(--dsw-border-l1)" }}>
 											{t.importAlready}
 										</span>
 									)}

package/src/components/SessionSidebar.tsx

@@ -8,7 +8,7 @@
  * 搜索模式（输入框替身标题行，空查询=工作区平铺，输入=会话平铺），
  * 滑杆菜单（分组方式：按工作区/单列表；排序方式：手动排序/最近更新）。
  */
-import { useEffect, useMemo, useRef, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { BrandPi, PiMark } from "@/components/PiMark";
 import {
@@ -68,7 +68,7 @@ interface WorkspaceGroup {
 	lastModified: string;
 }
 
-export function SessionSidebar({
+function SessionSidebarImpl({
 	sessions,
 	sessionListError,
 	onRetrySessionList,
@@ -221,11 +221,17 @@ export function SessionSidebar({
 		}
 	};
 
-	const currentCwd = sessions.find((s) => s.path === currentPath)?.cwd;
+	// 路径一律按 normPath 比：注册表里的工作区经过 path.resolve，会话头里的 cwd 是原样记下的，
+	// Windows 上盘符大小写、分隔符、尾斜杠都可能不同
+	const currentKey = currentPath ? normPath(currentPath) : "";
+	const currentCwd = currentKey ? sessions.find((s) => normPath(s.path) === currentKey)?.cwd : undefined;
 
 	useEffect(() => {
 		if (!viewMenu && !rowMenu && !sessionMenu) return;
 		const h = (e: MouseEvent) => {
+			// 按在行菜单的「…」按钮上：交给按钮的 onClick 切换（它也会关掉另一种菜单）。
+			// 这里先关的话，紧跟着的 click 又把菜单打开，再点一下「…」永远关不掉
+			if ((e.target as Element | null)?.closest?.("[data-menu-trigger]")) return;
 			if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
 				setViewMenu(false);
 				setRowMenu(null);
@@ -325,7 +331,7 @@ export function SessionSidebar({
 		} catch {
 			/* ignore */
 		}
-		const s = sessions.find((item) => item.path === currentPath);
+		const s = sessions.find((item) => normPath(item.path) === normPath(currentPath));
 		if (!s) return; // 会话列表尚未加载，等轮询后重试
 		lastExpandedFor.current = currentPath;
 		const matchedGroup = workspaceGroups.find((g) => normPath(g.cwd) === normPath(s.cwd));
@@ -400,46 +406,40 @@ export function SessionSidebar({
 	}
 
 	const sessionRow = (s: SessionListItem, indented: boolean, archived = false) => {
-		const selected = s.path === currentPath;
+		const selected = !!currentKey && normPath(s.path) === currentKey;
 		// dsh 合同：被归档的当前会话仍显示在主列表，菜单按真实归档态切换
 		const reallyArchived = archived || archivedPaths.some((p) => normPath(p) === normPath(s.path));
 		return (
 			<div
 				key={s.path}
-				className="group relative flex items-center rounded-xl transition-colors"
+				data-active={selected ? "true" : undefined}
+				className="isx-menu-item group relative flex items-center rounded-xl"
 				style={{
-					background: selected ? "var(--dsw-active)" : "transparent",
 					paddingLeft: indented ? 38 : 10,
-					paddingRight: 8,
+					paddingRight: 14,
 					paddingTop: 6,
 					paddingBottom: 6,
 					// 选中/悬停框之间留缝，不互相粘连
 					marginTop: 2,
 					marginBottom: 2,
 				}}
-				onMouseEnter={(e) => {
-					if (!selected) e.currentTarget.style.background = "var(--dsw-hover)";
-				}}
-				onMouseLeave={(e) => {
-					if (!selected) e.currentTarget.style.background = "transparent";
-				}}
 			>
 				{s.streaming && <span className="state-dot running" style={{ position: "absolute", left: indented ? 26 : 6, width: 6, height: 6 }} />}
 				<button className="flex min-w-0 flex-1 flex-col items-start text-left" onClick={() => onOpen(s.path)}>
 					<span
-						className="w-full truncate"
-						style={{ fontSize: 13, color: selected ? "var(--dsw-accent)" : "var(--dsw-label-primary)" }}
+						className="isx-menu-shift w-full truncate"
+						style={{ fontSize: 13, fontWeight: selected ? 500 : 400 }}
 					>
 						{s.name || s.firstMessage || "(untitled)"}
 					</span>
 					{s.streaming && s.lastStep && (
-						<span className="w-full truncate" style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--dsw-label-caption)", lineHeight: "16px" }} title={s.lastStep}>
+						<span className="isx-menu-sub w-full truncate" style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--dsw-label-caption)", lineHeight: "16px" }} title={s.lastStep}>
 							{s.lastStep}
 						</span>
 					)}
 				</button>
 				<span
-					className={`flex-none pl-1 ${sessionMenu === s.path ? "hidden" : "group-hover:hidden group-focus-within:hidden"}`}
+					className={`isx-menu-sub flex-none pl-1 ${sessionMenu === s.path ? "hidden" : "group-hover:hidden group-focus-within:hidden"}`}
 					style={{ fontSize: 10.5, color: "var(--dsw-label-caption)" }}
 				>
 					{relTime(s.modified, lang)}
@@ -450,6 +450,7 @@ export function SessionSidebar({
 						style={{ width: 22, height: 22 }}
 						title="..."
 						aria-label="session-actions"
+						data-menu-trigger="session"
 						onClick={(e) => {
 							e.stopPropagation();
 							setSessionMenu(sessionMenu === s.path ? null : s.path);
@@ -495,6 +496,7 @@ export function SessionSidebar({
 						<MenuItem
 							icon={<IconArchiveOutline20 size={14} />}
 							label={reallyArchived ? t.unarchiveSession : t.archiveSession}
+							title={reallyArchived ? undefined : t.archiveRetentionHint}
 							onClick={(e) => {
 								e.stopPropagation();
 								setSessionMenu(null);
@@ -511,7 +513,7 @@ export function SessionSidebar({
 	const workspaceRow = (g: WorkspaceGroup) => {
 		const isUngrouped = g.cwd === "__ungrouped__";
 		const open = openSet.has(g.cwd);
-		const isCurrent = !isUngrouped && g.cwd === currentCwd;
+		const isCurrent = !isUngrouped && !!currentCwd && normPath(g.cwd) === normPath(currentCwd);
 		// 草稿新会话属于哪个分组：路径匹配的工作区，否则归未分组
 		const draftInThisGroup = draftCwd
 			? (isUngrouped
@@ -525,42 +527,37 @@ export function SessionSidebar({
 		return (
 			<div key={g.cwd}>
 				<div
-					className="group relative flex items-center rounded-xl transition-colors"
+					className="isx-menu-item group relative flex items-center rounded-xl"
 					style={{
 						background: open || isCurrent ? "var(--dsw-hover)" : "transparent",
 						paddingLeft: 10,
-						paddingRight: 6,
+						paddingRight: 12,
 						paddingTop: 7,
 						paddingBottom: 7,
 						// 悬停/展开框之间留缝，不互相粘连（与会话行一致）
 						marginTop: 2,
 						marginBottom: 2,
 					}}
-					onMouseEnter={(e) => {
-						if (!(open || isCurrent)) e.currentTarget.style.background = "var(--dsw-hover)";
-					}}
-					onMouseLeave={(e) => {
-						if (!(open || isCurrent)) e.currentTarget.style.background = "transparent";
-					}}
 				>
 					<button className="flex min-w-0 flex-1 items-center gap-2 text-left" onClick={() => toggleOpen(g.cwd)} title={displayName}>
 						<span
+							className="isx-menu-sub"
 							style={{
 								color: "var(--dsw-label-tertiary)",
 								display: "inline-flex",
 								transform: open ? "rotate(90deg)" : "none",
-								transition: "transform 120ms var(--ds-ease-in-out)",
+								transition: "transform 180ms var(--isx-ease)",
 								flex: "none",
 							}}
 						>
 							<IconTriangleRightFill14 size={11} />
 						</span>
-						<span style={{ color: isCurrent ? "var(--dsw-accent)" : "var(--dsw-label-tertiary)", display: "inline-flex", flex: "none" }}>
+						<span className="isx-menu-icon" style={{ color: isCurrent ? "var(--dsw-accent)" : "var(--dsw-label-tertiary)", display: "inline-flex", flex: "none" }}>
 							{open ? <IconFolderOpenOutline16 size={15} /> : <IconFolderClose16 size={15} />}
 						</span>
 						<span
-							className="truncate"
-							style={{ fontSize: 13, color: isCurrent ? "var(--dsw-accent)" : "var(--dsw-label-primary)" }}
+							className="isx-menu-shift truncate"
+							style={{ fontSize: 13, fontWeight: isCurrent ? 500 : 400 }}
 						>
 							{displayName}
 						</span>
@@ -572,6 +569,7 @@ export function SessionSidebar({
 								style={{ width: 22, height: 22 }}
 								title="..."
 								aria-label="workspace-actions"
+								data-menu-trigger="workspace"
 								onClick={() => {
 									setRowMenu(rowMenu === g.cwd ? null : g.cwd);
 									setSessionMenu(null);
@@ -661,7 +659,7 @@ export function SessionSidebar({
 				</button>
 			</div>
 
-			{/* 新会话（dsh .newSession） */}
+			{/* 新会话（Iconsax .button-gradient 光晕胶囊） */}
 			<div className="px-3 pt-1">
 				<button className="btn-new-session w-full" onClick={onNew}>
 					<IconNewChatOutline16 size={14} />
@@ -669,11 +667,11 @@ export function SessionSidebar({
 				</button>
 			</div>
 
-			{/* 工作区标题行 / 搜索框（互替，照 dsh） */}
+			{/* 工作区标题行 / 搜索框（互替，照 Iconsax .con-search） */}
 			{searchOpen ? (
 				<div className="px-3 pb-1 pt-3">
-					<div className="flex items-center gap-2 rounded-xl px-2.5 py-2" style={{ background: "var(--dsw-hover)" }}>
-						<IconSearchOutline16 size={14} style={{ color: "var(--dsw-label-caption)" }} />
+					<div className="isx-search flex items-center gap-2 px-3 py-2">
+						<IconSearchOutline16 size={14} className="isx-search-icon" style={{ color: "var(--dsw-label-caption)", flex: "none" }} />
 						<input
 							autoFocus
 							value={q}
@@ -717,7 +715,7 @@ export function SessionSidebar({
 								</div>
 								<MenuCheck label={t.byWorkspace} checked={groupBy === "workspace"} onClick={() => { setGroupBy("workspace"); setViewMenu(false); }} />
 								<MenuCheck label={t.flatList} checked={groupBy === "flat"} onClick={() => { setGroupBy("flat"); setViewMenu(false); }} />
-								<div className="my-1.5" style={{ borderTop: "0.5px solid var(--dsw-border-l2)" }} />
+								<div className="my-1.5" style={{ borderTop: "1px solid var(--dsw-border-l2)" }} />
 								<div className="px-3 pb-1" style={{ fontSize: 11.5, color: "var(--dsw-label-caption)" }}>
 									{t.sortBy}
 								</div>
@@ -766,19 +764,17 @@ export function SessionSidebar({
 					[...workspaceGroups, ...(ungroupedGroup ? [ungroupedGroup] : [])].map((g) => (
 						<div
 							key={g.cwd}
-							className="flex items-center gap-2.5 rounded-xl px-2.5 py-2 transition-colors"
-							onMouseEnter={(e) => (e.currentTarget.style.background = "var(--dsw-hover)")}
-							onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
+							className="isx-menu-item flex cursor-pointer items-center gap-2.5 rounded-xl px-2.5 py-2"
 							onClick={() => {
 								setSearchOpen(false);
 								toggleOpen(g.cwd);
 							}}
 							title={g.cwd === "__ungrouped__" ? (t.ungrouped || "未分组") : g.cwd}
 						>
-							<span style={{ color: "var(--dsw-label-tertiary)", display: "inline-flex" }}>
+							<span className="isx-menu-icon" style={{ color: "var(--dsw-label-tertiary)", display: "inline-flex" }}>
 								<IconFolderClose16 size={15} />
 							</span>
-							<span className="truncate" style={{ fontSize: 13 }}>
+							<span className="isx-menu-shift truncate" style={{ fontSize: 13 }}>
 								{g.cwd === "__ungrouped__"
 									? (t.ungrouped || "未分组")
 									: (getWorkspaceName ? getWorkspaceName(g.cwd) : basename(g.cwd))}
@@ -839,26 +835,33 @@ export function SessionSidebar({
 					<div className="mt-2 border-t pt-2" style={{ borderColor: "var(--dsw-border-l2)" }}>
 						<button
 							type="button"
-							className="flex w-full items-center gap-2 rounded-xl px-2.5 py-2 text-left transition-colors"
+							className="isx-menu-item flex w-full items-center gap-2 rounded-xl px-2.5 py-2 text-left"
 							aria-expanded={archiveOpen}
+							title={t.archiveRetentionDetail}
 							onClick={() => setArchiveOpen((open) => !open)}
-							onMouseEnter={(event) => (event.currentTarget.style.background = "var(--dsw-hover)")}
-							onMouseLeave={(event) => (event.currentTarget.style.background = "transparent")}
 						>
 							<span
+								className="isx-menu-sub"
 								style={{
 									display: "inline-flex",
 									transform: archiveOpen ? "rotate(90deg)" : "none",
-									transition: "transform 120ms var(--ds-ease-in-out)",
+									transition: "transform 180ms var(--isx-ease)",
 									color: "var(--dsw-label-tertiary)",
 								}}
 							>
 								<IconTriangleRightFill14 size={11} />
 							</span>
-							<IconArchiveOutline20 size={15} style={{ color: "var(--dsw-label-tertiary)" }} />
-							<span className="min-w-0 flex-1 truncate" style={{ fontSize: 13 }}>{t.archivedSessions}</span>
-							<span style={{ fontSize: 11, color: "var(--dsw-label-caption)" }}>{archivedSessions.length}</span>
+							<span className="isx-menu-icon" style={{ display: "inline-flex", color: "var(--dsw-label-tertiary)" }}>
+								<IconArchiveOutline20 size={15} />
+							</span>
+							<span className="isx-menu-shift min-w-0 flex-1 truncate" style={{ fontSize: 13 }}>{t.archivedSessions}</span>
+							<span className="isx-menu-sub pr-2" style={{ fontSize: 11, color: "var(--dsw-label-caption)" }}>{archivedSessions.length}</span>
 						</button>
+						{archiveOpen && (
+							<div className="px-2.5 pb-1" style={{ fontSize: 11, color: "var(--dsw-label-caption)" }} title={t.archiveRetentionDetail}>
+								{t.archiveRetentionHint}
+							</div>
+						)}
 						{archiveOpen && archivedSessions.map((session) => sessionRow(session, true, true))}
 					</div>
 				)}
@@ -867,14 +870,14 @@ export function SessionSidebar({
 			{/* 设置固定左下角 */}
 			<div className="px-3 py-2.5">
 				<button
-					className="flex w-full items-center gap-2.5 rounded-xl px-4 py-2 text-left transition-colors"
+					className="isx-menu-item flex w-full items-center gap-2.5 rounded-xl px-4 py-2 text-left"
 					style={{ color: "var(--dsw-label-secondary)" }}
-					onMouseEnter={(e) => (e.currentTarget.style.background = "var(--dsw-hover)")}
-					onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
 					onClick={onOpenSettings}
 				>
-					<IconSettingsOutline16 size={16} />
-					<span style={{ fontSize: "var(--dsh-content-font-size)" }}>{t.settings}</span>
+					<span className="isx-menu-icon" style={{ display: "inline-flex" }}>
+						<IconSettingsOutline16 size={16} />
+					</span>
+					<span className="isx-menu-shift" style={{ fontSize: "var(--dsh-content-font-size)" }}>{t.settings}</span>
 				</button>
 			</div>
 
@@ -1025,27 +1028,35 @@ export function SessionSidebar({
 	);
 }
 
+/**
+ * memo：流式期间 AppShell 每 16ms 重渲染一次（state.messages 换引用），侧栏的 props
+ * （会话列表、回调）在此期间全部不变，几百行会话树的 reconciliation 是纯浪费。
+ */
+export const SessionSidebar = memo(SessionSidebarImpl);
+
 function MenuItem({
 	icon,
 	label,
+	title,
 	danger,
 	onClick,
 }: {
 	icon: React.ReactNode;
 	label: string;
+	title?: string;
 	danger?: boolean;
 	onClick: (e: React.MouseEvent) => void;
 }) {
 	return (
 		<button
-			className="mx-1 flex w-[calc(100%-8px)] items-center gap-2.5 rounded-lg px-3 py-2 text-left transition-colors"
+			title={title}
+			data-danger={danger ? "true" : undefined}
+			className="isx-menu-item mx-1 flex w-[calc(100%-8px)] items-center gap-2.5 rounded-lg px-3 py-2 text-left"
 			style={{ fontSize: 13, color: danger ? "var(--dsw-danger)" : "var(--dsw-label-primary)" }}
-			onMouseEnter={(e) => (e.currentTarget.style.background = "var(--dsw-hover)")}
-			onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
 			onClick={onClick}
 		>
-			{icon}
-			{label}
+			<span className="isx-menu-icon" style={{ display: "inline-flex" }}>{icon}</span>
+			<span className="isx-menu-shift">{label}</span>
 		</button>
 	);
 }
@@ -1053,13 +1064,12 @@ function MenuItem({
 function MenuCheck({ label, checked, onClick }: { label: string; checked: boolean; onClick: () => void }) {
 	return (
 		<button
-			className="mx-1 flex w-[calc(100%-8px)] items-center justify-between rounded-lg pl-5 pr-3 py-2 text-left transition-colors"
+			data-active={checked ? "true" : undefined}
+			className="isx-menu-item mx-1 flex w-[calc(100%-8px)] items-center justify-between rounded-lg pl-4 pr-4 py-2 text-left"
 			style={{ fontSize: 13, color: "var(--dsw-label-primary)" }}
-			onMouseEnter={(e) => (e.currentTarget.style.background = "var(--dsw-hover)")}
-			onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
 			onClick={onClick}
 		>
-			{label}
+			<span className="isx-menu-shift">{label}</span>
 			{checked && <IconCheckOutline14 size={13} />}
 		</button>
 	);