@clawpump/claw-agent 0.1.5 → 0.1.6

package/agent/apps/desktop/src/app/chat/composer/status-stack/status-row.tsx

@@ -0,0 +1,155 @@
+import { Fragment, memo, type ReactNode, useState } from 'react'
+
+import { StatusRow } from '@/components/chat/status-row'
+import { TerminalOutput } from '@/components/chat/terminal-output'
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
+import { DisclosureCaret } from '@/components/ui/disclosure-caret'
+import { GlyphSpinner } from '@/components/ui/glyph-spinner'
+import { Tip } from '@/components/ui/tooltip'
+import { type Translations, useI18n } from '@/i18n'
+import { ArrowUpRight, X } from '@/lib/icons'
+import type { TodoStatus } from '@/lib/todos'
+import { cn } from '@/lib/utils'
+import type { ComposerStatusItem } from '@/store/composer-status'
+
+const toolLabel = (name: string) =>
+  name
+    .split('_')
+    .filter(Boolean)
+    .map(part => part[0]!.toUpperCase() + part.slice(1))
+    .join(' ') || name
+
+// Todo rows speak checkbox, not spinner-and-dot: a dashed ring while the item
+// is still open (pending), codicons once it resolves, a live spinner only on
+// the in-progress item.
+const TODO_GLYPHS: Record<Exclude<TodoStatus, 'in_progress' | 'pending'>, { icon: string; tone: string }> = {
+  cancelled: { icon: 'circle-slash', tone: 'text-muted-foreground/45' },
+  completed: { icon: 'pass-filled', tone: 'text-emerald-500/80' }
+}
+
+// Left slot: braille spinner while running, otherwise a small status dot
+// (green = done, red = failed) so the slot is always filled and rows align.
+function leadingGlyph(item: ComposerStatusItem, s: Translations['statusStack']): ReactNode {
+  if (item.todoStatus === 'pending') {
+    return (
+      <span
+        aria-hidden
+        className="box-border size-[0.7rem] rounded-full border border-dashed border-muted-foreground/60"
+      />
+    )
+  }
+
+  if (item.todoStatus && item.todoStatus !== 'in_progress') {
+    const glyph = TODO_GLYPHS[item.todoStatus]
+
+    return <Codicon className={glyph.tone} name={glyph.icon} size="0.8rem" />
+  }
+
+  if (item.state === 'running') {
+    return (
+      <GlyphSpinner
+        ariaLabel={s.running}
+        className="text-[0.9rem] leading-none text-muted-foreground/80"
+        spinner="braille"
+      />
+    )
+  }
+
+  return (
+    <span
+      aria-hidden
+      className={cn('size-1.5 rounded-full', item.state === 'failed' ? 'bg-destructive/80' : 'bg-emerald-500/70')}
+    />
+  )
+}
+
+interface StatusItemRowProps {
+  item: ComposerStatusItem
+  /** Clear a finished background task from the stack. */
+  onDismiss?: (id: string) => void
+  /** Open the subagent's own session window, livestreamed by the gateway's
+   *  child-session mirror (Agents view fallback for older gateways). */
+  onOpen?: () => void
+  /** Cancel a running background task. */
+  onStop?: (id: string) => void
+}
+
+/**
+ * Renders one {@link ComposerStatusItem} into the shared {@link StatusRow}.
+ * Memoised + keyed by id so parent re-renders never remount it (the spinner
+ * keeps ticking instead of resetting).
+ */
+export const StatusItemRow = memo(function StatusItemRow({ item, onDismiss, onOpen, onStop }: StatusItemRowProps) {
+  const { t } = useI18n()
+  const s = t.statusStack
+  const [outputOpen, setOutputOpen] = useState(false)
+  const failed = item.state === 'failed'
+  const running = item.state === 'running'
+
+  const action =
+    item.type === 'background'
+      ? running
+        ? onStop && { label: s.stop, onClick: () => onStop(item.id) }
+        : onDismiss && { label: s.dismiss, onClick: () => onDismiss(item.id) }
+      : null
+
+  const canOpen = item.type === 'subagent' && !!onOpen
+  const hasOutput = item.type === 'background' && !!item.output
+  const onActivate = canOpen ? onOpen : hasOutput ? () => setOutputOpen(open => !open) : undefined
+
+  return (
+    <Fragment>
+      <StatusRow
+        leading={leadingGlyph(item, s)}
+        onActivate={onActivate}
+        trailing={
+          action ? (
+            <Tip label={action.label}>
+              <Button
+                aria-label={action.label}
+                className="-my-1 size-4 rounded-md text-muted-foreground/60 hover:text-foreground/90"
+                onClick={event => {
+                  event.stopPropagation()
+                  action.onClick()
+                }}
+                size="icon-xs"
+                type="button"
+                variant="ghost"
+              >
+                <X size={12} />
+              </Button>
+            </Tip>
+          ) : canOpen ? (
+            <ArrowUpRight aria-hidden className="size-3.5 text-muted-foreground/55" />
+          ) : undefined
+        }
+      >
+        <span
+          className={cn(
+            'min-w-0 max-w-[18rem] truncate text-[0.73rem] leading-4',
+            failed
+              ? 'text-destructive/90'
+              : item.todoStatus && item.todoStatus !== 'in_progress'
+                ? 'text-muted-foreground/75'
+                : 'text-foreground/92'
+          )}
+        >
+          {item.title}
+        </span>
+        {item.type === 'subagent' && item.currentTool && (
+          <span className="shrink-0 truncate text-[0.62rem] leading-4 text-muted-foreground/70">
+            {toolLabel(item.currentTool)}
+          </span>
+        )}
+        {failed && typeof item.exitCode === 'number' && item.exitCode !== 0 && (
+          <span className="shrink-0 rounded bg-destructive/15 px-1 text-[0.58rem] font-semibold text-destructive tabular-nums">
+            {s.exit(item.exitCode)}
+          </span>
+        )}
+        {hasOutput && <DisclosureCaret className="shrink-0 text-muted-foreground/45" open={outputOpen} size="0.8em" />}
+      </StatusRow>
+      {hasOutput && outputOpen && <TerminalOutput className="mx-auto mb-1 max-w-[90%]" text={item.output!} />}
+    </Fragment>
+  )
+})

