nastechai-desktop 18.1.0

package/src/app/chat/sidebar/session-actions-menu.tsx

@@ -0,0 +1,264 @@
+import type * as React from 'react'
+import { useEffect, useRef, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu'
+import { writeClipboardText } from '@/components/ui/copy-button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { Input } from '@/components/ui/input'
+import { renameSession } from '@/nastech'
+import { useI18n } from '@/i18n'
+import { triggerHaptic } from '@/lib/haptics'
+import { exportSession } from '@/lib/session-export'
+import { notify, notifyError } from '@/store/notifications'
+import { setSessions } from '@/store/session'
+
+interface SessionActions {
+  sessionId: string
+  title: string
+  pinned?: boolean
+  profile?: string
+  onPin?: () => void
+  onArchive?: () => void
+  onDelete?: () => void
+}
+
+type MenuItem = typeof DropdownMenuItem | typeof ContextMenuItem
+
+interface ItemSpec {
+  className?: string
+  disabled: boolean
+  icon: string
+  label: string
+  onSelect: (event: Event) => void
+  variant?: 'destructive'
+}
+
+function useSessionActions({ sessionId, title, pinned = false, profile, onPin, onArchive, onDelete }: SessionActions) {
+  const { t } = useI18n()
+  const r = t.sidebar.row
+  const [renameOpen, setRenameOpen] = useState(false)
+
+  const items: ItemSpec[] = [
+    {
+      disabled: !onPin,
+      icon: 'pin',
+      label: pinned ? r.unpin : r.pin,
+      onSelect: () => {
+        triggerHaptic('selection')
+        onPin?.()
+      }
+    },
+    {
+      disabled: !sessionId,
+      icon: 'copy',
+      label: r.copyId,
+      onSelect: event => {
+        event.preventDefault()
+        triggerHaptic('selection')
+        void writeClipboardText(sessionId).catch(err => notifyError(err, r.copyIdFailed))
+      }
+    },
+    {
+      disabled: !sessionId,
+      icon: 'cloud-download',
+      label: r.export,
+      onSelect: () => {
+        triggerHaptic('selection')
+        void exportSession(sessionId, { title })
+      }
+    },
+    {
+      disabled: !sessionId,
+      icon: 'edit',
+      label: r.rename,
+      onSelect: () => {
+        triggerHaptic('selection')
+        setRenameOpen(true)
+      }
+    },
+    {
+      disabled: !onArchive,
+      icon: 'archive',
+      label: r.archive,
+      onSelect: () => {
+        triggerHaptic('selection')
+        onArchive?.()
+      }
+    },
+    {
+      className: 'text-destructive focus:text-destructive',
+      disabled: !onDelete,
+      icon: 'trash',
+      label: t.common.delete,
+      onSelect: () => {
+        triggerHaptic('warning')
+        onDelete?.()
+      },
+      variant: 'destructive'
+    }
+  ]
+
+  const renderItems = (Item: MenuItem) =>
+    items.map(({ className, disabled, icon, label, onSelect, variant }) => (
+      <Item className={className} disabled={disabled} key={label} onSelect={onSelect} variant={variant}>
+        <Codicon name={icon} size="0.875rem" />
+        <span>{label}</span>
+      </Item>
+    ))
+
+  const renameDialog = (
+    <RenameSessionDialog
+      currentTitle={title}
+      onOpenChange={setRenameOpen}
+      open={renameOpen}
+      profile={profile}
+      sessionId={sessionId}
+    />
+  )
+
+  return { renameDialog, renderItems }
+}
+
+interface SessionActionsMenuProps
+  extends SessionActions, Pick<React.ComponentProps<typeof DropdownMenuContent>, 'align' | 'sideOffset'> {
+  children: React.ReactNode
+}
+
+export function SessionActionsMenu({ children, align = 'end', sideOffset = 6, ...actions }: SessionActionsMenuProps) {
+  const { t } = useI18n()
+  const { renameDialog, renderItems } = useSessionActions(actions)
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+        <DropdownMenuContent
+          align={align}
+          aria-label={t.sidebar.row.actionsFor(actions.title)}
+          className="w-40"
+          sideOffset={sideOffset}
+        >
+          {renderItems(DropdownMenuItem)}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {renameDialog}
+    </>
+  )
+}
+
+interface SessionContextMenuProps extends SessionActions {
+  children: React.ReactNode
+}
+
+export function SessionContextMenu({ children, ...actions }: SessionContextMenuProps) {
+  const { t } = useI18n()
+  const { renameDialog, renderItems } = useSessionActions(actions)
+
+  return (
+    <>
+      <ContextMenu>
+        <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
+        <ContextMenuContent aria-label={t.sidebar.row.actionsFor(actions.title)} className="w-40">
+          {renderItems(ContextMenuItem)}
+        </ContextMenuContent>
+      </ContextMenu>
+      {renameDialog}
+    </>
+  )
+}
+
+interface RenameSessionDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  sessionId: string
+  currentTitle: string
+  profile?: string
+}
+
+function RenameSessionDialog({ open, onOpenChange, sessionId, currentTitle, profile }: RenameSessionDialogProps) {
+  const { t } = useI18n()
+  const r = t.sidebar.row
+  const [value, setValue] = useState(currentTitle)
+  const [submitting, setSubmitting] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (open) {
+      setValue(currentTitle)
+      window.setTimeout(() => inputRef.current?.select(), 0)
+    }
+  }, [currentTitle, open])
+
+  const submit = async () => {
+    const next = value.trim()
+
+    if (!sessionId || submitting) {
+      return
+    }
+
+    if (next === currentTitle.trim()) {
+      onOpenChange(false)
+
+      return
+    }
+
+    setSubmitting(true)
+
+    try {
+      const result = await renameSession(sessionId, next, profile)
+      const finalTitle = result.title || next || ''
+      setSessions(prev => prev.map(s => (s.id === sessionId ? { ...s, title: finalTitle || null } : s)))
+      notify({ durationMs: 2_000, kind: 'success', message: r.renamed })
+      onOpenChange(false)
+    } catch (err) {
+      notifyError(err, r.renameFailed)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <Dialog onOpenChange={onOpenChange} open={open}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>{r.renameTitle}</DialogTitle>
+          <DialogDescription>{r.renameDesc}</DialogDescription>
+        </DialogHeader>
+        <Input
+          autoFocus
+          disabled={submitting}
+          onChange={event => setValue(event.target.value)}
+          onKeyDown={event => {
+            if (event.key === 'Enter') {
+              event.preventDefault()
+              void submit()
+            } else if (event.key === 'Escape') {
+              onOpenChange(false)
+            }
+          }}
+          placeholder={r.untitledPlaceholder}
+          ref={inputRef}
+          value={value}
+        />
+        <DialogFooter>
+          <Button disabled={submitting} onClick={() => onOpenChange(false)} type="button" variant="ghost">
+            {t.common.cancel}
+          </Button>
+          <Button disabled={submitting} onClick={() => void submit()} type="button">
+            {t.common.save}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/app/chat/sidebar/session-row.tsx

@@ -0,0 +1,257 @@
+import { useStore } from '@nanostores/react'
+import type * as React from 'react'
+
+import { writeSessionDrag } from '@/app/chat/composer/inline-refs'
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import type { SessionInfo } from '@/nastech'
+import { type Translations, useI18n } from '@/i18n'
+import { sessionTitle } from '@/lib/chat-runtime'
+import { triggerHaptic } from '@/lib/haptics'
+import { cn } from '@/lib/utils'
+import { $attentionSessionIds } from '@/store/session'
+
+import { SessionActionsMenu, SessionContextMenu } from './session-actions-menu'
+
+interface SidebarSessionRowProps extends React.ComponentProps<'div'> {
+  session: SessionInfo
+  isPinned: boolean
+  isSelected: boolean
+  isWorking: boolean
+  onArchive: () => void
+  onDelete: () => void
+  onPin: () => void
+  onResume: () => void
+  reorderable?: boolean
+  dragging?: boolean
+  dragHandleProps?: React.HTMLAttributes<HTMLElement>
+}
+
+const AGE_TICKS: ReadonlyArray<[number, 'ageDay' | 'ageHour' | 'ageMin']> = [
+  [86_400_000, 'ageDay'],
+  [3_600_000, 'ageHour'],
+  [60_000, 'ageMin']
+]
+
+function formatAge(seconds: number, r: Translations['sidebar']['row']): string {
+  const delta = Math.max(0, Date.now() - seconds * 1000)
+
+  for (const [ms, key] of AGE_TICKS) {
+    if (delta >= ms) {
+      return `${Math.floor(delta / ms)}${r[key]}`
+    }
+  }
+
+  return r.ageNow
+}
+
+export function SidebarSessionRow({
+  session,
+  isPinned,
+  isSelected,
+  isWorking,
+  onArchive,
+  onDelete,
+  onPin,
+  onResume,
+  reorderable = false,
+  dragging = false,
+  dragHandleProps,
+  className,
+  style,
+  ref,
+  ...rest
+}: SidebarSessionRowProps) {
+  const { t } = useI18n()
+  const r = t.sidebar.row
+  const title = sessionTitle(session)
+  const age = formatAge(session.last_active || session.started_at, r)
+  const handleLabel = `Reorder ${title}`
+  // Subscribe per-row (the leaf) instead of drilling a set through the list —
+  // the atom is tiny and rarely non-empty. True when a clarify prompt in this
+  // session is waiting on the user.
+  const needsInput = useStore($attentionSessionIds).includes(session.id)
+
+  return (
+    <SessionContextMenu
+      onArchive={onArchive}
+      onDelete={onDelete}
+      onPin={onPin}
+      pinned={isPinned}
+      profile={session.profile}
+      sessionId={session.id}
+      title={title}
+    >
+      <div
+        className={cn(
+          'group relative grid min-h-[1.625rem] cursor-pointer grid-cols-[minmax(0,1fr)_1.375rem] items-center rounded-md transition-colors duration-100 ease-out hover:bg-(--ui-row-hover-background) hover:transition-none',
+          isSelected && 'bg-(--ui-row-active-background)',
+          isWorking && 'text-foreground',
+          dragging && 'z-10 cursor-grabbing opacity-60 shadow-sm',
+          className
+        )}
+        data-working={isWorking ? 'true' : undefined}
+        draggable
+        onDragStart={event => {
+          // Reorder drags belong to dnd-kit (the grab handle) — cancel the
+          // native drag so the two DnD systems don't fight.
+          if ((event.target as HTMLElement).closest('[data-reorder-handle]')) {
+            event.preventDefault()
+
+            return
+          }
+
+          writeSessionDrag(event.dataTransfer, {
+            id: session.id,
+            profile: session.profile || 'default',
+            title
+          })
+        }}
+        ref={ref}
+        style={style}
+        {...rest}
+      >
+        {isWorking && !needsInput && <span aria-hidden="true" className="arc-border" />}
+        <button
+          className="z-0 flex min-w-0 items-center gap-1.5 bg-transparent py-0.5 pl-2 pr-1 text-left group-hover:pr-12"
+          onClick={event => {
+            if (event.shiftKey) {
+              event.preventDefault()
+              event.stopPropagation()
+              triggerHaptic('selection')
+              onPin()
+
+              return
+            }
+
+            if (event.metaKey || event.ctrlKey) {
+              event.preventDefault()
+              event.stopPropagation()
+              triggerHaptic('selection')
+              onArchive()
+
+              return
+            }
+
+            onResume()
+          }}
+          type="button"
+        >
+          {reorderable ? (
+            <span
+              {...dragHandleProps}
+              aria-label={handleLabel}
+              className={cn(
+                // Scope the dot↔grabber swap to a local group so the grabber
+                // only reveals when hovering/focusing the handle itself, not
+                // anywhere on the row. Width MUST match the non-reorderable dot
+                // column (w-3.5) so rows don't shift horizontally when reorder is
+                // toggled (e.g. scoped → ALL-profiles view).
+                'group/handle relative -my-0.5 grid w-3.5 shrink-0 cursor-grab touch-none place-items-center self-stretch overflow-hidden active:cursor-grabbing',
+                // The quest-glow box-shadow extends past the dot; let it bleed
+                // out instead of being clipped by this handle's overflow-hidden.
+                needsInput && 'overflow-visible'
+              )}
+              data-reorder-handle
+              onClick={event => event.stopPropagation()}
+            >
+              <SidebarRowDot
+                className="transition-opacity group-hover/handle:opacity-0 group-focus-within/handle:opacity-0"
+                isWorking={isWorking}
+                needsInput={needsInput}
+              />
+              <Codicon
+                className={cn(
+                  'absolute text-(--ui-text-quaternary) opacity-0 transition-opacity group-hover/handle:opacity-80 group-focus-within/handle:opacity-80 hover:text-(--ui-text-secondary)',
+                  dragging && 'text-(--ui-text-secondary) opacity-100'
+                )}
+                name="grabber"
+                size="0.75rem"
+              />
+            </span>
+          ) : (
+            <span
+              className={cn(
+                'grid w-3.5 shrink-0 place-items-center',
+                needsInput ? 'overflow-visible' : 'overflow-hidden'
+              )}
+            >
+            <SidebarRowDot isWorking={isWorking} needsInput={needsInput} />
+          </span>
+          )}
+          <span className="min-w-0 flex-1 truncate text-[0.8125rem] font-normal text-(--ui-text-secondary) group-hover:text-foreground group-data-[working=true]:text-foreground/90">
+            {title}
+          </span>
+        </button>
+        <div className="relative z-2 grid w-[1.375rem] place-items-center">
+          {!isWorking && (
+            <span className="pointer-events-none absolute right-6 top-1/2 min-w-6 -translate-y-1/2 text-right text-[0.625rem] leading-none text-(--ui-text-tertiary) opacity-0 transition-opacity group-hover:opacity-100">
+              {age}
+            </span>
+          )}
+          <SessionActionsMenu
+            onArchive={onArchive}
+            onDelete={onDelete}
+            onPin={onPin}
+            pinned={isPinned}
+            profile={session.profile}
+            sessionId={session.id}
+            title={title}
+          >
+            <Button
+              aria-label={r.actionsFor(title)}
+              className="size-5 rounded-[4px] bg-transparent text-transparent transition-colors duration-100 hover:bg-(--ui-control-active-background) hover:text-foreground focus-visible:bg-(--ui-control-active-background) focus-visible:text-foreground focus-visible:ring-0 data-[state=open]:bg-(--ui-control-active-background) data-[state=open]:text-foreground group-hover:text-(--ui-text-tertiary) [&_svg]:size-3.5!"
+              size="icon"
+              title={r.sessionActions}
+              variant="ghost"
+            >
+              <Codicon name="ellipsis" size="0.875rem" />
+            </Button>
+          </SessionActionsMenu>
+        </div>
+      </div>
+    </SessionContextMenu>
+  )
+}
+
+function SidebarRowDot({
+  isWorking,
+  needsInput = false,
+  className
+}: {
+  isWorking: boolean
+  needsInput?: boolean
+  className?: string
+}) {
+  const { t } = useI18n()
+  const r = t.sidebar.row
+
+  // "Needs input" wins over "working": a clarify-blocked session is technically
+  // still running, but the actionable state is that it's waiting on the user.
+  // Amber + steady (no ping) reads as "your turn", distinct from the accent
+  // pulse of an active turn.
+  if (needsInput) {
+    return (
+      <span
+        aria-label={r.needsInput}
+        className={cn('quest-glow relative size-1.5 rounded-full bg-amber-500', className)}
+        role="status"
+        title={r.waitingForAnswer}
+      />
+    )
+  }
+
+  return (
+    <span
+      aria-label={isWorking ? r.sessionRunning : undefined}
+      className={cn(
+        'rounded-full',
+        isWorking
+          ? "relative size-1.5 bg-(--ui-accent) shadow-[0_0_0.625rem_color-mix(in_srgb,var(--ui-accent)_55%,transparent)] before:absolute before:inset-0 before:animate-ping before:rounded-full before:bg-(--ui-accent) before:opacity-70 before:content-['']"
+          : 'size-1 bg-(--ui-text-quaternary) opacity-80',
+        className
+      )}
+      role={isWorking ? 'status' : undefined}
+    />
+  )
+}

package/src/app/chat/sidebar/virtual-session-list.tsx

@@ -0,0 +1,154 @@
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { useVirtualizer } from '@tanstack/react-virtual'
+import { type FC, useCallback, useMemo, useRef } from 'react'
+
+import type { SessionInfo } from '@/nastech'
+import { cn } from '@/lib/utils'
+import { sessionPinId } from '@/store/session'
+
+import { SidebarSessionRow } from './session-row'
+
+interface SessionRowCommonProps {
+  isPinned: boolean
+  isSelected: boolean
+  isWorking: boolean
+  onArchive: () => void
+  onDelete: () => void
+  onPin: () => void
+  onResume: () => void
+}
+
+interface VirtualSessionListProps {
+  activeSessionId: null | string
+  className?: string
+  onArchiveSession: (sessionId: string) => void
+  onDeleteSession: (sessionId: string) => void
+  onResumeSession: (sessionId: string) => void
+  onTogglePin: (sessionId: string) => void
+  pinned: boolean
+  sessions: SessionInfo[]
+  sortable: boolean
+  workingSessionIdSet: Set<string>
+}
+
+const ROW_ESTIMATE_PX = 28
+const OVERSCAN_ROWS = 12
+
+export const VirtualSessionList: FC<VirtualSessionListProps> = ({
+  activeSessionId,
+  className,
+  onArchiveSession,
+  onDeleteSession,
+  onResumeSession,
+  onTogglePin,
+  pinned,
+  sessions,
+  sortable,
+  workingSessionIdSet
+}) => {
+  const scrollerRef = useRef<HTMLDivElement | null>(null)
+  const ids = useMemo(() => sessions.map(s => s.id), [sessions])
+
+  const virtualizer = useVirtualizer({
+    count: sessions.length,
+    estimateSize: () => ROW_ESTIMATE_PX,
+    getItemKey: index => sessions[index]?.id ?? index,
+    getScrollElement: () => scrollerRef.current,
+    // jsdom-friendly default; the real rect takes over on first observe.
+    initialRect: { height: 600, width: 240 },
+    overscan: OVERSCAN_ROWS
+  })
+
+  const virtualItems = virtualizer.getVirtualItems()
+  const totalSize = virtualizer.getTotalSize()
+  const paddingTop = virtualItems[0]?.start ?? 0
+  const paddingBottom = Math.max(0, totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0))
+
+  const rows = virtualItems.map(virtualItem => {
+    const session = sessions[virtualItem.index]
+
+    if (!session) {
+      return null
+    }
+
+    const commonProps: SessionRowCommonProps = {
+      isPinned: pinned,
+      isSelected: session.id === activeSessionId,
+      isWorking: workingSessionIdSet.has(session.id),
+      onArchive: () => onArchiveSession(session.id),
+      onDelete: () => onDeleteSession(session.id),
+      onPin: () => onTogglePin(sessionPinId(session)),
+      onResume: () => onResumeSession(session.id)
+    }
+
+    return sortable ? (
+      <VirtualSortableRow
+        index={virtualItem.index}
+        key={session.id}
+        measureRef={virtualizer.measureElement}
+        rowProps={commonProps}
+        session={session}
+      />
+    ) : (
+      <SidebarSessionRow
+        {...commonProps}
+        data-index={virtualItem.index}
+        key={session.id}
+        ref={virtualizer.measureElement}
+        session={session}
+      />
+    )
+  })
+
+  const list = (
+    <div className={cn('relative min-h-0 flex-1 overflow-y-auto overscroll-contain', className)} ref={scrollerRef}>
+      <div className="grid gap-px" style={{ paddingBottom: `${paddingBottom}px`, paddingTop: `${paddingTop}px` }}>
+        {rows}
+      </div>
+    </div>
+  )
+
+  return sortable ? (
+    <SortableContext items={ids} strategy={verticalListSortingStrategy}>
+      {list}
+    </SortableContext>
+  ) : (
+    list
+  )
+}
+
+interface VirtualSortableRowProps {
+  index: number
+  measureRef: (node: Element | null) => void
+  rowProps: SessionRowCommonProps
+  session: SessionInfo
+}
+
+function VirtualSortableRow({ index, measureRef, rowProps, session }: VirtualSortableRowProps) {
+  const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({ id: session.id })
+
+  // Merge dnd-kit's setNodeRef with the virtualizer's measureElement so
+  // the row participates in both DnD hit-testing and TanStack height
+  // measurement.
+  const refMerged = useCallback(
+    (node: HTMLDivElement | null) => {
+      setNodeRef(node)
+      measureRef(node)
+    },
+    [measureRef, setNodeRef]
+  )
+
+  return (
+    <SidebarSessionRow
+      {...rowProps}
+      data-index={index}
+      dragging={isDragging}
+      dragHandleProps={{ ...attributes, ...listeners }}
+      ref={refMerged}
+      reorderable
+      session={session}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+    />
+  )
+}