@orbit-work/ui 0.1.0

package/src/components/domain/desktop/DesktopSidebarView/index.tsx

@@ -0,0 +1,1072 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { createPortal } from "react-dom" // ui-imports-guard-disable-line
+import { useImeAwareEnter } from "../../../../hooks/useImeAwareEnter"
+import type { Theme } from "../../../../lib/appearance"
+import { SidebarShell, type SidebarShellPlatform } from "../../../Layout/SidebarShell"
+import { CreateProjectDialog } from "../../../composite/CreateProjectDialog"
+import { Dialog } from "../../../composite/Dialog"
+import {
+  Archive,
+  Branch,
+  ChevDown,
+  ChevRight,
+  Clock,
+  Edit,
+  Folder,
+  Grid,
+  Icon,
+  More,
+  Package,
+  PanelSidebar,
+  Plus,
+  Refresh,
+  Share,
+  ThreadDot,
+  Trash,
+} from "../../../composite/Icons"
+import { TextField } from "../../../composite/NativeControls"
+import { OrbitworkLockup } from "../../../composite/OrbitworkLogo"
+import { ProjectSelect } from "../../../composite/ProjectSelect"
+import { Avatar, Button } from "../../../primitives"
+import { MenuSurface } from "../../../primitives/Menu"
+import type { MenuItem } from "../../../primitives/Menu"
+import { DesktopAccountMenuView, updateRowText } from "../DesktopAccountMenuView"
+
+export type DesktopSidebarNavId = "new" | "skills" | "sites" | "cron" | "files" | "library"
+export type DesktopSidebarSourceIcon = "WeCom" | "DingTalk" | "Feishu"
+
+export interface DesktopSidebarThread {
+  id: string
+  projectId: string
+  title: string
+  active: boolean
+  running: boolean
+  /** 运行进度读数（如 "3/7"），mono＋tabular-nums 渲染在行尾实心点之后。
+   *  SidebarCurrent 规格·状态极改形：与位置极（图标内信标点）不得同形，永不荧黄。 */
+  runningCount?: string
+  unread: boolean
+  sourceIcon?: DesktopSidebarSourceIcon
+  sourceLabel?: string
+  branched?: boolean
+  archived?: boolean
+  canArchive?: boolean
+}
+
+export interface DesktopSidebarProject {
+  id: string
+  label: string
+  open: boolean
+  isDefault: boolean
+  loadingMore: boolean
+  canLoadMore: boolean
+  loadError?: string | null
+  threads: DesktopSidebarThread[]
+}
+
+export interface DesktopSidebarUser {
+  name: string
+  avatarUrl: string
+  /** 账户菜单头部第二行（邮箱优先，没有就出 id）。 */
+  email?: string
+  /**
+   * 身份键：既是头像无图时的配色取模依据（`primitives/Avatar` 的 data-1..6 轮转），
+   * 也是账户菜单「复制 ID」复制出去的值。不传＝菜单头不出复制钮。
+   */
+  id?: string
+}
+
+export type DesktopSidebarUpdateState = "available" | "downloading" | "ready" | "error"
+
+export interface DesktopSidebarUpdate {
+  state: DesktopSidebarUpdateState
+  version: string
+  percent?: number
+}
+
+export interface DesktopSidebarViewProps {
+  collapsed: boolean
+  width: number
+  /**
+   * 平台（受控，权威值来自主进程；库侧不嗅探 userAgent）。R2 起它决定折叠钮住在哪：
+   * `windows` 的钮在通栏带里（本栏无顶行、折叠宽 0），其余平台钮住在**侧栏顶行**
+   * （mac 顶行带 68 红绿灯让位块，钮落 x=80；linux/web 落 x=8），折叠成 rail（mac 116 / 其余 44）。
+   * 宿主两处传同一个值：`App.tsx` 的 `DesktopWorkbenchShell.platform` 与本件。缺省不传＝不出顶行。
+   */
+  platform?: SidebarShellPlatform
+  /** mac 全屏：红绿灯消失 → 顶行让位块收 0、钮回到 x=8、折叠 rail 收到 44。 */
+  fullscreen?: boolean
+  /**
+   * 折叠后宽度（透传 SidebarShell）：缺省按 `platform` 派生 rail（mac 116 / 其余 44）；
+   * **显式传 0＝整条卸载**——折叠后不留 rail，顶行折成浮块坐在窗口左上角原坐标供重新展开。
+   * 桌面宿主「折叠＝全部折叠」走 0 这一档。
+   */
+  collapsedWidth?: number
+  /**
+   * 当前导航项（位置极）。R2 · L1-1-1：原来是 `Exclude<…, "new">`，
+   * 从签名上就禁掉了「新任务」这一档，于是主屏整屏零位置极——而原型
+   * （模板 L5008–5013，NAV 首项就是「新任务」）在主屏是把这一行点亮的。
+   * 宿主 `features/sidebar/Sidebar.tsx` 补 `view === 'home' → 'new'` 即可，见交接单。
+   */
+  activeNav?: DesktopSidebarNavId
+  /**
+   * 是否在导航里出「我的空间」（A11-B1 · 裁决 16）。
+   *
+   * 缺省 **false**：我的空间正在退役——项目文件搬去右栏文件浏览器、记忆搬去设置·记忆段，
+   * 导航因此长成「新任务 / 插件 / 工作台 / 定时任务」四项（原型模板 689–701）。
+   * 代码与 `DesktopSidebarNavId` 的 `"files"` 一律保留：宿主路由（apps/desktop
+   * `features/sidebar/Sidebar.tsx:291` 的 `view === 'workspace' → 'files'`）还在，
+   * 打开本开关即可原样退回五项。宿主路由退役后本 prop 与 `"files"` 分支一起删。
+   */
+  showWorkspaceNav?: boolean
+  newTaskTitle: string
+  projects: DesktopSidebarProject[]
+  user: DesktopSidebarUser
+  onCollapsedChange: (collapsed: boolean) => void
+  onWidthChange: (width: number) => void
+  onNavigate: (target: Exclude<DesktopSidebarNavId, "new">) => void
+  onOpenSettings: () => void
+  petVisible?: boolean
+  onPetVisibleChange?: (visible: boolean) => void
+  onNewTask: (projectId?: string) => void
+  onToggleProject: (projectId: string) => void
+  onLoadMore: (projectId: string) => void
+  showArchived: boolean
+  onRefreshProjects: () => void
+  onShowArchivedChange: (showArchived: boolean) => void
+  onSelectThread: (threadId: string) => void
+  onCreateProject: (name: string) => Promise<void>
+  onCreateProjectForSelection?: (name: string) => Promise<string>
+  onRenameProject: (projectId: string, name: string) => Promise<void>
+  onDeleteProject: (projectId: string) => Promise<void>
+  onOpenProjectDirectory: (projectId: string) => void
+  onRenameThread: (threadId: string, title: string) => Promise<void>
+  onMoveThread: (threadId: string, projectId: string) => Promise<void>
+  onDeleteThread: (threadId: string) => Promise<void>
+  onArchiveThread: (threadId: string) => Promise<void>
+  // Share the whole thread as a one-click, share-everything shortcut (no picker).
+  onShareThread: (threadId: string) => void
+  onFeedback: () => void
+  onLogout: () => void
+  update?: DesktopSidebarUpdate
+  onUpdateClick?: () => void
+  onInstallUpdate?: () => Promise<void> | void
+
+  /* ── R2 · 账户菜单「常用能力直出」的数据口（全部可选，缺省即该块不出） ───────
+     数据来源见交接单第九节：套餐/积分走计费接口、版本号走 app.getVersion()、
+     主题走宿主 theme store（与设置·常规段同一个值）。 */
+  /** 套餐名 ＋ 行末描边钮（升级 / 充值）。不传＝套餐井里不出这一行。 */
+  plan?: { name: string; action?: { label: string; onClick: () => void } }
+  /** 积分额度读数（used/limit）。不传＝不出读数与额度条；plan 与 credits 都没有则整个井不出。 */
+  credits?: { used: number; limit: number; label?: string }
+  /** 版本号，挂在菜单「检查更新」行尾（mono 读数）。 */
+  version?: string
+  /** 当前主题（与设置·常规段的三格同一个值）。 */
+  theme?: Theme
+  onThemeChange?: (theme: Theme) => void
+  /** 「记忆」行；不传时回落到 `onOpenSettings()`（宿主再跳记忆段）。 */
+  onOpenMemory?: () => void
+  /** 「复制 ID」：组件出 2 秒内联反馈，toast 归宿主。不传＋没有 user.id ＝不出复制钮。 */
+  onCopyUserId?: (id: string) => void
+  /** 「检查更新」行。 */
+  onCheckUpdate?: () => void
+}
+
+type Anchor = { id: string; left: number; top: number }
+type ProjectAnchor = Anchor & { label: string; isDefault: boolean }
+
+export function DesktopSidebarView(props: DesktopSidebarViewProps): React.ReactElement {
+  const { projects } = props
+  const { isImeEnter, onCompositionStart, onCompositionEnd } = useImeAwareEnter()
+  const [creatingProject, setCreatingProject] = useState(false)
+  const [userMenu, setUserMenu] = useState<{ left: number; top: number; byKeyboard: boolean } | null>(null)
+  /* R2 核对修（T4）：账户行按钮是菜单的触发器——Esc / 选中一行关面后焦点回到它
+     （WAI-ARIA menu button 口径）。原来关面后焦点掉到 body，键盘用户得从文档头重新 Tab 进来。
+     鼠标点遮罩 / 窗口失焦关面不回焦（没有键盘上下文可还）。 */
+  const userMenuTrigger = useRef<HTMLButtonElement>(null)
+  const closeUserMenu = (restoreFocus: boolean) => {
+    setUserMenu(null)
+    if (restoreFocus) userMenuTrigger.current?.focus()
+  }
+  const [threadMenu, setThreadMenu] = useState<Anchor | null>(null)
+  const [projectMenu, setProjectMenu] = useState<ProjectAnchor | null>(null)
+  const [projectsMenu, setProjectsMenu] = useState<{ left: number; top: number } | null>(null)
+  const [renamingThread, setRenamingThread] = useState<{ id: string; value: string } | null>(null)
+  const [renamingProject, setRenamingProject] = useState<{ id: string; value: string } | null>(null)
+  const [pendingThreadDelete, setPendingThreadDelete] = useState<DesktopSidebarThread | null>(null)
+  const [pendingProjectDelete, setPendingProjectDelete] = useState<DesktopSidebarProject | null>(null)
+  const [pendingMove, setPendingMove] = useState<DesktopSidebarThread | null>(null)
+  const [deletingProject, setDeletingProject] = useState(false)
+  const [draggingThreadId, setDraggingThreadId] = useState<string | null>(null)
+  const [dragOverProjectId, setDragOverProjectId] = useState<string | null>(null)
+  const [showInstallUpdate, setShowInstallUpdate] = useState(false)
+  const [installingUpdate, setInstallingUpdate] = useState(false)
+
+  useEffect(() => {
+    if (!threadMenu && !projectMenu && !projectsMenu) return
+    const close = () => {
+      setThreadMenu(null)
+      setProjectMenu(null)
+      setProjectsMenu(null)
+    }
+    const timer = window.setTimeout(() => window.addEventListener("click", close), 0)
+    return () => {
+      window.clearTimeout(timer)
+      window.removeEventListener("click", close)
+    }
+  }, [threadMenu, projectMenu, projectsMenu])
+
+  useEffect(() => {
+    if (!userMenu) return
+    const close = () => setUserMenu(null)
+    // 只有 Escape 关面：菜单已换 MenuSurface 基座，方向键/Home/End/首字母都是它的
+    // 键盘导航，原来「任意 keydown 就关」会把导航按键一并吃掉。
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") closeUserMenu(true)
+    }
+    window.addEventListener("click", close)
+    window.addEventListener("keydown", closeOnEscape)
+    window.addEventListener("blur", close)
+    return () => {
+      window.removeEventListener("click", close)
+      window.removeEventListener("keydown", closeOnEscape)
+      window.removeEventListener("blur", close)
+    }
+  }, [userMenu])
+
+  useEffect(() => {
+    if (props.update?.state !== "ready") setShowInstallUpdate(false)
+  }, [props.update?.state])
+
+  const threadById = (id: string) => projects.flatMap((project) => project.threads).find((thread) => thread.id === id)
+  const clearDrag = () => {
+    setDraggingThreadId(null)
+    setDragOverProjectId(null)
+  }
+  const commitThreadRename = async () => {
+    if (!renamingThread) return
+    const pending = renamingThread
+    const value = pending.value.trim()
+    setRenamingThread(null)
+    if (!value) return
+    try {
+      await props.onRenameThread(pending.id, value)
+    } catch {
+      setRenamingThread(pending)
+    }
+  }
+  const commitProjectRename = async () => {
+    if (!renamingProject) return
+    const pending = renamingProject
+    const value = pending.value.trim()
+    setRenamingProject(null)
+    if (!value) return
+    try {
+      await props.onRenameProject(pending.id, value)
+    } catch {
+      setRenamingProject(pending)
+    }
+  }
+
+  return (
+    <SidebarShell
+      collapsed={props.collapsed}
+      onCollapsedChange={props.onCollapsedChange}
+      width={props.width}
+      onWidthChange={props.onWidthChange}
+      minWidth={180}
+      maxWidth={400}
+      platform={props.platform}
+      fullscreen={props.fullscreen}
+      collapsedWidth={props.collapsedWidth}
+    >
+      {/* R2：折叠态本栏整块不渲染（windows 收成 0 宽、其余平台收成只剩顶行的 rail），
+          原来这里那枚 `collapsed ? <OrbitworkMark 28/>` 的折叠分支已成死码——rail 宽
+          （mac 116 = 8+68+4+28+8 / 其余 44 = 8+28+8）被让位块与折叠钮占满，塞不下 mark，
+          故整条删除，栏内只留展开态的 lockup。 */}
+      <div className="owbrand">
+        <OrbitworkLockup theme="auto" size={20} />
+      </div>
+      <nav className="ownav">
+        {/* R2 · L1-2-1：四枚导航字形逐点照原型（模板 687/692/696/700）——原来是
+            NewTask（方框带笔）/ Compass（指南针）/ Globe（地球），与原型对不上，
+            且那三枚不带 `.dot` 零件，所以「当前项点亮信标点」这条规则在三屏上空转。
+            换成信标化字形后点随字形自带：ThreadDot=tasks · PanelSidebar=workspace ·
+            Clock=schedule 三枚有点，Package（插件）按原型 NAV 表 dot:false 无点。 */}
+        <NavItem
+          id="new"
+          label="新任务"
+          title={props.newTaskTitle}
+          active={props.activeNav === "new"}
+          icon={<ThreadDot />}
+          onClick={() => props.onNewTask()}
+        />
+        {/* A3-B5 命名统一（原型 693/697）：「发现」→「插件」、「站点」→「工作台」。
+            路由 id（skills / sites）不动，只换面上的字；埋点键 R2 · L3-3-6 起改名
+            （discover→plugins、workspace→workbench），见 NavItem 里的锚点注。 */}
+        <NavItem
+          id="skills"
+          label="插件"
+          title="插件"
+          active={props.activeNav === "skills"}
+          icon={<Package />}
+          onClick={() => props.onNavigate("skills")}
+        />
+        <NavItem
+          id="sites"
+          label="工作台"
+          title="工作台"
+          active={props.activeNav === "sites"}
+          icon={<PanelSidebar />}
+          onClick={() => props.onNavigate("sites")}
+        />
+        <NavItem
+          id="cron"
+          label="定时任务"
+          title="定时任务"
+          active={props.activeNav === "cron"}
+          icon={<Clock />}
+          onClick={() => props.onNavigate("cron")}
+        />
+        {/* A11-B1：默认不出（showWorkspaceNav 缺省 false），导航长成四项。
+            R2 · L1-2-1：workspace 那枚信标字形（PanelSidebar）已归给「工作台」——
+            原型里带信标点的 rect 就是工作台那一位；退役中的「我的空间」改用中性 Grid，
+            免得开关打开时同一列出现两枚一模一样的图标。
+            R2 · L3-3-6：`workspace` 这个引导锚点也随之移交工作台（改名 `workbench`），
+            本项不再挂锚点。删除条件见 showWorkspaceNav 的文档注释。 */}
+        {props.showWorkspaceNav && (
+          <NavItem
+            id="files"
+            label="我的空间"
+            title="我的空间"
+            active={props.activeNav === "files"}
+            icon={<Grid />}
+            onClick={() => props.onNavigate("files")}
+          />
+        )}
+      </nav>
+
+      <div className="owrecent-head" data-tour-anchor="projects">
+        <div className="t">项目</div>
+        <div className="owrecent-actions">
+          <Button
+            variant="unstyled"
+            title="更多项目操作"
+            aria-label="更多项目操作"
+            onClick={(event) => {
+              event.stopPropagation()
+              const rect = event.currentTarget.getBoundingClientRect()
+              setProjectsMenu({ left: rect.right + 6, top: rect.top })
+            }}
+          >
+            <More />
+          </Button>
+          <Button variant="unstyled" title="新建项目" aria-label="新建项目" onClick={() => setCreatingProject(true)}>
+            <Plus />
+          </Button>
+        </div>
+      </div>
+      <div className="owprojects">
+        {projects.map((project) => (
+          <div key={project.id} className="owproject">
+            {renamingProject?.id === project.id ? (
+              <div className="owproject__head renaming">
+                <Folder className="project-icon" />
+                <TextField
+                  unstyled
+                  autoFocus
+                  value={renamingProject.value}
+                  onChange={(event) => setRenamingProject({ id: project.id, value: event.target.value })}
+                  onBlur={() => {
+                    void commitProjectRename()
+                  }}
+                  onCompositionStart={onCompositionStart}
+                  onCompositionEnd={onCompositionEnd}
+                  onKeyDown={(event) => {
+                    if (isImeEnter(event)) return
+                    if (event.key === "Enter") void commitProjectRename()
+                    if (event.key === "Escape") setRenamingProject(null)
+                  }}
+                />
+              </div>
+            ) : (
+              /* DS2 P6-2 口径（同底部账户区 .owuser）：行壳只管布局与拖放，行内两枚按钮各拿一个焦点位。
+                 原来整行是 <Button>，「更多」是它里面的 <span onClick>——键盘够不到，且可点元素套可点元素。 */
+              <div
+                className={`owproject__head${project.open ? "" : " collapsed"}${dragOverProjectId === project.id ? " drop-target" : ""}`}
+                onDragOver={(event) => {
+                  if (!draggingThreadId) return
+                  event.preventDefault()
+                  event.dataTransfer.dropEffect = "move"
+                  setDragOverProjectId(project.id)
+                }}
+                onDragLeave={(event) => {
+                  const related = event.relatedTarget
+                  if (related instanceof Node && event.currentTarget.contains(related)) return
+                  setDragOverProjectId((current) => (current === project.id ? null : current))
+                }}
+                onDrop={(event) => {
+                  event.preventDefault()
+                  const threadId = event.dataTransfer.getData("application/x-owthread-id") || draggingThreadId
+                  clearDrag()
+                  if (threadId) void props.onMoveThread(threadId, project.id).catch(() => undefined)
+                }}
+              >
+                <Button
+                  variant="unstyled"
+                  className="owproject__head-main"
+                  title={project.label}
+                  aria-expanded={project.open}
+                  onClick={() => props.onToggleProject(project.id)}
+                >
+                  {/* R2 · L1-1-2：披露箭头在**行首**（原型模板 L714–720 是
+                      「chev 14 → folder 16 → 名」，行尾什么都没有）。原来它挂在行尾，
+                      读起来像行末的一枚操作钮，而不是「这一行能展开」。
+                      展开 ChevDown / 折叠 ChevRight——原来靠一枚 ChevDown 转 -90°，
+                      现在两枚字形各画各的，与原型逐点一致。 */}
+                  {project.open ? <ChevDown className="caret" /> : <ChevRight className="caret" />}
+                  <Folder className="project-icon" />
+                  <span className="lbl">{project.label}</span>
+                </Button>
+                <Button
+                  variant="unstyled"
+                  className="more"
+                  title="项目操作"
+                  aria-label={`${project.label} 的项目操作`}
+                  aria-haspopup="menu"
+                  onClick={(event) => {
+                    event.stopPropagation()
+                    const rect = event.currentTarget.getBoundingClientRect()
+                    setThreadMenu(null)
+                    setProjectMenu({
+                      id: project.id,
+                      label: project.label,
+                      isDefault: project.isDefault,
+                      left: rect.right + 6,
+                      top: rect.top,
+                    })
+                  }}
+                >
+                  <More />
+                </Button>
+              </div>
+            )}
+            {project.open && (
+              <div className="owthreads">
+                {project.threads.map((thread) =>
+                  renamingThread?.id === thread.id ? (
+                    <div key={thread.id} className="owthread renaming">
+                      <TextField
+                        unstyled
+                        autoFocus
+                        value={renamingThread.value}
+                        onChange={(event) => setRenamingThread({ id: thread.id, value: event.target.value })}
+                        onBlur={() => {
+                          void commitThreadRename()
+                        }}
+                        onCompositionStart={onCompositionStart}
+                        onCompositionEnd={onCompositionEnd}
+                        onKeyDown={(event) => {
+                          if (isImeEnter(event)) return
+                          if (event.key === "Enter") void commitThreadRename()
+                          if (event.key === "Escape") setRenamingThread(null)
+                        }}
+                      />
+                    </div>
+                  ) : (
+                    /* DS2 P6-2 口径（同 .owuser / .owproject__head）：行壳只管布局与拖放，
+                       行主体与行尾「更多」各是一枚真按钮，键盘都够得到。 */
+                    <div
+                      key={thread.id}
+                      className={`owthread${thread.active ? " active" : ""}${draggingThreadId === thread.id ? " dragging" : ""}`}
+                      draggable={!thread.running}
+                      onDragStart={(event) => {
+                        if (thread.running) return
+                        setDraggingThreadId(thread.id)
+                        event.dataTransfer.effectAllowed = "move"
+                        event.dataTransfer.setData("application/x-owthread-id", thread.id)
+                      }}
+                      onDragEnd={clearDrag}
+                    >
+                      <Button
+                        variant="unstyled"
+                        className="owthread__main"
+                        title={thread.title}
+                        onClick={() => props.onSelectThread(thread.id)}
+                      >
+                        {/* R2 · L1-1-3：未读点在**行首**、运行点在行尾（原型模板 L727–733
+                          就是这两个位置）。原来两颗点都堆在行尾，只靠颜色区分含义——
+                          位置本身才是第一编码，颜色只是第二编码（R1）。 */}
+                        {thread.unread && <span className="dot" title="未读" aria-label="未读" role="img" />}
+                        <span className="lbl">{thread.title}</span>
+                        {/* §9 呼吸退役后运行点静止：形（实点的有无）＋文字（title/aria-label）
+                          承担 R1 双编码。 */}
+                        {thread.running && (
+                          <span className="run-dot" title="任务正在执行" aria-label="任务正在执行" role="img" />
+                        )}
+                        {thread.running && thread.runningCount && (
+                          <span className="run-cnt" title="任务进度">
+                            {thread.runningCount}
+                          </span>
+                        )}
+                      </Button>
+                      <span
+                        className={`thread-trailing${thread.sourceIcon || thread.branched || thread.archived ? " has-marks" : ""}`}
+                      >
+                        <span className="thread-status-marks">
+                          {thread.sourceIcon && (
+                            <span
+                              className="thread-source-mark"
+                              title={thread.sourceLabel ? `${thread.sourceLabel}会话` : "IM 会话"}
+                            >
+                              <Icon name={thread.sourceIcon} size={16} />
+                            </span>
+                          )}
+                          {thread.branched && (
+                            <span className="thread-branch-mark" title="分支会话">
+                              <Branch />
+                            </span>
+                          )}
+                          {thread.archived && (
+                            <span className="thread-archive-mark" title="已归档">
+                              <Archive />
+                            </span>
+                          )}
+                        </span>
+                        <Button
+                          variant="unstyled"
+                          className="more"
+                          title="更多"
+                          aria-label={`${thread.title} 的更多操作`}
+                          aria-haspopup="menu"
+                          onClick={(event) => {
+                            event.stopPropagation()
+                            const rect = event.currentTarget.getBoundingClientRect()
+                            setProjectMenu(null)
+                            setThreadMenu({ id: thread.id, left: rect.right + 6, top: rect.top })
+                          }}
+                        >
+                          <More />
+                        </Button>
+                      </span>
+                    </div>
+                  ),
+                )}
+                {project.threads.length === 0 && (
+                  <Button variant="unstyled" className="owthread-new" onClick={() => props.onNewTask(project.id)}>
+                    <Plus /> 新建任务
+                  </Button>
+                )}
+                {project.canLoadMore && (
+                  <Button
+                    variant="unstyled"
+                    className={`owthread-more${project.loadError ? " error" : ""}`}
+                    disabled={project.loadingMore}
+                    onClick={() => props.onLoadMore(project.id)}
+                  >
+                    {/* R2 · L2-1-1：「展开显示」原来是一行没有图标、没有 chevron、
+                        与会话行同缩进同字号的 --ow-text-3 灰字（浅档 2.29:1），读起来像
+                        一条被禁用的会话。补一枚 14 的 ChevDown 前置图标（与同族
+                        .owthread-new 的 Plus 同语法），让它读成动作；字色并轨见 CSS。 */}
+                    <ChevDown className="lead" aria-hidden="true" />
+                    {project.loadingMore ? "加载中…" : project.loadError ? "加载失败，点击重试" : "展开显示"}
+                  </Button>
+                )}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {projectsMenu && (
+        <FloatingMenu anchor={projectsMenu}>
+          <MenuSurface
+            width={168}
+            autoAdjust
+            items={[
+              { key: "refresh", label: "刷新", icon: <Refresh /> },
+              { key: "archived", label: props.showArchived ? "隐藏已归档" : "显示已归档", icon: <Archive /> },
+            ]}
+            onSelect={(key) => {
+              setProjectsMenu(null)
+              if (key === "refresh") props.onRefreshProjects()
+              if (key === "archived") props.onShowArchivedChange(!props.showArchived)
+            }}
+          />
+        </FloatingMenu>
+      )}
+      {threadMenu && (
+        <FloatingMenu anchor={threadMenu}>
+          <MenuSurface
+            width={160}
+            autoAdjust
+            items={[
+              {
+                key: "rename",
+                label: "重命名",
+                icon: <Edit />,
+                disabled: Boolean(threadById(threadMenu.id)?.archived),
+              },
+              { key: "share", label: "分享", icon: <Share /> },
+              {
+                key: "move",
+                label: "移动",
+                icon: <Folder />,
+                disabled: Boolean(threadById(threadMenu.id)?.running || threadById(threadMenu.id)?.archived),
+              },
+              ...(!threadById(threadMenu.id)?.archived
+                ? ([
+                  {
+                    key: "archive",
+                    label: "归档",
+                    icon: <Archive />,
+                    disabled: threadById(threadMenu.id)?.canArchive === false,
+                  },
+                ] as MenuItem[])
+                : []),
+              { key: "delete", label: "删除", icon: <Trash />, danger: true },
+            ]}
+            onSelect={(key) => {
+              const thread = threadById(threadMenu.id)
+              setThreadMenu(null)
+              if (!thread) return
+              if (key === "rename") setRenamingThread({ id: thread.id, value: thread.title })
+              if (key === "share") props.onShareThread(thread.id)
+              if (key === "move") setPendingMove(thread)
+              if (key === "archive") void props.onArchiveThread(thread.id).catch(() => undefined)
+              if (key === "delete") setPendingThreadDelete(thread)
+            }}
+          />
+        </FloatingMenu>
+      )}
+      {projectMenu && (
+        <FloatingMenu anchor={projectMenu}>
+          <MenuSurface
+            width={160}
+            autoAdjust
+            items={projectMenuItems(projectMenu.isDefault)}
+            onSelect={(key) => {
+              const project = projects.find((item) => item.id === projectMenu.id)
+              setProjectMenu(null)
+              if (!project) return
+              if (key === "new-task") props.onNewTask(project.id)
+              if (key === "open-dir") props.onOpenProjectDirectory(project.id)
+              if (key === "rename") setRenamingProject({ id: project.id, value: project.label })
+              if (key === "delete") setPendingProjectDelete(project)
+            }}
+          />
+        </FloatingMenu>
+      )}
+
+      {/* DS2 P6-2：底部账户区归 ListRow 语法。原来整行是 <div onClick>，键盘完全够不到，
+          且更新胶囊是它内部的 <button>（button 套 button）。按 ListRow 的焦点口径拆开：
+          行壳只管布局（.owuser 这个类名同时是 electron-shell.css 的拖拽豁免契约，保留），
+          左侧「头像＋名字」升为按钮拿一个焦点位，右侧更新胶囊自己是第二个焦点位。 */}
+      <div className="owuser">
+        <Button
+          ref={userMenuTrigger}
+          variant="unstyled"
+          className="owuser__main"
+          aria-haspopup="menu"
+          aria-expanded={Boolean(userMenu)}
+          title={props.user.name}
+          onClick={(event) => {
+            event.stopPropagation()
+            if (userMenu) return setUserMenu(null)
+            const rect = event.currentTarget.getBoundingClientRect()
+            // Enter/Space 触发的 click detail=0 → 键盘打开，焦点进首行；指针打开只落面本体（R3）
+            setUserMenu({ left: rect.left, top: rect.top, byKeyboard: event.detail === 0 })
+          }}
+        >
+          {/* R2 · L1-1-4 / L2-1-5：无图时原来是一枚与侧栏底几乎同色的空灰圆
+              （#EFEEE9 on #F7F6F1）；原型 L743 是带首字的 --ow-data-1 实心圆。
+              改走 `primitives/Avatar`——它自带 id→data-1..6 的稳定取模与首字回落，
+              和账户菜单头部那枚 32 头像同一套实现。行结构（26 头像＋名＋chevron）不动，
+              类名 `av` 保留（CSS 与 electron-shell 的拖拽豁免都按它认）。 */}
+          <Avatar className="av" size={26} id={props.user.id ?? props.user.name}>
+            {props.user.avatarUrl ? (
+              <img
+                src={props.user.avatarUrl}
+                alt=""
+                className="w-full h-full object-cover"
+                onError={(event) => event.currentTarget.remove()}
+              />
+            ) : (
+              props.user.name.slice(-1)
+            )}
+          </Avatar>
+          <span className="name">{props.user.name}</span>
+          {!props.update && <ChevRight className="chev" />}
+        </Button>
+        {props.update && (
+          <SidebarUpdateButton
+            update={props.update}
+            onClick={() => {
+              if (props.update?.state === "ready") setShowInstallUpdate(true)
+              else if (props.update?.state !== "downloading") props.onUpdateClick?.()
+            }}
+          />
+        )}
+      </div>
+
+      {userMenu &&
+        createPortal(
+          <>
+            <div
+              className="owusermenu-backdrop"
+              onClick={(event) => {
+                event.stopPropagation()
+                setUserMenu(null)
+              }}
+            />
+            {/* DS2 P6-2：账户菜单收敛到 primitives/Menu 的 MenuSurface（与本文件另外三处菜单同基座）。
+                手写的 .mi 行原来 :hover 走全局 --ow-surface 档——弹层上该走 -pop 档，正是 §14
+                已知坑「暗主题弹层用全局 hover 档」；MenuSurface 自带 hover-pop/press-pop、
+                focus-visible、danger 的 error-tint 与键盘导航。.owusermenu 只剩定位＋no-drag 壳。
+                R2（Terry 意见 4）：面体整块搬进 `DesktopAccountMenuView`（280 宽，头部＋套餐井
+                ＋七行常用能力），本文件只留「在哪儿弹、几时关」。宽度 179→280：Home 画框实测
+                left=38，38+280=318，离 240 侧栏右沿外仍在视口内，不会越出。 */}
+            <div
+              className="owusermenu"
+              style={{ position: "fixed", left: userMenu.left, bottom: window.innerHeight - userMenu.top + 8 }}
+              onClick={(event) => event.stopPropagation()}
+            >
+              <DesktopAccountMenuView
+                user={props.user}
+                plan={props.plan}
+                credits={props.credits}
+                version={props.version}
+                update={props.update}
+                theme={props.theme}
+                onThemeChange={props.onThemeChange}
+                petVisible={props.petVisible}
+                onPetVisibleChange={props.onPetVisibleChange}
+                onOpenSettings={props.onOpenSettings}
+                onOpenMemory={props.onOpenMemory}
+                onCopyUserId={props.onCopyUserId}
+                /* R2 核对修（T4）：菜单「检查更新」行与账户行的更新胶囊说的是同一件事，
+                   点下去也得走同一条路——原来一律 `onCheckUpdate ?? onUpdateClick`，
+                   「重启安装」态点了却去 downloadUpdate（宿主 Sidebar.tsx:324 的 onUpdateClick），
+                   与行尾文字说的事对不上。按胶囊的分支：ready → 安装确认弹窗（再走 onInstallUpdate）；
+                   downloading → 行已 disabled，这里只兜底；available / error → onUpdateClick（下载 / 重试）；
+                   没有已知更新 → onCheckUpdate（宿主的「检查更新」），未接线时回落 onUpdateClick。 */
+                onCheckUpdate={() => {
+                  const state = props.update?.state
+                  if (state === "ready") return setShowInstallUpdate(true)
+                  if (state === "downloading") return
+                  if (props.update) return props.onUpdateClick?.()
+                    ; (props.onCheckUpdate ?? props.onUpdateClick)?.()
+                }}
+                onFeedback={props.onFeedback}
+                onLogout={props.onLogout}
+                autoFocus={userMenu.byKeyboard ? true : "surface"}
+                onClose={() => closeUserMenu(true)}
+              />
+            </div>
+          </>,
+          document.body,
+        )}
+      {pendingThreadDelete && (
+        <ConfirmDialog
+          title="删除任务"
+          description={`确定要删除「${pendingThreadDelete.title}」吗？该任务的对话将被移除，此操作无法撤销。`}
+          onCancel={() => setPendingThreadDelete(null)}
+          onConfirm={() => {
+            const id = pendingThreadDelete.id
+            void props
+              .onDeleteThread(id)
+              .then(() => setPendingThreadDelete(null))
+              .catch(() => undefined)
+          }}
+        />
+      )}
+      {pendingProjectDelete && (
+        <ConfirmDialog
+          title="删除项目"
+          description={`确定要删除项目「${pendingProjectDelete.label}」吗？项目下的任务将不再显示，但本地工作目录中的文件会保留。`}
+          pending={deletingProject}
+          pendingLabel="删除中…"
+          onCancel={() => setPendingProjectDelete(null)}
+          onConfirm={() => {
+            setDeletingProject(true)
+            void props
+              .onDeleteProject(pendingProjectDelete.id)
+              .then(() => setPendingProjectDelete(null))
+              .catch(() => undefined)
+              .finally(() => setDeletingProject(false))
+          }}
+        />
+      )}
+      {showInstallUpdate && props.update?.state === "ready" && (
+        <UpdateInstallDialog
+          version={props.update.version}
+          pending={installingUpdate}
+          onCancel={() => setShowInstallUpdate(false)}
+          onConfirm={() => {
+            setInstallingUpdate(true)
+            Promise.resolve()
+              .then(() => props.onInstallUpdate?.())
+              .catch(() => setInstallingUpdate(false))
+          }}
+        />
+      )}
+      {creatingProject &&
+        createPortal(
+          <CreateProjectDialog
+            onCancel={() => setCreatingProject(false)}
+            onSubmit={(name) => props.onCreateProject(name).then(() => setCreatingProject(false))}
+          />,
+          document.body,
+        )}
+      {/* MoveThreadDialog 内部已走 composite/Dialog（自带 portal），此处不再套一层 createPortal。 */}
+      {pendingMove && (
+        <MoveThreadDialog
+          thread={pendingMove}
+          projects={projects}
+          onCreateProject={props.onCreateProjectForSelection}
+          onCancel={() => setPendingMove(null)}
+          onSubmit={(projectId) => props.onMoveThread(pendingMove.id, projectId).then(() => setPendingMove(null))}
+        />
+      )}
+    </SidebarShell>
+  )
+}
+
+function SidebarUpdateButton({
+  update,
+  onClick,
+}: { update: DesktopSidebarUpdate; onClick: () => void }): React.ReactElement {
+  const percent = Math.round(Math.max(0, Math.min(100, update.percent ?? 0)))
+  /* 胶囊不是实心按钮：状态点 + 按态换字，状态说明走 title（与账户菜单「检查更新」行
+     同一份 updateRowText）。下载完（ready）点它的动作是重启安装，字还写「更新」会把
+     用户骗去等一个不会来的「更新中」——ready 直书「重启安装」；其余态「更新」不变。
+     下载中附百分比，点按行为由宿主按态分发。 */
+  const { title } = updateRowText(update)
+  const label = update.state === "ready" ? "重启安装" : "更新"
+  return (
+    <button
+      type="button"
+      className={`owuser-update ${update.state}`}
+      title={title}
+      aria-label={title}
+      disabled={update.state === "downloading"}
+      onClick={(event) => {
+        event.stopPropagation()
+        onClick()
+      }}
+    >
+      <i className="owuser-update-dot" aria-hidden="true" />
+      <span>{label}</span>
+      {update.state === "downloading" && <em>{percent}%</em>}
+    </button>
+  )
+}
+
+function NavItem({
+  id,
+  label,
+  title,
+  active,
+  icon,
+  onClick,
+}: {
+  id: DesktopSidebarNavId
+  label: string
+  title: string
+  active?: boolean
+  icon: React.ReactNode
+  onClick: () => void
+}): React.ReactElement {
+  return (
+    <Button
+      variant="unstyled"
+      className={`ownavitem${active ? " active" : ""}`}
+      /* R2 · L1-1-1：当前项除了 `.active` 类还要出 `aria-current="page"`——原型模板
+         L687 每个导航钮都写着 `aria-current="{{ navCurN }}"`，我们只画了底色，
+         读屏用户听不出「你在哪一屏」。 */
+      aria-current={active ? "page" : undefined}
+      /* R2 · L3-3-6 锚点契约（与 DesktopOnboardingTourView 件头注同一份）：
+         new-task / projects / plugins / workbench / composer。
+         原来只映射三枚，工作台（id="sites"）根本没有锚点，而「我的空间」（id="files"）
+         缺省不渲染 → `workspace` 锚点也不存在，宿主 `stepsForAvailableAnchors` 便把
+         五步静默砍成三步。旧键 discover / workspace 一并改名，宿主步表同批改，见交接单。 */
+      data-tour-anchor={
+        id === "new" ? "new-task" : id === "skills" ? "plugins" : id === "sites" ? "workbench" : undefined
+      }
+      onClick={onClick}
+      title={title}
+    >
+      {icon}
+      <span className="lbl">{label}</span>
+    </Button>
+  )
+}
+
+function FloatingMenu({
+  anchor,
+  children,
+}: { anchor: { left: number; top: number }; children: React.ReactNode }): React.ReactElement {
+  return (
+    <div
+      style={{ position: "fixed", left: anchor.left, top: anchor.top, zIndex: 1000 }}
+      onClick={(event) => event.stopPropagation()}
+    >
+      {children}
+    </div>
+  )
+}
+
+function projectMenuItems(isDefault: boolean): MenuItem[] {
+  return [
+    { key: "new-task", label: "新建任务", icon: <Plus /> },
+    { key: "open-dir", label: "打开项目目录", icon: <Folder /> },
+    ...(!isDefault
+      ? ([
+        { key: "rename", label: "重命名", icon: <Edit /> },
+        { key: "delete", label: "删除", icon: <Trash />, danger: true },
+      ] as MenuItem[])
+      : []),
+  ]
+}
+
+function ConfirmDialog({
+  title,
+  description,
+  pending = false,
+  pendingLabel = "删除中…",
+  onCancel,
+  onConfirm,
+}: {
+  title: string
+  description: string
+  pending?: boolean
+  pendingLabel?: string
+  onCancel: () => void
+  onConfirm: () => void
+}): React.ReactElement {
+  // 归口 composite/Dialog：遮罩 --ow-scrim（无 backdrop-blur）、立面 16 圆角 ＋ --ow-shadow-modal ＋ 1px 边，
+  // 头部图标走 danger 变体的 error tint 徽章（8px 行动档，不再是 48px rounded-full 彩底）。
+  return (
+    <Dialog
+      open
+      variant="danger"
+      icon={<Trash aria-hidden="true" />}
+      title={title}
+      closable={false}
+      closeOnOverlayClick={!pending}
+      closeOnEscape={!pending}
+      onClose={onCancel}
+      actions={
+        <>
+          <Button variant="secondary" disabled={pending} onClick={onCancel}>
+            取消
+          </Button>
+          <Button variant="danger" disabled={pending} onClick={onConfirm}>
+            {pending ? pendingLabel : "删除"}
+          </Button>
+        </>
+      }
+    >
+      {description}
+    </Dialog>
+  )
+}
+
+function UpdateInstallDialog({
+  version,
+  pending,
+  onCancel,
+  onConfirm,
+}: { version: string; pending: boolean; onCancel: () => void; onConfirm: () => void }): React.ReactElement {
+  // 归口 composite/Dialog；图标走 plain 裸档（原 bg-ow-primary/10 圆底在暗档是荧黄，会假冒行动极）。
+  return (
+    <Dialog
+      open
+      icon={<Refresh aria-hidden="true" />}
+      iconTone="plain"
+      title="安装更新"
+      closable={false}
+      closeOnOverlayClick={!pending}
+      closeOnEscape={!pending}
+      onClose={onCancel}
+      actions={
+        <>
+          <Button variant="secondary" disabled={pending} onClick={onCancel}>
+            稍后
+          </Button>
+          <Button variant="primary" disabled={pending} onClick={onConfirm}>
+            {pending ? "正在重启…" : "安装并重启"}
+          </Button>
+        </>
+      }
+    >
+      Orbitwork {version} 已下载完成。安装后应用将自动重启。
+    </Dialog>
+  )
+}
+
+function MoveThreadDialog({
+  thread,
+  projects,
+  onCreateProject,
+  onCancel,
+  onSubmit,
+}: {
+  thread: DesktopSidebarThread
+  projects: DesktopSidebarProject[]
+  onCreateProject?: (name: string) => Promise<string>
+  onCancel: () => void
+  onSubmit: (projectId: string) => Promise<void>
+}): React.ReactElement {
+  const [selected, setSelected] = useState("")
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const submit = () => {
+    if (!selected || submitting) return
+    setSubmitting(true)
+    setError(null)
+    onSubmit(selected)
+      .catch((reason) => setError(reason instanceof Error ? reason.message : "移动失败"))
+      .finally(() => setSubmitting(false))
+  }
+  // 归口 composite/Dialog（原手写 modal-host + backdrop-blur 毛玻璃已下线）。
+  return (
+    <Dialog
+      open
+      title={`移动任务「${thread.title}」`}
+      width={480}
+      closable={false}
+      onClose={onCancel}
+      actions={
+        <>
+          <Button variant="secondary" disabled={submitting} onClick={onCancel}>
+            取消
+          </Button>
+          <Button variant="primary" disabled={!selected || submitting} onClick={submit}>
+            {submitting ? "移动中…" : "确认"}
+          </Button>
+        </>
+      }
+    >
+      <ProjectSelect
+        value={selected}
+        options={projects
+          .filter((project) => project.id !== thread.projectId)
+          .map((project) => ({ value: project.id, label: project.label }))}
+        onChange={setSelected}
+        onCreate={onCreateProject}
+        placeholder="选择目标项目"
+        disabled={submitting}
+      />
+      {error && (
+        <div
+          data-ow-part="error"
+          className="mt-2 text-ow-error font-normal text-ow-fs-ui leading-[1.4] font-[family-name:var(--ow-font-sans)]"
+        >
+          {error}
+        </div>
+      )}
+    </Dialog>
+  )
+}