package/agent/apps/desktop/src/app/chat/composer/text-utils.test.ts

@@ -0,0 +1,104 @@
+import { describe, expect, it } from 'vitest'
+
+import { blobDedupeKey, detectTrigger, extractClipboardImageBlobs } from './text-utils'
+
+describe('detectTrigger', () => {
+  it('detects a bare slash trigger with an empty query', () => {
+    expect(detectTrigger('/')).toEqual({ kind: '/', query: '', tokenLength: 1 })
+  })
+
+  it('detects a slash command query', () => {
+    expect(detectTrigger('/skill')).toEqual({ kind: '/', query: 'skill', tokenLength: 6 })
+  })
+
+  it('detects a bare at-mention trigger with an empty query', () => {
+    expect(detectTrigger('@')).toEqual({ kind: '@', query: '', tokenLength: 1 })
+  })
+
+  it('detects an at-mention query', () => {
+    expect(detectTrigger('@file')).toEqual({ kind: '@', query: 'file', tokenLength: 5 })
+  })
+
+  it('returns null for plain text', () => {
+    expect(detectTrigger('hello there')).toBeNull()
+  })
+
+  it('keeps the slash trigger live while typing args', () => {
+    expect(detectTrigger('/personality ')).toEqual({
+      kind: '/',
+      query: 'personality ',
+      tokenLength: 13
+    })
+    expect(detectTrigger('/personality alic')).toEqual({
+      kind: '/',
+      query: 'personality alic',
+      tokenLength: 17
+    })
+    expect(detectTrigger('/tools enable foo')).toEqual({
+      kind: '/',
+      query: 'tools enable foo',
+      tokenLength: 17
+    })
+  })
+
+  it('does not treat file-style paths as slash triggers', () => {
+    expect(detectTrigger('src/foo/bar')).toBeNull()
+    expect(detectTrigger('/path/to/file')).toBeNull()
+  })
+
+  it('still anchors at-mention triggers strictly at the token edge', () => {
+    expect(detectTrigger('@file:path with space')).toBeNull()
+  })
+})
+
+describe('extractClipboardImageBlobs', () => {
+  it('dedupes the same image exposed on both items and files', () => {
+    const image = new File([new Uint8Array([1, 2, 3])], 'paste.png', {
+      type: 'image/png',
+      lastModified: 1_700_000_000_000
+    })
+
+    const clipboard = {
+      files: {
+        length: 1,
+        item: (index: number) => (index === 0 ? image : null)
+      },
+      getData: () => '',
+      items: [
+        {
+          kind: 'file',
+          type: 'image/png',
+          getAsFile: () => image
+        }
+      ]
+    } as unknown as DataTransfer
+
+    expect(extractClipboardImageBlobs(clipboard)).toEqual([image])
+  })
+
+  it('falls back to files when items has no image', () => {
+    const image = new File([new Uint8Array([4, 5])], 'shot.jpg', {
+      type: 'image/jpeg',
+      lastModified: 1_700_000_000_001
+    })
+
+    const clipboard = {
+      files: {
+        length: 1,
+        item: (index: number) => (index === 0 ? image : null)
+      },
+      getData: () => '',
+      items: []
+    } as unknown as DataTransfer
+
+    expect(extractClipboardImageBlobs(clipboard)).toEqual([image])
+  })
+})
+
+describe('blobDedupeKey', () => {
+  it('uses file metadata for File blobs', () => {
+    const file = new File([], 'a.png', { type: 'image/png', lastModified: 42 })
+
+    expect(blobDedupeKey(file)).toBe('file:a.png:0:image/png:42')
+  })
+})

