@anionex/dsh-pinned-sessions 0.1.0 → 0.1.2

package/src/client/index.tsx

@@ -7,7 +7,15 @@ import {
   useSyncExternalStore,
   type ReactNode,
 } from 'react'
-import { Pin, X } from 'lucide-react'
+import {
+  Button,
+  Menu,
+  MenuItemButton,
+  Modal,
+  Toast,
+  type MenuEntry,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import { Pin, PinOff, Archive, GitBranch, Pencil, Ellipsis, Trash2 } from 'lucide-react'
 import { createPortal } from 'react-dom'
 import {
   attachSessionMenuHost,
@@ -77,19 +85,72 @@ interface LocaleLike {
   register(namespace: string, dictionaries: Readonly<Record<string, Readonly<Record<string, string>>>>): () => void
 }
 
+interface ResultLike {
+  readonly ok: boolean
+  readonly error?: { readonly message: string } | undefined
+}
+
+interface ClientSessionsLike extends SessionsForCapture {
+  binding(sessionId: string): { readonly session: { rename(title: string): Promise<ResultLike> } } | undefined
+  fork(input: { readonly sessionId: string; readonly increaseTitle: boolean }): Promise<string>
+}
+
+interface WorkspacesServiceLike {
+  archiveSession(sessionId: string): Promise<void>
+}
+
+interface DeleteSessionServiceLike {
+  deleteSession(sessionId: string): Promise<ResultLike>
+}
+
+interface BooleanStoreLike {
+  readonly getSnapshot: () => boolean
+  readonly subscribe: (listener: () => void) => () => void
+}
+
+class BooleanStore implements BooleanStoreLike {
+  private value = false
+  private readonly listeners = new Set<() => void>()
+
+  readonly getSnapshot = (): boolean => this.value
+  readonly subscribe = (listener: () => void): (() => void) => {
+    this.listeners.add(listener)
+    return () => { this.listeners.delete(listener) }
+  }
+
+  set(value: boolean): void {
+    if (value === this.value) return
+    this.value = value
+    for (const listener of this.listeners) listener()
+  }
+}
+
 interface ClientContextLike {
   readonly slots: SlotsLike
-  readonly sessions: SessionsForCapture
+  readonly sessions: ClientSessionsLike
   readonly locale: LocaleLike
+  get(name: string): unknown
+  inject(dependencies: readonly string[], setup: (ctx: ClientContextLike) => void): unknown
   effect(setup: () => (() => void), label?: string): unknown
 }
 
+export interface PinnedSessionActions {
+  readonly openSession?: (sessionId: string) => void
+  readonly renameSession: (sessionId: string, title: string) => Promise<void>
+  readonly forkSession: (sessionId: string) => Promise<void>
+  readonly archiveSession: (sessionId: string) => Promise<void>
+  readonly deleteAvailability: BooleanStoreLike
+  readonly deleteSession: (sessionId: string) => Promise<void>
+}
+
 interface BridgeProps {
   readonly store: PinStore
   readonly sessions: SessionsForCapture
+  readonly actions: PinnedSessionActions
   readonly useSessions: SelectorHook<SessionsSnapshotLike>
   readonly useWorkspaces: SelectorHook<WorkspacesSnapshotLike>
   readonly t: Translate
+  readonly modernMenus?: BooleanStoreLike
 }
 
 interface PinIconProps {
@@ -108,25 +169,60 @@ interface ActiveMenuBinding {
   readonly onClick: (event: MouseEvent) => void
 }
 
+interface PendingFocusRemoval {
+  readonly sessionId: string
+  readonly index: number
+}
+
 const NS = 'pinnedSessions'
 const STYLE_ID = '@anionex/dsh-pinned-sessions'
 const MENU_ASSOCIATION_MS = 2_000
 
 const zh = {
-  'menu.pin': '置顶会话',
-  'menu.unpin': '取消置顶',
+  'menu.rename': '重命名',
+  'menu.fork': '分叉会话',
+  'menu.pin': '置顶到顶部分组',
+  'menu.unpin': '从顶部分组取消置顶',
+  'menu.archive': '归档会话',
+  'menu.delete': '删除会话',
   'section.label': '置顶会话',
   'session.open': '打开置顶会话“{name}”',
+  'session.actions': '置顶会话“{name}”的操作',
+  'session.archiveFailed': '归档会话失败：{detail}',
+  'session.forkFailed': '分叉会话失败：{detail}',
   'session.unpin': '取消置顶“{name}”',
+  'dialog.close': '关闭',
+  'dialog.cancel': '取消',
+  'rename.title': '重命名会话',
+  'rename.field': '会话名称',
+  'rename.confirm': '重命名',
+  'delete.title': '删除会话',
+  'delete.description': '将永久删除会话“{name}”及其子代理（含正在运行的）和全部记录（对话内容、统计、缓存），此操作不可恢复。',
+  'delete.pending': '正在删除会话…',
   'workspace.ungrouped': '未分组',
 }
 
 const en = {
-  'menu.pin': 'Pin session',
-  'menu.unpin': 'Unpin session',
+  'menu.rename': 'Rename',
+  'menu.fork': 'Fork session',
+  'menu.pin': 'Pin to top section',
+  'menu.unpin': 'Unpin from top section',
+  'menu.archive': 'Archive session',
+  'menu.delete': 'Delete session',
   'section.label': 'Pinned sessions',
   'session.open': 'Open pinned session “{name}”',
+  'session.actions': 'Actions for pinned session “{name}”',
+  'session.archiveFailed': 'Could not archive session: {detail}',
+  'session.forkFailed': 'Could not fork session: {detail}',
   'session.unpin': 'Unpin “{name}”',
+  'dialog.close': 'Close',
+  'dialog.cancel': 'Cancel',
+  'rename.title': 'Rename session',
+  'rename.field': 'Session name',
+  'rename.confirm': 'Rename',
+  'delete.title': 'Delete session',
+  'delete.description': 'This permanently deletes session “{name}”, its child agents (including any that are still running), and all of its records (conversation, stats, cache). This cannot be undone.',
+  'delete.pending': 'Deleting session…',
   'workspace.ungrouped': 'Ungrouped',
 }
 
@@ -137,20 +233,59 @@ const styles = `
 .dsh-pins-header svg{flex:none;color:var(--dsw-alias-state-business-primary)}
 .dsh-pins-list{box-sizing:border-box;max-height:192px;min-width:0;margin:0;padding:0;overflow-y:auto;overscroll-behavior:contain;list-style:none}
 .dsh-pins-row{box-sizing:border-box;display:flex;align-items:center;gap:0;height:32px;min-width:0;border-radius:6px;color:var(--dsw-alias-label-primary)}
-.dsh-pins-row:hover,.dsh-pins-row[data-current="true"]{background:var(--dsw-alias-interactive-bg-hover)}
+.dsh-pins-row:hover,.dsh-pins-row[data-current="true"],.dsh-pins-row[data-menu-open="true"]{background:var(--dsw-alias-interactive-bg-hover)}
 .dsh-pins-open{box-sizing:border-box;display:flex;align-items:center;gap:6px;min-width:0;height:32px;padding:0 4px 0 8px;border:0;background:transparent;color:inherit;cursor:pointer;flex:1;text-align:left}
-.dsh-pins-open:focus-visible,.dsh-pins-remove:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:-2px}
+.dsh-pins-open:focus-visible,.dsh-pins-actions:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:-2px}
 .dsh-pins-open>svg{flex:none;color:var(--dsw-alias-state-business-primary)}
 .dsh-pins-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:20px;flex:1}
 .dsh-pins-workspace{max-width:34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:18px;flex:none}
-.dsh-pins-remove{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-right:3px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--dsw-alias-label-tertiary);cursor:pointer;opacity:0;flex:none}
-.dsh-pins-row:hover .dsh-pins-remove,.dsh-pins-remove:focus-visible{opacity:1}
-.dsh-pins-remove:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
-.dsh-pins-menu-button{letter-spacing:0}
-@media (max-width:767px){.dsh-pins-workspace{display:none}.dsh-pins-remove{opacity:1}}
+.dsh-pins-actions{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-right:3px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--dsw-alias-label-tertiary);cursor:pointer;opacity:0;pointer-events:none;flex:none}
+.dsh-pins-row:hover .dsh-pins-actions,.dsh-pins-row:focus-within .dsh-pins-actions,.dsh-pins-row[data-menu-open="true"] .dsh-pins-actions{opacity:1;pointer-events:auto}
+.dsh-pins-actions:hover,.dsh-pins-row[data-menu-open="true"] .dsh-pins-actions{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
+.dsh-pins-action-menu{display:inline-flex;flex:none}
+.dsh-pins-rename-input{box-sizing:border-box;width:100%;height:36px;padding:0 11px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;outline:0;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font:inherit}
+.dsh-pins-rename-input:focus{border-color:var(--dsw-alias-state-business-primary)}
+.dsh-pins-dialog-error{margin-top:8px;color:var(--dsw-alias-state-error-primary);font-size:12px;line-height:18px}
+.dsh-pins-dialog-status{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
+.dsh-pins-delete-action{color:var(--dsw-alias-state-error-primary)!important;border-color:var(--dsw-alias-state-error-primary)!important}
+@media (max-width:767px){.dsh-pins-workspace{display:none}}
+@media (hover:none),(max-width:767px){.dsh-pins-actions{opacity:1;pointer-events:auto}}
 `
 
-export const inject = ['slots', 'sessions', 'locale']
+export const inject = ['slots', 'sessions', 'workspaces', 'locale']
+
+function deleteSessionService(ctx: ClientContextLike): DeleteSessionServiceLike | null {
+  try {
+    const service = ctx.get('remote.workspaceRegistry') as Partial<DeleteSessionServiceLike> | undefined
+    return typeof service?.deleteSession === 'function' ? service as DeleteSessionServiceLike : null
+  } catch {
+    return null
+  }
+}
+
+function makePinnedSessionActions(ctx: ClientContextLike, deleteAvailability: BooleanStoreLike): PinnedSessionActions {
+  const workspaces = ctx.get('workspaces') as WorkspacesServiceLike
+  return {
+    renameSession: async (sessionId, title) => {
+      const session = ctx.sessions.binding(sessionId)?.session
+      if (session === undefined) throw new Error(`unknown session "${sessionId}"`)
+      const result = await session.rename(title)
+      if (!result.ok) throw new Error(result.error?.message ?? 'Session rename failed')
+    },
+    forkSession: async sessionId => {
+      const childId = await ctx.sessions.fork({ sessionId, increaseTitle: true })
+      ctx.sessions.open(childId)
+    },
+    archiveSession: async sessionId => { await workspaces.archiveSession(sessionId) },
+    deleteAvailability,
+    deleteSession: async sessionId => {
+      const service = deleteSessionService(ctx)
+      if (service === null) throw new Error('Session deletion is unavailable')
+      const result = await service.deleteSession(sessionId)
+      if (!result.ok) throw new Error(result.error?.message ?? 'Session deletion failed')
+    },
+  }
+}
 
 /** Register the lifecycle bridge in the additive frame overlay slot. */
 export function apply(ctx: ClientContextLike): void {
@@ -161,6 +296,35 @@ export function apply(ctx: ClientContextLike): void {
     storage = undefined
   }
   const store = new PinStore(storage)
+  const deleteAvailability = new BooleanStore()
+  const actions = makePinnedSessionActions(ctx, deleteAvailability)
+  const modernMenus = new BooleanStore()
+  let openSession = (sessionId: string): void => { ctx.sessions.open(sessionId) }
+  const navigationActions = {
+    ...actions,
+    openSession: (id: string) => { openSession(id) },
+    forkSession: async (id: string) => { openSession(await ctx.sessions.fork({ sessionId: id, increaseTitle: true })) },
+  }
+  ctx.inject(['uiWorkspace'], navigation => {
+    const service = navigation.get('uiWorkspace') as { openSession(id: string): void }
+    openSession = id => { service.openSession(id) }
+    navigation.effect(() => () => { openSession = id => { ctx.sessions.open(id) } })
+  })
+
+  ctx.slots.inject('sidebar.workspaces.session.menu.item', () => {
+    modernMenus.set(true)
+    const dispose = ctx.slots.register({
+      name: 'sidebar.workspaces.session.menu.item', id: 'pinned-sessions', order: 90, locale: NS,
+      inject: () => ({ store }),
+    }, PinTopSectionMenuItem)
+    return () => { dispose(); modernMenus.set(false) }
+  })
+
+  ctx.inject(['remote.workspaceRegistry'], serviceCtx => {
+    const available = deleteSessionService(serviceCtx) !== null
+    deleteAvailability.set(available)
+    serviceCtx.effect(() => () => { deleteAvailability.set(false) }, 'pinned-sessions: delete capability')
+  })
 
   ctx.effect(() => {
     const onStorage = (event: StorageEvent): void => {
@@ -187,12 +351,27 @@ export function apply(ctx: ClientContextLike): void {
     id: 'pinned-sessions-bridge',
     order: 40,
     locale: NS,
-    inject: () => ({ store, sessions: ctx.sessions }),
+    inject: () => ({ store, sessions: ctx.sessions, actions: navigationActions, modernMenus }),
   }, PinnedSessionsBridge))
 }
 
+/** The official 0.2 menu slot supplies the exact Session identity. */
+function PinTopSectionMenuItem({ sessionId, store, useMenuOpenState, t }: {
+  sessionId: string
+  store: PinStore
+  useMenuOpenState: () => [boolean, (open: boolean) => void]
+  t: Translate
+}): ReactNode {
+  useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot)
+  const [, setMenuOpen] = useMenuOpenState()
+  const pinned = store.isPinned(sessionId)
+  return <MenuItemButton icon={<PinIcon />} onSelect={() => { store.toggle(sessionId); setMenuOpen(false) }}>
+    {t(pinned ? 'menu.unpin' : 'menu.pin')}
+  </MenuItemButton>
+}
+
 /** Keep native behavior intact while mounting the sidebar portal and unmanaged menu item. */
-export function PinnedSessionsBridge({ store, sessions, useSessions, useWorkspaces, t }: BridgeProps): ReactNode {
+export function PinnedSessionsBridge({ store, sessions, actions, useSessions, useWorkspaces, t, modernMenus }: BridgeProps): ReactNode {
   const sessionSnapshot = useSessions(snapshot => snapshot)
   const workspaceSnapshot = useWorkspaces(snapshot => snapshot)
   const pins = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot)
@@ -200,7 +379,7 @@ export function PinnedSessionsBridge({ store, sessions, useSessions, useWorkspac
   const [sidebarWide, setSidebarWide] = useState(true)
   const pending = useRef<PendingMenuRequest | null>(null)
   const activeMenu = useRef<ActiveMenuBinding | null>(null)
-  const focusAfterUnpin = useRef<number | null>(null)
+  const focusAfterRemoval = useRef<PendingFocusRemoval | null>(null)
 
   useLayoutEffect(() => {
     let active = true
@@ -290,6 +469,7 @@ export function PinnedSessionsBridge({ store, sessions, useSessions, useWorkspac
     }
     const onClickCapture = (event: MouseEvent): void => {
       pending.current = null
+      if (modernMenus?.getSnapshot()) return
       const target = findSessionActionTarget(event.target)
       if (target === null) return
       const sessionId = captureSessionId(target.row, sessions)
@@ -330,7 +510,7 @@ export function PinnedSessionsBridge({ store, sessions, useSessions, useWorkspac
       disposeActiveMenu()
       removeBridgeArtifacts(document)
     }
-  }, [sessions, store, t])
+  }, [sessions, store, t, modernMenus])
 
   useLayoutEffect(() => {
     if (sidebarHost === null) return
@@ -368,20 +548,27 @@ export function PinnedSessionsBridge({ store, sessions, useSessions, useWorkspac
   }, [pins, sessionSnapshot.byId, t, workspaceSnapshot.items])
 
   useLayoutEffect(() => {
-    const removedIndex = focusAfterUnpin.current
-    if (removedIndex === null) return
-    focusAfterUnpin.current = null
-    focusAfterPinnedRemoval(document, sidebarHost, removedIndex)
+    const pendingRemoval = focusAfterRemoval.current
+    if (pendingRemoval === null || rows.some(row => row.session.id === pendingRemoval.sessionId)) return
+    focusAfterRemoval.current = null
+    focusAfterPinnedRemoval(document, sidebarHost, pendingRemoval.index)
   }, [rows, sidebarHost])
 
   return sidebarHost !== null && sidebarHost.isConnected && sidebarWide && rows.length > 0
     ? createPortal(
         <PinnedSessionSection
+          actions={actions}
+          cancelRemoval={sessionId => {
+            if (focusAfterRemoval.current?.sessionId === sessionId) focusAfterRemoval.current = null
+          }}
           currentId={sessionSnapshot.current}
           rows={rows}
-          open={sessionId => { sessions.open(sessionId) }}
+          open={sessionId => { if (actions.openSession) actions.openSession(sessionId); else sessions.open(sessionId) }}
+          prepareRemoval={(sessionId, index) => {
+            focusAfterRemoval.current = { sessionId, index }
+          }}
           unpin={(sessionId, index) => {
-            focusAfterUnpin.current = index
+            focusAfterRemoval.current = { sessionId, index }
             store.toggle(sessionId)
           }}
           t={t}
@@ -392,54 +579,330 @@ export function PinnedSessionsBridge({ store, sessions, useSessions, useWorkspac
 }
 
 interface PinnedSessionSectionProps {
+  readonly actions: PinnedSessionActions
+  readonly cancelRemoval: (sessionId: string) => void
   readonly currentId?: string | undefined
   readonly rows: readonly { readonly session: SessionSummaryLike; readonly title: string; readonly workspace: string }[]
   readonly open: (sessionId: string) => void
+  readonly prepareRemoval: (sessionId: string, index: number) => void
   readonly unpin: (sessionId: string, index: number) => void
   readonly t: Translate
 }
 
-function PinnedSessionSection({ currentId, rows, open, unpin, t }: PinnedSessionSectionProps): ReactNode {
+function PinnedSessionSection({ actions, cancelRemoval, currentId, rows, open, prepareRemoval, unpin, t }: PinnedSessionSectionProps): ReactNode {
   return <section className="dsh-pins-section" aria-label={t('section.label')}>
     <div className="dsh-pins-header">
       <PinIcon size={13} />
       <span>{t('section.label')}</span>
     </div>
     <ul className="dsh-pins-list">
-      {rows.map(({ session, title, workspace }, index) => <li
-        className="dsh-pins-row"
-        data-current={session.id === currentId ? 'true' : 'false'}
+      {rows.map(({ session, title, workspace }, index) => <PinnedSessionRow
+        actions={actions}
+        cancelRemoval={cancelRemoval}
+        current={session.id === currentId}
+        index={index}
         key={session.id}
+        open={open}
+        prepareRemoval={prepareRemoval}
+        session={session}
+        t={t}
+        title={title}
+        unpin={unpin}
+        workspace={workspace}
+      />)}
+    </ul>
+  </section>
+}
+
+interface PinnedSessionRowProps {
+  readonly actions: PinnedSessionActions
+  readonly cancelRemoval: (sessionId: string) => void
+  readonly current: boolean
+  readonly index: number
+  readonly open: (sessionId: string) => void
+  readonly prepareRemoval: (sessionId: string, index: number) => void
+  readonly session: SessionSummaryLike
+  readonly t: Translate
+  readonly title: string
+  readonly unpin: (sessionId: string, index: number) => void
+  readonly workspace: string
+}
+
+function PinnedSessionRow({ actions, cancelRemoval, current, index, open, prepareRemoval, session, t, title, unpin, workspace }: PinnedSessionRowProps): ReactNode {
+  const [menuOpen, setMenuOpen] = useState(false)
+  const [renameOpen, setRenameOpen] = useState(false)
+  const [renameDraft, setRenameDraft] = useState('')
+  const [renaming, setRenaming] = useState(false)
+  const [renameError, setRenameError] = useState<string | null>(null)
+  const [deleteOpen, setDeleteOpen] = useState(false)
+  const [deleting, setDeleting] = useState(false)
+  const [deleteError, setDeleteError] = useState<string | null>(null)
+  const [actionToast, setActionToast] = useState<{ readonly text: string; readonly seq: number } | null>(null)
+  const toastSeq = useRef(0)
+  const composing = useRef(false)
+  const trigger = useRef<HTMLButtonElement | null>(null)
+  const menusBeforeOpen = useRef<ReadonlySet<HTMLElement>>(new Set())
+  const focusMenuEdge = useRef<'first' | 'last' | null>(null)
+  const actionLabel = t('session.actions', { name: title })
+  const renameTrimmed = renameDraft.trim()
+  const renameBlocked = renaming || renameTrimmed === ''
+  const canDelete = useSyncExternalStore(
+    actions.deleteAvailability.subscribe,
+    actions.deleteAvailability.getSnapshot,
+    actions.deleteAvailability.getSnapshot,
+  )
+  const showDesktopActionError = (key: string, reason: unknown): void => {
+    if (!canDelete) return
+    toastSeq.current += 1
+    setActionToast({
+      text: t(key, { detail: reason instanceof Error ? reason.message : String(reason) }),
+      seq: toastSeq.current,
+    })
+  }
+
+  const restoreTriggerFocus = (): void => {
+    queueMicrotask(() => { trigger.current?.focus({ preventScroll: true }) })
+  }
+  const openActionMenu = (focusEdge: 'first' | 'last' | null): void => {
+    menusBeforeOpen.current = new Set(document.querySelectorAll<HTMLElement>('[role="menu"]'))
+    focusMenuEdge.current = focusEdge
+    setMenuOpen(true)
+  }
+
+  useLayoutEffect(() => {
+    if (!menuOpen) return
+    let menu: HTMLElement | undefined
+    let observer: MutationObserver | undefined
+    let disposed = false
+    const items = (): HTMLButtonElement[] => menu === undefined
+      ? []
+      : [...menu.querySelectorAll<HTMLButtonElement>('[role="menuitem"]:not(:disabled)')]
+    const onMenuKeyDown = (event: KeyboardEvent): void => {
+      if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return
+      const available = items()
+      if (available.length === 0) return
+      const currentIndex = available.indexOf(document.activeElement as HTMLButtonElement)
+      let nextIndex: number
+      if (event.key === 'Home') nextIndex = 0
+      else if (event.key === 'End') nextIndex = available.length - 1
+      else if (event.key === 'ArrowDown') nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % available.length
+      else nextIndex = currentIndex <= 0 ? available.length - 1 : currentIndex - 1
+      event.preventDefault()
+      available[nextIndex]?.focus({ preventScroll: true })
+    }
+    const onDocumentKeyDown = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') restoreTriggerFocus()
+    }
+    const install = (): void => {
+      if (disposed) return
+      menu = [...document.querySelectorAll<HTMLElement>('[role="menu"]')]
+        .find(candidate => !menusBeforeOpen.current.has(candidate))
+      if (menu === undefined) return
+      observer?.disconnect()
+      menu.addEventListener('keydown', onMenuKeyDown)
+      const edge = focusMenuEdge.current
+      focusMenuEdge.current = null
+      if (edge === null) return
+      const available = items()
+      const target = edge === 'first' ? available[0] : available.at(-1)
+      queueMicrotask(() => {
+        if (!disposed && target?.isConnected === true) target.focus({ preventScroll: true })
+      })
+    }
+    document.addEventListener('keydown', onDocumentKeyDown, true)
+    install()
+    if (menu === undefined) {
+      observer = new MutationObserver(install)
+      observer.observe(document.body, { childList: true, subtree: true })
+      install()
+    }
+    return () => {
+      disposed = true
+      observer?.disconnect()
+      menu?.removeEventListener('keydown', onMenuKeyDown)
+      document.removeEventListener('keydown', onDocumentKeyDown, true)
+    }
+  }, [menuOpen])
+
+  const menuItems: MenuEntry[] = [
+    { id: 'rename', label: t('menu.rename'), icon: <Pencil size={16} /> },
+    { id: 'fork', label: t('menu.fork'), icon: <GitBranch size={16} /> },
+    { id: 'unpin', label: t('menu.unpin'), icon: <PinOff size={16} strokeWidth={1.8} aria-hidden="true" /> },
+    { id: 'archive', label: t('menu.archive'), icon: <Archive size={16} /> },
+    ...(canDelete ? [{ id: 'delete', label: t('menu.delete'), icon: <Trash2 size={16} />, danger: true }] : []),
+  ]
+
+  const closeRename = (): void => {
+    if (renaming) return
+    setRenameOpen(false)
+    setRenameError(null)
+    restoreTriggerFocus()
+  }
+  const confirmRename = (): void => {
+    if (renameBlocked) return
+    setRenaming(true)
+    setRenameError(null)
+    void actions.renameSession(session.id, renameTrimmed).then(() => {
+      setRenaming(false)
+      setRenameOpen(false)
+      restoreTriggerFocus()
+    }).catch(reason => {
+      setRenaming(false)
+      setRenameError(reason instanceof Error ? reason.message : String(reason))
+    })
+  }
+  const closeDelete = (): void => {
+    if (deleting) return
+    setDeleteOpen(false)
+    setDeleteError(null)
+    restoreTriggerFocus()
+  }
+  const confirmDelete = (): void => {
+    if (deleting) return
+    prepareRemoval(session.id, index)
+    setDeleting(true)
+    setDeleteError(null)
+    void actions.deleteSession(session.id).then(() => {
+      setDeleting(false)
+      setDeleteOpen(false)
+      restoreTriggerFocus()
+    }).catch(reason => {
+      cancelRemoval(session.id)
+      setDeleting(false)
+      setDeleteError(reason instanceof Error ? reason.message : String(reason))
+    })
+  }
+  const onSelect = (id: string): void => {
+    setMenuOpen(false)
+    if (id === 'rename') {
+      setRenameDraft(session.title ?? title)
+      setRenameError(null)
+      setRenameOpen(true)
+    }
+    if (id === 'fork') {
+      restoreTriggerFocus()
+      void actions.forkSession(session.id).catch(reason => {
+        showDesktopActionError('session.forkFailed', reason)
+      })
+    }
+    if (id === 'unpin') unpin(session.id, index)
+    if (id === 'archive') {
+      prepareRemoval(session.id, index)
+      restoreTriggerFocus()
+      void actions.archiveSession(session.id).catch(reason => {
+        cancelRemoval(session.id)
+        restoreTriggerFocus()
+        showDesktopActionError('session.archiveFailed', reason)
+        if (!canDelete) console.warn('session archive rejected:', reason)
+      })
+    }
+    if (id === 'delete' && canDelete) {
+      setDeleteError(null)
+      setDeleteOpen(true)
+    }
+  }
+
+  return <>
+    <li
+      className="dsh-pins-row"
+      data-current={current ? 'true' : 'false'}
+      data-menu-open={menuOpen ? 'true' : undefined}
+    >
+      <button
+        type="button"
+        className="dsh-pins-open"
+        aria-current={current ? 'page' : undefined}
+        aria-label={t('session.open', { name: title })}
+        onClick={() => { open(session.id) }}
       >
-        <button
+        <PinIcon size={13} />
+        <span className="dsh-pins-title">{title}</span>
+        <span className="dsh-pins-workspace">{workspace}</span>
+      </button>
+      <Menu
+        className="dsh-pins-action-menu"
+        open={menuOpen}
+        onClose={() => { setMenuOpen(false) }}
+        items={menuItems}
+        onSelect={onSelect}
+        portal
+        closeOnPointerLeave
+        anchor={<button
+          ref={trigger}
           type="button"
-          className="dsh-pins-open"
-          aria-current={session.id === currentId ? 'page' : undefined}
-          aria-label={t('session.open', { name: title })}
-          onClick={() => { open(session.id) }}
-        >
-          <PinIcon size={13} />
-          <span className="dsh-pins-title">{title}</span>
-          <span className="dsh-pins-workspace">{workspace}</span>
-        </button>
-        <button
-          type="button"
-          className="dsh-pins-remove"
-          aria-label={t('session.unpin', { name: title })}
-          title={t('session.unpin', { name: title })}
-          onClick={() => { unpin(session.id, index) }}
+          className="dsh-pins-actions"
+          aria-expanded={menuOpen}
+          aria-haspopup="menu"
+          aria-label={actionLabel}
+          title={actionLabel}
+          onClick={event => {
+            event.stopPropagation()
+            if (menuOpen) setMenuOpen(false)
+            else openActionMenu(null)
+          }}
+          onKeyDown={event => {
+            if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return
+            event.preventDefault()
+            openActionMenu(event.key === 'ArrowDown' ? 'first' : 'last')
+          }}
         >
-          <CloseIcon />
-        </button>
-      </li>)}
-    </ul>
-  </section>
+          <Ellipsis size={16} />
+        </button>}
+      />
+    </li>
+    <Modal
+      open={renameOpen}
+      onClose={closeRename}
+      closeLabel={t('dialog.close')}
+      title={t('rename.title')}
+      footer={<>
+        <Button variant="outline" disabled={renaming} onClick={closeRename}>{t('dialog.cancel')}</Button>
+        <Button variant="primary" disabled={renameBlocked} onClick={confirmRename}>{t('rename.confirm')}</Button>
+      </>}
+    >
+      <input
+        className="dsh-pins-rename-input"
+        value={renameDraft}
+        aria-label={t('rename.field')}
+        autoFocus
+        disabled={renaming}
+        onFocus={event => { event.currentTarget.select() }}
+        onChange={event => {
+          setRenameDraft(event.currentTarget.value)
+          setRenameError(null)
+        }}
+        onCompositionStart={() => { composing.current = true }}
+        onCompositionEnd={() => { composing.current = false }}
+        onKeyDown={event => {
+          if (event.key !== 'Enter' || composing.current) return
+          event.preventDefault()
+          confirmRename()
+        }}
+      />
+      {renameError !== null && <div className="dsh-pins-dialog-error" role="alert">{renameError}</div>}
+    </Modal>
+    <Modal
+      open={deleteOpen}
+      onClose={closeDelete}
+      closeLabel={t('dialog.close')}
+      title={t('delete.title')}
+      description={t('delete.description', { name: title })}
+      footer={<>
+        <Button variant="outline" autoFocus disabled={deleting} onClick={closeDelete}>{t('dialog.cancel')}</Button>
+        <Button variant="outline" className="dsh-pins-delete-action" disabled={deleting} onClick={confirmDelete}>{t('delete.title')}</Button>
+      </>}
+    >
+      {deleting && <div className="dsh-pins-dialog-status" role="status">{t('delete.pending')}</div>}
+      {deleteError !== null && <div className="dsh-pins-dialog-error" role="alert">{deleteError}</div>}
+    </Modal>
+    {actionToast !== null && <Toast
+      key={actionToast.seq}
+      text={actionToast.text}
+      onDone={() => { setActionToast(null) }}
+    />}
+  </>
 }
 
 function PinIcon({ size = 16 }: PinIconProps): ReactNode {
   return <Pin size={size} strokeWidth={1.8} aria-hidden="true" />
 }
-
-function CloseIcon(): ReactNode {
-  return <X size={14} strokeWidth={2} aria-hidden="true" />
-}