@clawpump/claw-agent 0.1.4 → 0.1.6

package/agent/apps/desktop/src/app/chat/right-rail/preview-console.tsx

@@ -4,6 +4,8 @@ import { useEffect, useMemo, useRef } from 'react'
 
 import { requestComposerInsert } from '@/app/chat/composer/focus'
 import { CopyButton } from '@/components/ui/copy-button'
+import { Tip } from '@/components/ui/tooltip'
+import { useI18n } from '@/i18n'
 import { PanelBottom, Send, Trash2 } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { notify } from '@/store/notifications'
@@ -73,6 +75,9 @@ interface ConsoleRowProps {
 }
 
 function ConsoleRow({ copyText, log, onSend, onToggleSelect, selected }: ConsoleRowProps) {
+  const { t } = useI18n()
+  const copy = t.preview.console
+
   return (
     <div
       className={cn(
@@ -80,17 +85,18 @@ function ConsoleRow({ copyText, log, onSend, onToggleSelect, selected }: Console
         selected && 'border-border/60 bg-accent/40'
       )}
     >
-      <button
-        className={cn(
-          'mt-0.5 cursor-pointer text-left uppercase opacity-70 transition-colors hover:opacity-100',
-          consoleLevelClass[log.level] ?? consoleLevelClass[0]
-        )}
-        onClick={onToggleSelect}
-        title={selected ? 'Deselect entry' : 'Select entry'}
-        type="button"
-      >
-        {consoleLevelLabel[log.level] || 'log'}
-      </button>
+      <Tip label={selected ? copy.deselect : copy.select}>
+        <button
+          className={cn(
+            'mt-0.5 text-left uppercase opacity-70 transition-colors hover:opacity-100',
+            consoleLevelClass[log.level] ?? consoleLevelClass[0]
+          )}
+          onClick={onToggleSelect}
+          type="button"
+        >
+          {consoleLevelLabel[log.level] || 'log'}
+        </button>
+      </Tip>
       <div className="min-w-0" data-selectable-text="true">
         <span className={cn('block wrap-break-word', consoleLevelClass[log.level] ?? consoleLevelClass[0])}>
           {log.message}
@@ -106,32 +112,34 @@ function ConsoleRow({ copyText, log, onSend, onToggleSelect, selected }: Console
         <CopyButton
           appearance="inline"
           className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-          errorMessage="Could not copy console output"
+          errorMessage={copy.copyFailed}
           iconClassName="size-3"
-          label="Copy this entry"
+          label={copy.copyEntry}
           showLabel={false}
           text={copyText}
         />
-        <button
-          className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-          onClick={onSend}
-          title="Send this entry to chat"
-          type="button"
-        >
-          <Send className="size-3" />
-        </button>
+        <Tip label={copy.sendEntry}>
+          <button
+            className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+            onClick={onSend}
+            type="button"
+          >
+            <Send className="size-3" />
+          </button>
+        </Tip>
       </span>
     </div>
   )
 }
 
 export function PreviewConsoleTitlebarIcon({ consoleState }: { consoleState: PreviewConsoleState }) {
+  const { t } = useI18n()
   const logCount = useStore(consoleState.$logCount)
 
   return (
     <>
       <PanelBottom />
-      {logCount > 0 && <span className="sr-only">{logCount} console messages</span>}
+      {logCount > 0 && <span className="sr-only">{t.preview.console.messages(logCount)}</span>}
     </>
   )
 }
@@ -149,6 +157,8 @@ export function PreviewConsolePanel({
   consoleState,
   startConsoleResize
 }: PreviewConsolePanelProps) {
+  const { t } = useI18n()
+  const copy = t.preview.console
   const consoleHeight = useStore(consoleState.$height)
   const logs = useStore(consoleState.$logs)
   const selectedLogIds = useStore(consoleState.$selectedLogIds)
@@ -185,14 +195,14 @@ export function PreviewConsolePanel({
       return
     }
 
-    const block = ['Preview console:', '```', ...entries.map(formatLogLine), '```'].join('\n')
+    const block = [copy.promptHeader, '```', ...entries.map(formatLogLine), '```'].join('\n')
 
     requestComposerInsert(block, { mode: 'block', target: 'main' })
     consoleState.clearSelection()
     notify({
       kind: 'success',
-      title: 'Sent to chat',
-      message: `${entries.length} log entr${entries.length === 1 ? 'y' : 'ies'} added to composer`
+      title: copy.sentTitle,
+      message: copy.sentMessage(entries.length)
     })
   }
 
@@ -202,7 +212,7 @@ export function PreviewConsolePanel({
       style={{ '--preview-console-height': `${consoleHeight}px` } as CSSProperties}
     >
       <div
-        aria-label="Resize preview console"
+        aria-label={copy.resize}
         className="group absolute inset-x-0 -top-1 z-1 h-2 cursor-row-resize"
         onDoubleClick={() => consoleState.setHeight(CONSOLE_HEADER_HEIGHT)}
         onPointerDown={startConsoleResize}
@@ -213,10 +223,10 @@ export function PreviewConsolePanel({
       <div className="flex h-8 shrink-0 items-center justify-between border-b border-border/50 px-2">
         <div className="flex items-center gap-2 text-[0.6875rem] font-medium text-muted-foreground">
           <PanelBottom className="size-3.5" />
-          Preview Console
+          {copy.title}
           {selectedLogIds.size > 0 && (
             <span className="rounded-full bg-muted px-1.5 py-px text-[0.5625rem] text-muted-foreground">
-              {selectedLogIds.size} selected
+              {copy.selected(selectedLogIds.size)}
             </span>
           )}
         </div>
@@ -225,36 +235,30 @@ export function PreviewConsolePanel({
             className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[0.625rem] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-40"
             disabled={sendableLogs.length === 0}
             onClick={() => sendLogsToComposer(sendableLogs)}
-            title={
-              visibleSelection.length > 0
-                ? `Send ${visibleSelection.length} selected to chat`
-                : 'Send all log entries to chat'
-            }
             type="button"
           >
             <Send className="size-3" />
-            Send to chat
+            {copy.sendToChat}
           </button>
           <CopyButton
             appearance="inline"
             className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[0.625rem] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-40"
             disabled={sendableLogs.length === 0}
-            errorMessage="Could not copy console output"
+            errorMessage={copy.copyFailed}
             iconClassName="size-3"
-            label={visibleSelection.length > 0 ? 'Copy selected to clipboard' : 'Copy all to clipboard'}
+            label={visibleSelection.length > 0 ? copy.copySelected : copy.copyAll}
             text={() => formatConsoleEntries(sendableLogs)}
           >
-            Copy
+            {copy.copy}
           </CopyButton>
           <button
             className="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[0.625rem] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-40"
             disabled={logs.length === 0}
             onClick={consoleState.clear}
-            title="Clear console"
             type="button"
           >
             <Trash2 className="size-3" />
-            Clear
+            {copy.clear}
           </button>
         </div>
       </div>
@@ -278,7 +282,7 @@ export function PreviewConsolePanel({
             )
           })
         ) : (
-          <div className="py-2 text-muted-foreground/70">No console messages yet.</div>
+          <div className="py-2 text-muted-foreground/70">{copy.empty}</div>
         )}
       </div>
     </div>

package/agent/apps/desktop/src/app/chat/right-rail/preview-file.tsx

@@ -10,9 +10,16 @@ import { useEffect, useMemo, useState } from 'react'
 import ShikiHighlighter from 'react-shiki'
 import { Streamdown } from 'streamdown'
 
+import { requestComposerFocus, requestComposerInsertRefs } from '@/app/chat/composer/focus'
+import { droppedFileInlineRef } from '@/app/chat/composer/inline-refs'
 import { HERMES_PATHS_MIME } from '@/app/chat/hooks/use-composer-actions'
+import { isAddSelectionShortcut } from '@/app/right-sidebar/terminal/selection'
+import { PageLoader } from '@/components/page-loader'
+import { translateNow, useI18n } from '@/i18n'
+import { readDesktopFileDataUrl, readDesktopFileText } from '@/lib/desktop-fs'
 import { cn } from '@/lib/utils'
 import type { PreviewTarget } from '@/store/preview'
+import { $currentCwd } from '@/store/session'
 
 const SHIKI_THEME = { dark: 'github-dark-default', light: 'github-light-default' } as const
 const TEXT_PREVIEW_MAX_BYTES = 512 * 1024
@@ -142,7 +149,7 @@ function filePathForTarget(target: PreviewTarget) {
 
 function formatBytes(bytes: number | undefined) {
   if (!bytes) {
-    return 'unknown size'
+    return translateNow('preview.unknownSize')
   }
 
   const units = ['B', 'KB', 'MB', 'GB']
@@ -178,15 +185,13 @@ function looksBinaryBytes(bytes: Uint8Array) {
 }
 
 async function readTextPreview(filePath: string) {
-  if (window.hermesDesktop.readFileText) {
-    try {
-      return await window.hermesDesktop.readFileText(filePath)
-    } catch (error) {
-      const message = error instanceof Error ? error.message : String(error)
-
-      if (!message.includes("No handler registered for 'hermes:readFileText'")) {
-        throw error
-      }
+  try {
+    return await readDesktopFileText(filePath)
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error)
+
+    if (!message.includes("No handler registered for 'hermes:readFileText'")) {
+      throw error
     }
   }
 
@@ -286,7 +291,7 @@ const MARKDOWN_COMPONENTS = {
 
 function MarkdownPreview({ text }: { text: string }) {
   return (
-    <div className="preview-markdown mx-auto max-w-3xl px-4 py-3 text-sm text-foreground">
+    <div className="preview-markdown mx-auto max-w-3xl px-4 py-3 text-sm text-foreground" data-selectable-text="true">
       <Streamdown components={MARKDOWN_COMPONENTS} controls={false} mode="static" parseIncompleteMarkdown={false}>
         {text}
       </Streamdown>
@@ -295,6 +300,8 @@ function MarkdownPreview({ text }: { text: string }) {
 }
 
 function PreviewToggle({ asSource, onToggle }: { asSource: boolean; onToggle: () => void }) {
+  const { t } = useI18n()
+
   return (
     <div className="sticky top-0 z-10 flex justify-end border-b border-border/40 bg-transparent px-3 py-1 backdrop-blur">
       <button
@@ -302,7 +309,7 @@ function PreviewToggle({ asSource, onToggle }: { asSource: boolean; onToggle: ()
         onClick={onToggle}
         type="button"
       >
-        {asSource ? 'PREVIEW' : 'SOURCE'}
+        {asSource ? t.preview.renderedPreview : t.preview.source}
       </button>
     </div>
   )
@@ -329,6 +336,7 @@ function startLineDrag(event: ReactDragEvent<HTMLElement>, filePath: string, { e
 }
 
 function SourceView({ filePath, language, text }: { filePath: string; language: string; text: string }) {
+  const { t } = useI18n()
   const lineCount = useMemo(() => Math.max(1, text.split('\n').length), [text])
   const [selection, setSelection] = useState<LineSelection | null>(null)
   const inSelection = (line: number) => selection != null && line >= selection.start && line <= selection.end
@@ -353,6 +361,38 @@ function SourceView({ filePath, language, text }: { filePath: string; language:
     startLineDrag(event, filePath, inSelection(line) && selection ? selection : { end: line, start: line })
   }
 
+  // ⌘/Ctrl+L with a line selection drops the same `@line:path:start-end` ref the
+  // gutter drag produces — so the keyboard path mirrors dragging the lines into
+  // the composer. Capture-phase + stopPropagation so it beats the terminal's
+  // global ⌘L handler (which would otherwise grab the native text selection).
+  useEffect(() => {
+    if (!selection) {
+      return
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (!isAddSelectionShortcut(event)) {
+        return
+      }
+
+      const lineEnd = selection.end > selection.start ? selection.end : undefined
+      const ref = droppedFileInlineRef({ line: selection.start, lineEnd, path: filePath }, $currentCwd.get())
+
+      if (!ref) {
+        return
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+      requestComposerInsertRefs([ref])
+      requestComposerFocus('main')
+    }
+
+    window.addEventListener('keydown', onKeyDown, { capture: true })
+
+    return () => window.removeEventListener('keydown', onKeyDown, { capture: true })
+  }, [filePath, selection])
+
   return (
     <div className="grid min-w-max grid-cols-[auto_minmax(0,1fr)] font-mono text-xs leading-relaxed">
       <div className="select-none py-3 text-right text-muted-foreground/55">
@@ -372,14 +412,17 @@ function SourceView({ filePath, language, text }: { filePath: string; language:
               key={line}
               onClick={event => handleLineClick(event, line)}
               onDragStart={event => handleDragStart(event, line)}
-              title="Click to select · shift-click to extend · drag to composer"
+              title={t.preview.sourceLineTitle}
             >
               {line}
             </div>
           )
         })}
       </div>
-      <div className="relative [&_pre]:m-0 [&_pre]:px-3 [&_pre]:py-3 [&_pre]:bg-transparent!">
+      <div
+        className="relative [&_pre]:m-0 [&_pre]:px-3 [&_pre]:py-3 [&_pre]:bg-transparent!"
+        data-selectable-text="true"
+      >
         {selection && (
           <div
             aria-hidden
@@ -407,6 +450,7 @@ function SourceView({ filePath, language, text }: { filePath: string; language:
 }
 
 export function LocalFilePreview({ reloadKey, target }: { reloadKey: number; target: PreviewTarget }) {
+  const { t } = useI18n()
   const [state, setState] = useState<LocalPreviewState>({ loading: true })
   const [forcePreview, setForcePreview] = useState(false)
   const [renderMarkdownAsSource, setRenderMarkdownAsSource] = useState(false)
@@ -440,7 +484,9 @@ export function LocalFilePreview({ reloadKey, target }: { reloadKey: number; tar
 
       try {
         if (isImage) {
-          const dataUrl = await window.hermesDesktop.readFileDataUrl(filePath)
+          // Prefer bytes the caller already handed us (a pasted/dropped
+          // screenshot) over re-reading a path that may be transient/unreadable.
+          const dataUrl = target.dataUrl || (await readDesktopFileDataUrl(filePath))
 
           if (active) {
             setState({ dataUrl, loading: false })
@@ -478,14 +524,14 @@ export function LocalFilePreview({ reloadKey, target }: { reloadKey: number; tar
     return () => {
       active = false
     }
-  }, [blockedByTarget, filePath, forcePreview, isImage, isText, reloadKey, target.language])
+  }, [blockedByTarget, filePath, forcePreview, isImage, isText, reloadKey, target.dataUrl, target.language])
 
   if (state.loading) {
-    return <div className="grid h-full place-items-center text-xs text-muted-foreground">Loading preview…</div>
+    return <PageLoader label={t.preview.loading} />
   }
 
   if (state.error) {
-    return <PreviewEmptyState body={state.error} title="Preview unavailable" />
+    return <PreviewEmptyState body={state.error} title={t.preview.unavailable} />
   }
 
   if (
@@ -500,11 +546,11 @@ export function LocalFilePreview({ reloadKey, target }: { reloadKey: number; tar
       <PreviewEmptyState
         body={
           binary
-            ? `Previewing ${target.label} may show unreadable text.`
-            : `${target.label} is ${formatBytes(size)}. Hermes will only show the first 512 KB.`
+            ? t.preview.binaryBody(target.label)
+            : t.preview.largeBody(target.label, formatBytes(size))
         }
-        primaryAction={{ label: 'Preview anyway', onClick: () => setForcePreview(true) }}
-        title={binary ? 'This looks like a binary file' : 'This file is large'}
+        primaryAction={{ label: t.preview.previewAnyway, onClick: () => setForcePreview(true) }}
+        title={binary ? t.preview.binaryTitle : t.preview.largeTitle}
         tone="warning"
       />
     )
@@ -531,7 +577,7 @@ export function LocalFilePreview({ reloadKey, target }: { reloadKey: number; tar
       <div className="h-full overflow-auto bg-transparent">
         {state.truncated && (
           <div className="border-b border-border/60 bg-muted/35 px-3 py-1.5 text-[0.68rem] text-muted-foreground">
-            Showing first 512 KB.
+            {t.preview.truncated}
           </div>
         )}
         {isMarkdown && <PreviewToggle asSource={!showRendered} onToggle={() => setRenderMarkdownAsSource(s => !s)} />}
@@ -546,8 +592,8 @@ export function LocalFilePreview({ reloadKey, target }: { reloadKey: number; tar
 
   return (
     <PreviewEmptyState
-      body={`${target.mimeType || 'This file type'} can still be attached as context.`}
-      title="No inline preview"
+      body={t.preview.noInlineBody(target.mimeType || '')}
+      title={t.preview.noInlineTitle}
     />
   )
 }

package/agent/apps/desktop/src/app/chat/right-rail/preview-pane.test.tsx

@@ -1,11 +1,50 @@
 import { act, cleanup, render } from '@testing-library/react'
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { $connection } from '@/store/session'
 
 import { PreviewPane } from './preview-pane'
 
 describe('PreviewPane console state', () => {
+  beforeEach(() => {
+    vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => window.setTimeout(() => callback(Date.now()), 0))
+    vi.stubGlobal('cancelAnimationFrame', (id: number) => window.clearTimeout(id))
+  })
+
   afterEach(() => {
     cleanup()
+    $connection.set(null)
+    vi.unstubAllGlobals()
+  })
+
+  it('does not watch backend-only remote filesystem previews locally', () => {
+    const watchPreviewFile = vi.fn(async () => ({ id: 'watch-1', path: '/remote/file.txt' }))
+    const onPreviewFileChanged = vi.fn(() => vi.fn())
+    $connection.set({ mode: 'remote' } as never)
+    vi.stubGlobal('window', {
+      ...window,
+      hermesDesktop: {
+        onPreviewFileChanged,
+        watchPreviewFile
+      }
+    })
+
+    render(
+      <PreviewPane
+        setTitlebarToolGroup={vi.fn()}
+        target={{
+          kind: 'file',
+          label: 'file.txt',
+          path: '/remote/file.txt',
+          previewKind: 'text',
+          source: '/remote/file.txt',
+          url: 'file:///remote/file.txt'
+        }}
+      />
+    )
+
+    expect(watchPreviewFile).not.toHaveBeenCalled()
+    expect(onPreviewFileChanged).not.toHaveBeenCalled()
   })
 
   it('does not rebuild the pane titlebar group for streamed console logs', () => {