package/agent/apps/desktop/src/app/chat/composer/text-utils.ts

@@ -6,18 +6,39 @@ export interface TriggerState {
   tokenLength: number
 }
 
-const TRIGGER_RE = /(?:^|[\s])([@/])([^\s@/]*)$/
+// `@` triggers stop at the first whitespace — `@file:path` and `@diff` are
+// single tokens. `/` triggers keep going so the popover stays live while the
+// user types args (`/personality alic` → arg completer suggests `alice`).
+// Restricting the slash command name to `[a-zA-Z][\w-]*` avoids matching file
+// paths like `src/foo/bar`.
+const AT_TRIGGER_RE = /(?:^|[\s])(@)([^\s@/]*)$/
+const SLASH_TRIGGER_RE = /(?:^|[\s])(\/)((?:[a-zA-Z][\w-]*(?:\s+\S*)*)?)$/
+
+/** Stable key for paste dedupe — `items` and `files` often mirror the same image as different objects. */
+export function blobDedupeKey(blob: Blob): string {
+  if (blob instanceof File) {
+    return `file:${blob.name}:${blob.size}:${blob.type}:${blob.lastModified}`
+  }
+
+  return `blob:${blob.size}:${blob.type}`
+}
 
 export function extractClipboardImageBlobs(clipboard: DataTransfer): Blob[] {
   const blobs: Blob[] = []
-  const seen = new Set<Blob>()
+  const seen = new Set<string>()
 
   const push = (blob: Blob | null) => {
-    if (!blob || blob.size === 0 || seen.has(blob)) {
+    if (!blob || blob.size === 0) {
       return
     }
 
-    seen.add(blob)
+    const key = blobDedupeKey(blob)
+
+    if (seen.has(key)) {
+      return
+    }
+
+    seen.add(key)
     blobs.push(blob)
   }
 
@@ -29,7 +50,8 @@ export function extractClipboardImageBlobs(clipboard: DataTransfer): Blob[] {
     }
   }
 
-  if (clipboard.files?.length) {
+  // Chromium/Electron expose the same pasted image on both `items` and `files`.
+  if (blobs.length === 0 && clipboard.files?.length) {
     for (let i = 0; i < clipboard.files.length; i += 1) {
       const file = clipboard.files.item(i)
 
@@ -81,11 +103,17 @@ export function textBeforeCaret(editor: HTMLDivElement): string | null {
 }
 
 export function detectTrigger(textBefore: string): TriggerState | null {
-  const match = TRIGGER_RE.exec(textBefore)
+  const slash = SLASH_TRIGGER_RE.exec(textBefore)
 
-  if (!match) {
-    return null
+  if (slash) {
+    return { kind: '/', query: slash[2], tokenLength: 1 + slash[2].length }
+  }
+
+  const at = AT_TRIGGER_RE.exec(textBefore)
+
+  if (at) {
+    return { kind: '@', query: at[2], tokenLength: 1 + at[2].length }
   }
 
-  return { kind: match[1] as '@' | '/', query: match[2], tokenLength: 1 + match[2].length }
+  return null
 }

package/agent/apps/desktop/src/app/chat/composer/trigger-popover.test.tsx

@@ -0,0 +1,50 @@
+import { cleanup, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { I18nProvider } from '@/i18n'
+
+import { ComposerTriggerPopover } from './trigger-popover'
+
+function renderPopover(kind: '@' | '/', loading = false) {
+  const onHover = vi.fn()
+  const onPick = vi.fn()
+
+  const rendered = render(
+    <I18nProvider configClient={null} initialLocale="zh">
+      <ComposerTriggerPopover activeIndex={0} items={[]} kind={kind} loading={loading} onHover={onHover} onPick={onPick} />
+    </I18nProvider>
+  )
+
+  return { ...rendered, onHover, onPick }
+}
+
+describe('ComposerTriggerPopover i18n', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  it('renders localized empty lookup copy for @ references', () => {
+    const { container } = renderPopover('@')
+
+    expect(screen.getByText('没有匹配项。')).toBeTruthy()
+    expect(container.textContent).toContain('试试')
+    expect(container.textContent).toContain('@file:')
+    expect(container.textContent).toContain('或')
+    expect(container.textContent).toContain('@folder:')
+  })
+
+  it('renders localized loading copy for slash commands', () => {
+    renderPopover('/', true)
+
+    // While loading the popover shows only the spinner + loading copy — the
+    // `/help` empty-state hint is reserved for the resolved (not-loading) state.
+    expect(screen.getByText('查找中…')).toBeTruthy()
+  })
+
+  it('renders the slash empty-state hint when not loading', () => {
+    const { container } = renderPopover('/')
+
+    expect(screen.getByText('没有匹配项。')).toBeTruthy()
+    expect(container.textContent).toContain('/help')
+  })
+})

package/agent/apps/desktop/src/app/chat/composer/trigger-popover.tsx

@@ -1,14 +1,12 @@
 import type { Unstable_TriggerItem } from '@assistant-ui/core'
+import { Fragment } from 'react'
 
 import { Codicon } from '@/components/ui/codicon'
+import { GlyphSpinner } from '@/components/ui/glyph-spinner'
+import { useI18n } from '@/i18n'
 import { cn } from '@/lib/utils'
 
-import {
-  COMPLETION_DRAWER_BELOW_CLASS,
-  COMPLETION_DRAWER_CLASS,
-  COMPLETION_DRAWER_ROW_CLASS,
-  CompletionDrawerEmpty
-} from './completion-drawer'
+import { COMPLETION_DRAWER_BELOW_CLASS, COMPLETION_DRAWER_CLASS, CompletionDrawerEmpty } from './completion-drawer'
 
 const AT_ICON_BY_TYPE: Record<string, string> = {
   diff: 'diff',
@@ -22,11 +20,7 @@ const AT_ICON_BY_TYPE: Record<string, string> = {
   url: 'globe'
 }
 
-function completionIcon(kind: '@' | '/', item: Unstable_TriggerItem) {
-  if (kind === '/') {
-    return 'terminal'
-  }
-
+function atIcon(item: Unstable_TriggerItem) {
   const meta = item.metadata as { rawText?: string } | undefined
   const raw = meta?.rawText || item.label
 
@@ -41,6 +35,18 @@ function completionIcon(kind: '@' | '/', item: Unstable_TriggerItem) {
   return AT_ICON_BY_TYPE[item.type] || AT_ICON_BY_TYPE.simple
 }
 
+interface RowMeta {
+  display?: string
+  group?: string
+  meta?: string
+}
+
+const ROW_BASE_CLASS = [
+  'relative flex w-full cursor-default select-none rounded-md px-2 py-1 text-left',
+  'outline-hidden transition-colors hover:bg-(--ui-bg-tertiary)',
+  'data-[highlighted]:bg-(--ui-bg-tertiary) data-[highlighted]:text-foreground'
+].join(' ')
+
 interface ComposerTriggerPopoverProps {
   activeIndex: number
   items: readonly Unstable_TriggerItem[]
@@ -60,6 +66,12 @@ export function ComposerTriggerPopover({
   onPick,
   placement = 'top'
 }: ComposerTriggerPopoverProps) {
+  const { t } = useI18n()
+  const copy = t.composer
+  const isSlash = kind === '/'
+
+  let lastGroup: string | undefined
+
   return (
     <div
       className={placement === 'bottom' ? COMPLETION_DRAWER_BELOW_CLASS : COMPLETION_DRAWER_CLASS}
@@ -69,41 +81,94 @@ export function ComposerTriggerPopover({
       role="listbox"
     >
       {items.length === 0 ? (
-        <CompletionDrawerEmpty title={loading ? 'Looking up…' : 'No matches.'}>
-          {kind === '@' ? (
-            <>
-              Try <span className="font-mono text-foreground/80">@file:</span> or{' '}
-              <span className="font-mono text-foreground/80">@folder:</span>.
-            </>
-          ) : (
-            <>
-              Try <span className="font-mono text-foreground/80">/help</span>.
-            </>
-          )}
-        </CompletionDrawerEmpty>
+        loading ? (
+          <div className="flex items-center gap-2 px-2 py-1.5 text-(--ui-text-tertiary)">
+            <GlyphSpinner ariaLabel={copy.lookupLoading} className="text-foreground/70" spinner="braille" />
+            <span>{copy.lookupLoading}</span>
+          </div>
+        ) : (
+          <CompletionDrawerEmpty title={copy.lookupNoMatches}>
+            {kind === '@' ? (
+              <>
+                {copy.lookupTry} <span className="font-mono text-foreground/80">@file:</span> {copy.lookupOr}{' '}
+                <span className="font-mono text-foreground/80">@folder:</span>.
+              </>
+            ) : (
+              <>
+                {copy.lookupTry} <span className="font-mono text-foreground/80">/help</span>.
+              </>
+            )}
+          </CompletionDrawerEmpty>
+        )
       ) : (
         items.map((item, index) => {
-          const meta = item.metadata as { display?: string; meta?: string } | undefined
-          const display = meta?.display ?? (kind === '/' ? `/${item.label}` : item.label)
+          const meta = item.metadata as RowMeta | undefined
+          const display = meta?.display ?? (isSlash ? `/${item.label}` : item.label)
           const description = meta?.meta || item.description
+          const group = meta?.group?.trim()
+          const showHeader = isSlash && Boolean(group) && group !== lastGroup
+          const isFirstHeader = lastGroup === undefined
+          lastGroup = group || lastGroup
+          const active = index === activeIndex
 
           return (
-            <button
-              className={cn(COMPLETION_DRAWER_ROW_CLASS, index === activeIndex && 'bg-(--ui-bg-tertiary)')}
-              data-highlighted={index === activeIndex ? '' : undefined}
-              key={item.id}
-              onClick={() => onPick(item)}
-              onMouseEnter={() => onHover(index)}
-              type="button"
-            >
-              <span className="grid size-3.5 shrink-0 place-items-center text-(--ui-text-tertiary)">
-                <Codicon name={completionIcon(kind, item)} size="0.875rem" />
-              </span>
-              <span className="min-w-0 shrink truncate font-mono font-medium leading-5 text-foreground">{display}</span>
-              {description && (
-                <span className="min-w-0 flex-1 truncate leading-5 text-(--ui-text-tertiary)">{description}</span>
+            <Fragment key={item.id}>
+              {showHeader && (
+                <div
+                  className={cn(
+                    'select-none px-2 pb-0.5 text-[0.625rem] font-semibold uppercase tracking-wider text-(--ui-text-tertiary)',
+                    isFirstHeader ? 'pt-0.5' : 'pt-2'
+                  )}
+                >
+                  {group}
+                </div>
               )}
-            </button>
+              <button
+                className={cn(ROW_BASE_CLASS, isSlash ? 'flex-col gap-0' : 'items-center gap-2')}
+                data-highlighted={active ? '' : undefined}
+                onClick={() => onPick(item)}
+                onMouseEnter={() => onHover(index)}
+                type="button"
+              >
+                {isSlash ? (
+                  <>
+                    {/* Active row (keyboard nav or hover) un-truncates inline so
+                        long command names / descriptions stay readable without a
+                        floating tooltip. */}
+                    <span
+                      className={cn(
+                        'text-[0.8125rem] font-medium leading-snug text-foreground',
+                        active ? 'whitespace-normal break-words' : 'truncate'
+                      )}
+                    >
+                      {display}
+                    </span>
+                    {description && (
+                      <span
+                        className={cn(
+                          'text-[0.6875rem] leading-snug text-(--ui-text-tertiary)',
+                          active ? 'whitespace-normal break-words' : 'truncate'
+                        )}
+                      >
+                        {description}
+                      </span>
+                    )}
+                  </>
+                ) : (
+                  <>
+                    <span className="grid size-4 shrink-0 place-items-center text-(--ui-text-tertiary)">
+                      <Codicon name={atIcon(item)} size="0.875rem" />
+                    </span>
+                    <span className="min-w-0 shrink truncate font-mono font-medium leading-5 text-foreground">
+                      {display}
+                    </span>
+                    {description && (
+                      <span className="min-w-0 flex-1 truncate leading-5 text-(--ui-text-tertiary)">{description}</span>
+                    )}
+                  </>
+                )}
+              </button>
+            </Fragment>
           )
         })
       )}

package/agent/apps/desktop/src/app/chat/composer/types.ts

@@ -1,3 +1,5 @@
+import type { ReactNode } from 'react'
+
 import type { HermesGateway } from '@/hermes'
 import type { ComposerAttachment } from '@/store/composer'
 
@@ -22,6 +24,8 @@ export interface ChatBarState {
     canSwitch: boolean
     loading?: boolean
     quickModels?: QuickModelOption[]
+    /** Reused status-bar dropdown (built with gateway + selectModel upstream). */
+    modelMenuContent?: ReactNode
   }
   tools: { enabled: boolean; label: string; suggestions?: ContextSuggestion[] }
   voice: { enabled: boolean; active: boolean }
@@ -47,6 +51,7 @@ export interface ChatBarProps {
   onPickFolders?: () => void
   onPickImages?: () => void
   onRemoveAttachment?: (id: string) => void
+  onSteer?: (text: string) => Promise<boolean> | boolean
   onSubmit: (
     value: string,
     options?: { attachments?: ComposerAttachment[]; fromQueue?: boolean }

package/agent/apps/desktop/src/app/chat/composer/url-dialog.tsx

@@ -10,6 +10,7 @@ import {
   DialogTitle
 } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
+import { useI18n } from '@/i18n'
 import { Globe } from '@/lib/icons'
 
 const URL_HINT = /^https?:\/\//i
@@ -29,23 +30,17 @@ export function UrlDialog({
   open: boolean
   value: string
 }) {
+  const { t } = useI18n()
+  const c = t.composer
   const trimmed = value.trim()
   const looksLikeUrl = trimmed.length > 0 && URL_HINT.test(trimmed)
 
   return (
     <Dialog onOpenChange={onOpenChange} open={open}>
       <DialogContent className="max-w-md gap-5">
-        <DialogHeader className="flex-row items-center gap-3 sm:items-center">
-          <span
-            aria-hidden
-            className="grid size-9 shrink-0 place-items-center rounded-xl bg-[color-mix(in_srgb,var(--dt-primary)_14%,transparent)] text-primary ring-1 ring-inset ring-primary/15"
-          >
-            <Globe className="size-4" />
-          </span>
-          <div className="grid gap-0.5 text-left">
-            <DialogTitle>Attach a URL</DialogTitle>
-            <DialogDescription>Hermes will fetch the page and include it as context for this turn.</DialogDescription>
-          </div>
+        <DialogHeader>
+          <DialogTitle icon={Globe}>{c.attachUrlTitle}</DialogTitle>
+          <DialogDescription>{c.attachUrlDesc}</DialogDescription>
         </DialogHeader>
         <form
           className="grid gap-4"
@@ -60,23 +55,24 @@ export function UrlDialog({
               autoCorrect="off"
               inputMode="url"
               onChange={e => onChange(e.target.value)}
-              placeholder="https://example.com/post"
+              placeholder={c.urlPlaceholder}
               ref={inputRef}
               spellCheck={false}
               value={value}
             />
             {trimmed.length > 0 && !looksLikeUrl && (
               <p className="text-xs text-muted-foreground/85">
-                Include the full URL, e.g. <span className="font-mono">https://…</span>
+                {c.urlHintPre}
+                <span className="font-mono">https://…</span>
               </p>
             )}
           </div>
           <DialogFooter>
             <Button onClick={() => onOpenChange(false)} type="button" variant="ghost">
-              Cancel
+              {t.common.cancel}
             </Button>
             <Button disabled={!looksLikeUrl} type="submit">
-              Attach
+              {c.attach}
             </Button>
           </DialogFooter>
         </form>