@clawpump/claw-agent 0.1.4 → 0.1.6

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

@@ -4,7 +4,7 @@ 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 { CopyButton } from '@/components/ui/copy-button'
 import {
   Dialog,
   DialogContent,
@@ -16,15 +16,18 @@ import {
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { Input } from '@/components/ui/input'
 import { renameSession } from '@/hermes'
+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'
+import { canOpenSessionWindow, openSessionInNewWindow } from '@/store/windows'
 
 interface SessionActions {
   sessionId: string
   title: string
   pinned?: boolean
+  profile?: string
   onPin?: () => void
   onArchive?: () => void
   onDelete?: () => void
@@ -41,42 +44,48 @@ interface ItemSpec {
   variant?: 'destructive'
 }
 
-function useSessionActions({ sessionId, title, pinned = false, onPin, onArchive, onDelete }: SessionActions) {
+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 pinItem: ItemSpec = {
+    disabled: !onPin,
+    icon: 'pin',
+    label: pinned ? r.unpin : r.pin,
+    onSelect: () => {
+      triggerHaptic('selection')
+      onPin?.()
+    }
+  }
+
   const items: ItemSpec[] = [
-    {
-      disabled: !onPin,
-      icon: 'pin',
-      label: pinned ? 'Unpin' : 'Pin',
-      onSelect: () => {
-        triggerHaptic('selection')
-        onPin?.()
-      }
-    },
-    {
-      disabled: !sessionId,
-      icon: 'copy',
-      label: 'Copy ID',
-      onSelect: event => {
-        event.preventDefault()
-        triggerHaptic('selection')
-        void writeClipboardText(sessionId).catch(err => notifyError(err, 'Could not copy session ID'))
-      }
-    },
+    ...(canOpenSessionWindow()
+      ? [
+          {
+            disabled: !sessionId,
+            icon: 'link-external',
+            label: r.newWindow,
+            onSelect: () => {
+              triggerHaptic('selection')
+              void openSessionInNewWindow(sessionId)
+            }
+          }
+        ]
+      : []),
     {
       disabled: !sessionId,
       icon: 'cloud-download',
-      label: 'Export',
+      label: r.export,
       onSelect: () => {
         triggerHaptic('selection')
-        void exportSession(sessionId, { title })
+        void exportSession(sessionId, { profile, title })
       }
     },
     {
       disabled: !sessionId,
       icon: 'edit',
-      label: 'Rename',
+      label: r.rename,
       onSelect: () => {
         triggerHaptic('selection')
         setRenameOpen(true)
@@ -85,7 +94,7 @@ function useSessionActions({ sessionId, title, pinned = false, onPin, onArchive,
     {
       disabled: !onArchive,
       icon: 'archive',
-      label: 'Archive',
+      label: r.archive,
       onSelect: () => {
         triggerHaptic('selection')
         onArchive?.()
@@ -95,7 +104,7 @@ function useSessionActions({ sessionId, title, pinned = false, onPin, onArchive,
       className: 'text-destructive focus:text-destructive',
       disabled: !onDelete,
       icon: 'trash',
-      label: 'Delete',
+      label: t.common.delete,
       onSelect: () => {
         triggerHaptic('warning')
         onDelete?.()
@@ -104,16 +113,37 @@ function useSessionActions({ sessionId, title, pinned = false, onPin, onArchive,
     }
   ]
 
-  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 renderMenuItem = (Item: MenuItem, { className, disabled, icon, label, onSelect, variant }: ItemSpec) => (
+    <Item className={className} disabled={disabled} key={label} onSelect={onSelect} variant={variant}>
+      <Codicon name={icon} size="0.875rem" />
+      <span>{label}</span>
+    </Item>
+  )
+
+  const renderItems = (Item: MenuItem) => (
+    <>
+      {renderMenuItem(Item, pinItem)}
+      <CopyButton
+        appearance={Item === DropdownMenuItem ? 'menu-item' : 'context-menu-item'}
+        disabled={!sessionId}
+        errorMessage={r.copyIdFailed}
+        key={r.copyId}
+        label={r.copyId}
+        onCopyError={err => notifyError(err, r.copyIdFailed)}
+        text={sessionId}
+      />
+      {items.map(spec => renderMenuItem(Item, spec))}
+    </>
+  )
 
   const renameDialog = (
-    <RenameSessionDialog currentTitle={title} onOpenChange={setRenameOpen} open={renameOpen} sessionId={sessionId} />
+    <RenameSessionDialog
+      currentTitle={title}
+      onOpenChange={setRenameOpen}
+      open={renameOpen}
+      profile={profile}
+      sessionId={sessionId}
+    />
   )
 
   return { renameDialog, renderItems }
@@ -125,6 +155,7 @@ interface SessionActionsMenuProps
 }
 
 export function SessionActionsMenu({ children, align = 'end', sideOffset = 6, ...actions }: SessionActionsMenuProps) {
+  const { t } = useI18n()
   const { renameDialog, renderItems } = useSessionActions(actions)
 
   return (
@@ -133,7 +164,7 @@ export function SessionActionsMenu({ children, align = 'end', sideOffset = 6, ..
         <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
         <DropdownMenuContent
           align={align}
-          aria-label={`Actions for ${actions.title}`}
+          aria-label={t.sidebar.row.actionsFor(actions.title)}
           className="w-40"
           sideOffset={sideOffset}
         >
@@ -150,13 +181,14 @@ interface SessionContextMenuProps extends SessionActions {
 }
 
 export function SessionContextMenu({ children, ...actions }: SessionContextMenuProps) {
+  const { t } = useI18n()
   const { renameDialog, renderItems } = useSessionActions(actions)
 
   return (
     <>
       <ContextMenu>
         <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
-        <ContextMenuContent aria-label={`Actions for ${actions.title}`} className="w-40">
+        <ContextMenuContent aria-label={t.sidebar.row.actionsFor(actions.title)} className="w-40">
           {renderItems(ContextMenuItem)}
         </ContextMenuContent>
       </ContextMenu>
@@ -170,9 +202,12 @@ interface RenameSessionDialogProps {
   onOpenChange: (open: boolean) => void
   sessionId: string
   currentTitle: string
+  profile?: string
 }
 
-function RenameSessionDialog({ open, onOpenChange, sessionId, currentTitle }: RenameSessionDialogProps) {
+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)
@@ -200,13 +235,13 @@ function RenameSessionDialog({ open, onOpenChange, sessionId, currentTitle }: Re
     setSubmitting(true)
 
     try {
-      const result = await renameSession(sessionId, next)
+      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: 'Renamed' })
+      notify({ durationMs: 2_000, kind: 'success', message: r.renamed })
       onOpenChange(false)
     } catch (err) {
-      notifyError(err, 'Rename failed')
+      notifyError(err, r.renameFailed)
     } finally {
       setSubmitting(false)
     }
@@ -216,8 +251,8 @@ function RenameSessionDialog({ open, onOpenChange, sessionId, currentTitle }: Re
     <Dialog onOpenChange={onOpenChange} open={open}>
       <DialogContent className="max-w-md">
         <DialogHeader>
-          <DialogTitle>Rename session</DialogTitle>
-          <DialogDescription>Give this chat a memorable title. Leave empty to clear.</DialogDescription>
+          <DialogTitle>{r.renameTitle}</DialogTitle>
+          <DialogDescription>{r.renameDesc}</DialogDescription>
         </DialogHeader>
         <Input
           autoFocus
@@ -231,16 +266,16 @@ function RenameSessionDialog({ open, onOpenChange, sessionId, currentTitle }: Re
               onOpenChange(false)
             }
           }}
-          placeholder="Untitled session"
+          placeholder={r.untitledPlaceholder}
           ref={inputRef}
           value={value}
         />
         <DialogFooter>
           <Button disabled={submitting} onClick={() => onOpenChange(false)} type="button" variant="ghost">
-            Cancel
+            {t.common.cancel}
           </Button>
           <Button disabled={submitting} onClick={() => void submit()} type="button">
-            Save
+            {t.common.save}
           </Button>
         </DialogFooter>
       </DialogContent>

package/agent/apps/desktop/src/app/chat/sidebar/session-row.tsx

@@ -1,11 +1,19 @@
+import { useStore } from '@nanostores/react'
 import type * as React from 'react'
 
+import { writeSessionDrag } from '@/app/chat/composer/inline-refs'
+import { PlatformAvatar } from '@/app/messaging/platform-icon'
 import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
+import { Tip } from '@/components/ui/tooltip'
 import type { SessionInfo } from '@/hermes'
+import { type Translations, useI18n } from '@/i18n'
 import { sessionTitle } from '@/lib/chat-runtime'
 import { triggerHaptic } from '@/lib/haptics'
+import { handoffOriginSource, sessionSourceLabel } from '@/lib/session-source'
 import { cn } from '@/lib/utils'
+import { $attentionSessionIds } from '@/store/session'
+import { canOpenSessionWindow, openSessionInNewWindow } from '@/store/windows'
 
 import { SessionActionsMenu, SessionContextMenu } from './session-actions-menu'
 
@@ -23,22 +31,22 @@ interface SidebarSessionRowProps extends React.ComponentProps<'div'> {
   dragHandleProps?: React.HTMLAttributes<HTMLElement>
 }
 
-const AGE_TICKS: ReadonlyArray<[number, string]> = [
-  [86_400_000, 'd'],
-  [3_600_000, 'h'],
-  [60_000, 'm']
+const AGE_TICKS: ReadonlyArray<[number, 'ageDay' | 'ageHour' | 'ageMin']> = [
+  [86_400_000, 'ageDay'],
+  [3_600_000, 'ageHour'],
+  [60_000, 'ageMin']
 ]
 
-function formatAge(seconds: number): string {
+function formatAge(seconds: number, r: Translations['sidebar']['row']): string {
   const delta = Math.max(0, Date.now() - seconds * 1000)
 
-  for (const [ms, suffix] of AGE_TICKS) {
+  for (const [ms, key] of AGE_TICKS) {
     if (delta >= ms) {
-      return `${Math.floor(delta / ms)}${suffix}`
+      return `${Math.floor(delta / ms)}${r[key]}`
     }
   }
 
-  return 'now'
+  return r.ageNow
 }
 
 export function SidebarSessionRow({
@@ -58,9 +66,20 @@ export function SidebarSessionRow({
   ref,
   ...rest
 }: SidebarSessionRowProps) {
+  const { t } = useI18n()
+  const r = t.sidebar.row
   const title = sessionTitle(session)
-  const age = formatAge(session.last_active || session.started_at)
+  const age = formatAge(session.last_active || session.started_at, r)
   const handleLabel = `Reorder ${title}`
+  // A handed-off session's live source is local, but it originated on a
+  // messaging platform — surface that origin as a small badge so e.g. a
+  // Telegram thread continued here still reads as Telegram.
+  const handoffSource = handoffOriginSource(session.handoff_state, session.handoff_platform)
+  const handoffLabel = handoffSource ? sessionSourceLabel(handoffSource) ?? handoffSource : null
+  // 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
@@ -68,6 +87,7 @@ export function SidebarSessionRow({
       onDelete={onDelete}
       onPin={onPin}
       pinned={isPinned}
+      profile={session.profile}
       sessionId={session.id}
       title={title}
     >
@@ -76,17 +96,35 @@ export function SidebarSessionRow({
           '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',
+          // Opaque surface while lifted so the dragged row erases what's under
+          // it (translucency let the rows below bleed through).
+          dragging && 'z-10 cursor-grabbing bg-(--ui-sidebar-surface-background)',
           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 && <span aria-hidden="true" className="arc-border" />}
+        {isWorking && !needsInput && <span aria-hidden="true" className="arc-border" />}
         <button
-          className="z-0 flex min-w-0 cursor-pointer items-center gap-1.5 bg-transparent py-0.5 pl-2 pr-1 text-left group-hover:pr-12"
+          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()
@@ -97,11 +135,15 @@ export function SidebarSessionRow({
               return
             }
 
-            if (event.metaKey || event.ctrlKey) {
+            // ⌘-click (mac) / ⌃-click (win/linux) pops the chat into its own
+            // window — the universal "open in a new window" gesture. Archive
+            // lives in the row's ⋯ and right-click menus. Falls through to a
+            // normal resume when standalone windows aren't available (web embed).
+            if ((event.metaKey || event.ctrlKey) && canOpenSessionWindow()) {
               event.preventDefault()
               event.stopPropagation()
               triggerHaptic('selection')
-              onArchive()
+              void openSessionInNewWindow(session.id)
 
               return
             }
@@ -114,16 +156,28 @@ export function SidebarSessionRow({
             <span
               {...dragHandleProps}
               aria-label={handleLabel}
-              className="relative -my-0.5 grid w-4 shrink-0 cursor-grab touch-none place-items-center self-stretch overflow-hidden active:cursor-grabbing"
+              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:opacity-0 group-focus-within:opacity-0"
+                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:opacity-80 group-focus-within:opacity-80 hover:text-(--ui-text-secondary)',
+                  '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"
@@ -131,11 +185,25 @@ export function SidebarSessionRow({
               />
             </span>
           ) : (
-            <span className="grid w-3.5 shrink-0 place-items-center overflow-hidden">
-              <SidebarRowDot isWorking={isWorking} />
+            <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="truncate text-[0.8125rem] font-normal text-(--ui-text-secondary) group-hover:text-foreground group-data-[working=true]:text-foreground/90">
+          {handoffSource && handoffLabel ? (
+            <Tip label={r.handoffOrigin(handoffLabel)}>
+              <PlatformAvatar
+                className="size-4 rounded-[4px] text-[0.5rem] [&_svg]:size-2.5"
+                platformId={handoffSource}
+                platformName={handoffLabel}
+              />
+            </Tip>
+          ) : null}
+          <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>
@@ -150,14 +218,15 @@ export function SidebarSessionRow({
             onDelete={onDelete}
             onPin={onPin}
             pinned={isPinned}
+            profile={session.profile}
             sessionId={session.id}
             title={title}
           >
             <Button
-              aria-label={`Actions for ${title}`}
-              className="size-5 rounded-md 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!"
+              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="Session actions"
+              title={r.sessionActions}
               variant="ghost"
             >
               <Codicon name="ellipsis" size="0.875rem" />
@@ -169,10 +238,36 @@ export function SidebarSessionRow({
   )
 }
 
-function SidebarRowDot({ isWorking, className }: { isWorking: boolean; className?: string }) {
+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 ? 'Session running' : undefined}
+      aria-label={isWorking ? r.sessionRunning : undefined}
       className={cn(
         'rounded-full',
         isWorking

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

@@ -1,7 +1,7 @@
-import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
+import { useSortable } 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 FC, useCallback, useRef } from 'react'
 
 import type { SessionInfo } from '@/hermes'
 import { cn } from '@/lib/utils'
@@ -48,7 +48,6 @@ export const VirtualSessionList: FC<VirtualSessionListProps> = ({
   workingSessionIdSet
 }) => {
   const scrollerRef = useRef<HTMLDivElement | null>(null)
-  const ids = useMemo(() => sessions.map(s => s.id), [sessions])
 
   const virtualizer = useVirtualizer({
     count: sessions.length,
@@ -101,21 +100,16 @@ export const VirtualSessionList: FC<VirtualSessionListProps> = ({
     )
   })
 
-  const list = (
-    <div className={cn('relative min-h-0 flex-1 overflow-y-auto overscroll-contain', className)} ref={scrollerRef}>
+  // When sortable, the caller wraps this in a ReorderableList that owns the
+  // DndContext + SortableContext (keyed on the same ids); the virtualized rows
+  // just consume that context via useSortable.
+  return (
+    <div className={cn('relative min-h-0 flex-1 overflow-x-hidden 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 {