@clawpump/claw-agent 0.1.5 → 0.1.6

package/agent/apps/desktop/src/components/chat/disclosure-row.tsx

@@ -14,12 +14,19 @@ import { cn } from '@/lib/utils'
 //     title text, NOT the full row — and reaches just past the chevron with
 //     `-mx-1.5 px-1.5` so it reads as a soft hit-target rather than a slab
 //     stretching to the message edge.
+//   - `trailing` overlays the right edge (absolute) and must stay
+//     non-interactive (e.g. a duration timer) — an opacity-0-but-clickable
+//     control there steals clicks from the caret. Interactive controls go in
+//     `action`, which lays out *in flow* at the far right so it never sits on
+//     top of the caret's hit-target, no matter how long the title is.
 export function DisclosureRow({
+  action,
   children,
   onToggle,
   open,
   trailing
 }: {
+  action?: ReactNode
   children: ReactNode
   onToggle?: () => void
   open: boolean
@@ -33,9 +40,7 @@ export function DisclosureRow({
           // max-w-fit so the click target hugs the title text width — no
           // background fill, just the cursor + the affordance caret.
           'flex min-w-0 max-w-fit items-start gap-1.5 text-left transition-colors',
-          onToggle
-            ? 'cursor-pointer hover:text-foreground focus-visible:text-foreground focus-visible:outline-none'
-            : 'cursor-default'
+          onToggle ? 'hover:text-foreground focus-visible:text-foreground focus-visible:outline-none' : 'cursor-default'
         )}
         disabled={!onToggle}
         onClick={onToggle}
@@ -57,6 +62,11 @@ export function DisclosureRow({
           </span>
         )}
       </button>
+      {action && (
+        <span className="ml-auto flex h-(--conversation-line-height) shrink-0 items-center self-start pl-1.5">
+          {action}
+        </span>
+      )}
       {trailing && (
         <span className="absolute right-1 top-0 flex h-(--conversation-line-height) items-center">{trailing}</span>
       )}

package/agent/apps/desktop/src/components/chat/expandable-block.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { type ReactNode, useLayoutEffect, useRef, useState } from 'react'
+
+import { ChevronDown } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+
+interface ExpandableBlockProps {
+  children: ReactNode
+  className?: string
+}
+
+export function ExpandableBlock({ children, className }: ExpandableBlockProps) {
+  const innerRef = useRef<HTMLDivElement>(null)
+  const [expanded, setExpanded] = useState(false)
+  const [overflowing, setOverflowing] = useState(false)
+
+  useLayoutEffect(() => {
+    const el = innerRef.current
+
+    if (!el) {return}
+
+    const measure = () => setOverflowing(el.scrollHeight > 121)
+    measure()
+    const observer = new ResizeObserver(measure)
+    observer.observe(el)
+
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <div className="relative">
+      <div
+        className={cn('overflow-y-auto', expanded ? 'max-h-[40dvh]' : 'max-h-[7.5rem]', className)}
+        ref={innerRef}
+      >
+        {children}
+      </div>
+      {overflowing && (
+        <button
+          aria-expanded={expanded}
+          aria-label={expanded ? 'Collapse' : 'Expand'}
+          className="absolute inset-x-0 bottom-0 flex h-7 cursor-pointer items-end justify-center bg-linear-to-t from-(--ui-chat-surface-background) to-transparent pb-1 text-muted-foreground/70 transition-colors hover:text-foreground"
+          onClick={() => setExpanded(v => !v)}
+          type="button"
+        >
+          <ChevronDown className={cn('size-3.5 transition-transform', expanded && 'rotate-180')} />
+        </button>
+      )}
+    </div>
+  )
+}

package/agent/apps/desktop/src/components/chat/generated-image-result.tsx

@@ -0,0 +1,174 @@
+'use client'
+
+import { type FC, useEffect, useState } from 'react'
+
+import { DiffusionCanvas } from '@/components/chat/image-generation-placeholder'
+import { ImageActionButton, ImageLightbox } from '@/components/chat/zoomable-image'
+import { useImageDownload } from '@/hooks/use-image-download'
+import { useI18n } from '@/i18n'
+import { generatedImageFromResult } from '@/lib/generated-images'
+import { filePathFromMediaPath, gatewayMediaDataUrl, isRemoteGateway, mediaExternalUrl, mediaName } from '@/lib/media'
+import { cn } from '@/lib/utils'
+
+// Aspect hint from the tool args sizes the frame *before* the image loads, so
+// the placeholder and the resolved image occupy the same box — no layout shift.
+const ASPECT_HINTS: Record<string, number> = {
+  landscape: 16 / 9,
+  square: 1,
+  portrait: 9 / 16
+}
+
+function hintedRatio(aspectRatio?: string): number {
+  return ASPECT_HINTS[String(aspectRatio ?? '').toLowerCase().trim()] ?? ASPECT_HINTS.landscape
+}
+
+function isInlineSrc(path: string): boolean {
+  return /^(?:https?|data):/i.test(path)
+}
+
+async function resolveImageSrc(path: string): Promise<string> {
+  if (isInlineSrc(path)) {
+    return path
+  }
+
+  if (window.hermesDesktop && isRemoteGateway()) {
+    return gatewayMediaDataUrl(path)
+  }
+
+  if (!window.hermesDesktop?.readFileDataUrl) {
+    return mediaExternalUrl(path)
+  }
+
+  return window.hermesDesktop.readFileDataUrl(filePathFromMediaPath(path))
+}
+
+export const GeneratedImage: FC<{ aspectRatio?: string; result?: unknown }> = ({ aspectRatio, result }) => {
+  const { t } = useI18n()
+  const copy = t.desktop
+  const image = result === undefined ? null : generatedImageFromResult(result)
+  const pending = result === undefined
+
+  const [ratio, setRatio] = useState(() => hintedRatio(aspectRatio))
+  const [src, setSrc] = useState(() => (image && isInlineSrc(image) ? image : ''))
+  const [loaded, setLoaded] = useState(false)
+  const [canvasGone, setCanvasGone] = useState(false)
+  const [failed, setFailed] = useState(false)
+  const [lightboxOpen, setLightboxOpen] = useState(false)
+  const { download, saving } = useImageDownload(src)
+
+  useEffect(() => setRatio(hintedRatio(aspectRatio)), [aspectRatio])
+
+  // Resolve the deliverable path (local read / gateway proxy / remote URL). The
+  // <img> stays mounted under the placeholder and only fades in once it decodes,
+  // so the frame keeps its hinted size and never jumps.
+  useEffect(() => {
+    let cancelled = false
+    setFailed(false)
+    setLoaded(false)
+    setCanvasGone(false)
+    setSrc(image && isInlineSrc(image) ? image : '')
+
+    if (!image || isInlineSrc(image)) {
+      return
+    }
+
+    void resolveImageSrc(image)
+      .then(resolved => !cancelled && setSrc(resolved))
+      .catch(() => !cancelled && setFailed(true))
+
+    return () => {
+      cancelled = true
+    }
+  }, [image])
+
+  // Completed but no usable image (generation failed): the agent's prose carries
+  // the explanation, so render nothing here.
+  if (!pending && !image) {
+    return null
+  }
+
+  if (failed && image) {
+    return (
+      <a
+        className="mt-2 inline-block font-semibold text-foreground underline underline-offset-4 decoration-current/20 wrap-anywhere"
+        href="#"
+        onClick={event => {
+          event.preventDefault()
+          void window.hermesDesktop?.openExternal(mediaExternalUrl(image))
+        }}
+      >
+        {copy.openImage}: {mediaName(image)}
+      </a>
+    )
+  }
+
+  return (
+    <>
+      <span
+        aria-label={pending ? t.assistant.tool.renderingImage : undefined}
+        aria-live={pending ? 'polite' : undefined}
+        className="group/image relative block max-w-full overflow-hidden rounded-2xl transition-[width,height] duration-300 ease-out"
+        data-slot="aui_generated-image"
+        role={pending ? 'status' : undefined}
+        style={{
+          aspectRatio: ratio,
+          // Width is capped so the derived height (width / ratio) never exceeds
+          // --image-preview-height; the box then matches the image exactly with
+          // no letterboxing.
+          width: `min(calc(var(--image-preview-height) * ${ratio}), var(--image-preview-max-width), 100%)`
+        }}
+      >
+        {!canvasGone && (
+          <div
+            className={cn('absolute inset-0 transition-opacity duration-500 ease-out', loaded && 'opacity-0')}
+            onTransitionEnd={() => loaded && setCanvasGone(true)}
+          >
+            <DiffusionCanvas />
+          </div>
+        )}
+        {src && (
+          <button
+            className="absolute inset-0 block size-full cursor-zoom-in"
+            onClick={() => setLightboxOpen(true)}
+            title={copy.openImage}
+            type="button"
+          >
+            <img
+              alt="Generated image"
+              className={cn(
+                'absolute inset-0 size-full object-contain opacity-0 transition-opacity duration-500 ease-out',
+                loaded && 'opacity-100'
+              )}
+              draggable={false}
+              onError={() => setFailed(true)}
+              onLoad={event => {
+                const { naturalHeight, naturalWidth } = event.currentTarget
+
+                if (naturalWidth && naturalHeight) {
+                  setRatio(naturalWidth / naturalHeight)
+                }
+
+                setLoaded(true)
+              }}
+              src={src}
+            />
+          </button>
+        )}
+        {loaded && src && (
+          <ImageActionButton className="group-hover/image:opacity-100" copy={copy} onClick={download} saving={saving} />
+        )}
+      </span>
+      {src && (
+        <ImageLightbox
+          alt="Generated image"
+          copy={copy}
+          onClick={download}
+          onOpenChange={setLightboxOpen}
+          open={lightboxOpen}
+          saving={saving}
+          src={src}
+        />
+      )}
+    </>
+  )
+}

package/agent/apps/desktop/src/components/chat/image-generation-placeholder.tsx

@@ -23,19 +23,26 @@ const smoothstep = (edge0: number, edge1: number, value: number) => {
 }
 
 const parseColor = (value: string, fallback: Rgb): Rgb => {
-  const hex = value.trim().match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i)
+  const v = value.trim()
+
+  const hex = v.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i)
 
   if (hex) {
-    return {
-      r: Number.parseInt(hex[1], 16),
-      g: Number.parseInt(hex[2], 16),
-      b: Number.parseInt(hex[3], 16)
-    }
+    return { r: Number.parseInt(hex[1], 16), g: Number.parseInt(hex[2], 16), b: Number.parseInt(hex[3], 16) }
+  }
+
+  const rgb = v.match(/rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/i)
+
+  if (rgb) {
+    return { r: Number(rgb[1]), g: Number(rgb[2]), b: Number(rgb[3]) }
   }
 
-  const rgb = value.trim().match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i)
+  // Chromium serialises `color-mix(in srgb, …)` as `color(srgb r g b / a)` with 0–1 floats.
+  const srgb = v.match(/color\(\s*srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)/i)
 
-  return rgb ? { r: Number(rgb[1]), g: Number(rgb[2]), b: Number(rgb[3]) } : fallback
+  return srgb
+    ? { r: Math.round(Number(srgb[1]) * 255), g: Math.round(Number(srgb[2]) * 255), b: Math.round(Number(srgb[3]) * 255) }
+    : fallback
 }
 
 const mix = (a: Rgb, b: Rgb, amount: number): Rgb => ({
@@ -81,17 +88,22 @@ const fbm = (x: number, y: number) => {
   return value
 }
 
-const readTheme = () => {
-  const styles = getComputedStyle(document.documentElement)
+type Theme = Record<keyof typeof FALLBACKS, Rgb>
 
-  return {
-    card: parseColor(styles.getPropertyValue('--dt-card'), FALLBACKS.card),
-    muted: parseColor(styles.getPropertyValue('--dt-muted'), FALLBACKS.muted),
-    foreground: parseColor(styles.getPropertyValue('--dt-foreground'), FALLBACKS.foreground),
-    primary: parseColor(styles.getPropertyValue('--dt-primary'), FALLBACKS.primary),
-    ring: parseColor(styles.getPropertyValue('--dt-ring'), FALLBACKS.ring)
-  }
-}
+const TOKENS = Object.keys(FALLBACKS) as (keyof typeof FALLBACKS)[]
+
+// `--dt-*` resolve through `var()` chains into `color-mix()`, which
+// getPropertyValue hands back verbatim — unreadable. Bouncing each token through
+// a probe's `color` lets the browser compute it to a concrete color we can
+// parse, so the canvas tracks the live theme instead of a hardcoded fallback.
+const readTheme = (probe: HTMLElement): Theme =>
+  Object.fromEntries(
+    TOKENS.map(key => {
+      probe.style.color = `var(--dt-${key})`
+
+      return [key, parseColor(getComputedStyle(probe).color, FALLBACKS[key])]
+    })
+  ) as Theme
 
 const fitCanvas = (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) => {
   const rect = canvas.getBoundingClientRect()
@@ -106,8 +118,13 @@ const fitCanvas = (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) =>
   return { width, height }
 }
 
-const drawAsciiDiffusion = (ctx: CanvasRenderingContext2D, width: number, height: number, time: number) => {
-  const theme = readTheme()
+const drawAsciiDiffusion = (
+  ctx: CanvasRenderingContext2D,
+  theme: Theme,
+  width: number,
+  height: number,
+  time: number
+) => {
   const bg = ctx.createLinearGradient(0, 0, width, height)
   bg.addColorStop(0, rgba(mix(theme.card, theme.primary, 0.08), 1))
   bg.addColorStop(0.54, rgba(mix(theme.card, theme.muted, 0.68), 1))
@@ -124,6 +141,9 @@ const drawAsciiDiffusion = (ctx: CanvasRenderingContext2D, width: number, height
   const cellHeight = fontSize * 1.28
   const cols = Math.ceil(width / cellWidth)
   const rows = Math.ceil(height / cellHeight)
+  // Normalise both axes by the shorter side so the radial bloom stays a circle
+  // (not a squished ellipse) when the frame isn't landscape.
+  const short = Math.min(width, height)
   const centerX = 0.53 + Math.sin(time * 0.055) * 0.02
   const centerY = 0.5 + Math.cos(time * 0.048) * 0.02
   const timestep = Math.floor(time * 1.15)
@@ -137,10 +157,10 @@ const drawAsciiDiffusion = (ctx: CanvasRenderingContext2D, width: number, height
     for (let col = -1; col <= cols + 1; col += 1) {
       const x = col * cellWidth + cellWidth * 0.5
       const y = row * cellHeight + cellHeight * 0.5
-      const nx = x / width
-      const ny = y / height
-      const dx = (nx - centerX) * 1.2
-      const dy = (ny - centerY) * 0.95
+      const sx = (x - centerX * width) / short
+      const sy = (y - centerY * height) / short
+      const dx = sx * 1.2
+      const dy = sy * 0.95
       const radius = Math.hypot(dx, dy)
       const angle = Math.atan2(dy, dx)
 
@@ -151,7 +171,7 @@ const drawAsciiDiffusion = (ctx: CanvasRenderingContext2D, width: number, height
       const contour =
         Math.exp(-((Math.sin(angle * 3 + radius * 17 - time * 0.17) * 0.5 + 0.5 - radius) ** 2) / 0.016) * 0.38
 
-      const stem = Math.exp(-((nx - centerX + 0.05) ** 2 / 0.004 + (ny - centerY - 0.25) ** 2 / 0.08)) * 0.46
+      const stem = Math.exp(-((sx + 0.05) ** 2 / 0.004 + (sy - 0.25) ** 2 / 0.08)) * 0.46
 
       const latent = clamp(bloom + contour + stem, 0, 1)
       const staticA = hash2(col + timestep * 19, row - timestep * 11)
@@ -223,9 +243,10 @@ const drawAsciiDiffusion = (ctx: CanvasRenderingContext2D, width: number, height
   ctx.fillRect(0, 0, width, height)
 }
 
-const DiffusionCanvas: FC = () => {
+export const DiffusionCanvas: FC = () => {
   const canvasRef = useRef<HTMLCanvasElement | null>(null)
   const sizeRef = useRef({ width: 0, height: 0 })
+  const themeRef = useRef<Theme>(FALLBACKS)
 
   const fitToContainer = useCallback(() => {
     const canvas = canvasRef.current
@@ -240,6 +261,28 @@ const DiffusionCanvas: FC = () => {
 
   useResizeObserver(fitToContainer, canvasRef)
 
+  useEffect(() => {
+    const probe = document.createElement('span')
+    probe.style.cssText = 'position:absolute;width:0;height:0;visibility:hidden;pointer-events:none'
+    document.documentElement.appendChild(probe)
+
+    const sync = () => {
+      themeRef.current = readTheme(probe)
+    }
+
+    sync()
+
+    // Re-resolve when the theme repaints (`applyTheme` toggles `.dark` and
+    // rewrites inline custom props on the root) instead of per animation frame.
+    const observer = new MutationObserver(sync)
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'style', 'data-hermes-mode'] })
+
+    return () => {
+      observer.disconnect()
+      probe.remove()
+    }
+  }, [])
+
   useEffect(() => {
     const canvas = canvasRef.current
     const ctx = canvas?.getContext('2d')
@@ -253,7 +296,7 @@ const DiffusionCanvas: FC = () => {
     let frame = requestAnimationFrame(function draw(now) {
       const { width, height } = sizeRef.current
       ctx.clearRect(0, 0, width, height)
-      drawAsciiDiffusion(ctx, width, height, now / 1000)
+      drawAsciiDiffusion(ctx, themeRef.current, width, height, now / 1000)
       frame = requestAnimationFrame(draw)
     })
 
@@ -264,13 +307,3 @@ const DiffusionCanvas: FC = () => {
 
   return <canvas className="absolute inset-0 h-full w-full" ref={canvasRef} />
 }
-
-export const ImageGenerationPlaceholder: FC = () => {
-  return (
-    <div aria-label="Rendering image" aria-live="polite" className="w-full max-w-136 self-start" role="status">
-      <div className="relative h-(--image-preview-height) overflow-hidden rounded-4xl border border-border/55 shadow-[inset_0_0.0625rem_0_color-mix(in_srgb,white_45%,transparent),inset_0_0_0_0.0625rem_color-mix(in_srgb,var(--dt-border)_34%,transparent),inset_0_-0.75rem_1.75rem_color-mix(in_srgb,var(--dt-primary)_5%,transparent)]">
-        <DiffusionCanvas />
-      </div>
-    </div>
-  )
-}

package/agent/apps/desktop/src/components/chat/intro.tsx

@@ -142,6 +142,8 @@ function pickCopy(copies: IntroCopy[], seed = 0): IntroCopy {
   return copies[Math.abs(seed) % copies.length] || FALLBACK_COPY[0]
 }
 
+const WORDMARK = 'HERMES AGENT'
+
 function resolveCopy(personality?: string, seed?: number): IntroCopy {
   const personalityKey = normalizeKey(personality)
 
@@ -158,20 +160,19 @@ export function Intro({ personality, seed }: IntroProps) {
 
   return (
     <div
-      className="pointer-events-none flex w-full min-w-0 flex-col items-center justify-center px-3 py-6 text-center text-muted-foreground sm:px-6 lg:px-8"
+      className="pointer-events-none flex w-full min-w-0 flex-col items-center justify-center px-0.5 py-6 text-center text-muted-foreground sm:px-6 lg:px-8"
       data-slot="aui_intro"
     >
       <div className="w-full min-w-0">
         <p
-          className="fit-text mx-auto mb-3 w-4/5 font-['Collapse'] font-bold uppercase leading-[0.9] tracking-[0.08em] text-midground mix-blend-plus-lighter dark:text-foreground/90"
-          style={
-            { '--fit-text-line-height': '0.9', '--fit-text-max': '8rem', '--fit-text-min': '2.75rem' } as CSSProperties
-          }
+          aria-label={WORDMARK}
+          className="fit-text mx-auto mb-1 w-[calc(100%-1rem)] font-['Collapse'] font-bold uppercase leading-[0.9] tracking-[0.08em] text-midground mix-blend-plus-lighter dark:text-foreground/90"
+          style={{ '--fit-min': '2.75rem' } as CSSProperties}
         >
           <span>
-            <span>HERMES AGENT</span>
+            <span>{WORDMARK}</span>
           </span>
-          <span aria-hidden="true">HERMES AGENT</span>
+          <span aria-hidden="true">{WORDMARK}</span>
         </p>
 
         <p className="m-0 text-center leading-normal tracking-tight">{copy.body}</p>

package/agent/apps/desktop/src/components/chat/preview-attachment.tsx

@@ -1,6 +1,7 @@
 import { useStore } from '@nanostores/react'
 import { useEffect, useRef, useState } from 'react'
 
+import { useI18n } from '@/i18n'
 import { MonitorPlay } from '@/lib/icons'
 import { normalizeOrLocalPreviewTarget } from '@/lib/local-preview'
 import { previewName } from '@/lib/preview-targets'
@@ -14,6 +15,7 @@ import {
 import { $currentCwd } from '@/store/session'
 
 export function PreviewAttachment({ source = 'manual', target }: { source?: PreviewRecordSource; target: string }) {
+  const { t } = useI18n()
   const cwd = useStore($currentCwd)
   const activePreview = useStore($previewTarget)
   const [opening, setOpening] = useState(false)
@@ -93,7 +95,7 @@ export function PreviewAttachment({ source = 'manual', target }: { source?: Prev
         return
       }
 
-      notifyError(error, 'Preview unavailable')
+      notifyError(error, t.preview.unavailable)
     } finally {
       if (mountedRef.current && requestTokenRef.current === requestToken) {
         setOpening(false)
@@ -116,7 +118,7 @@ export function PreviewAttachment({ source = 'manual', target }: { source?: Prev
         onClick={() => void togglePreview()}
         type="button"
       >
-        {opening ? 'Opening…' : isActive ? 'Hide' : 'Open preview'}
+        {opening ? t.preview.opening : isActive ? t.preview.hide : t.preview.openPreview}
       </button>
     </div>
   )

package/agent/apps/desktop/src/components/chat/shiki-highlighter.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest'
+
+import { chunkByLines, exceedsHighlightBudget } from '@/components/chat/shiki-highlighter'
+
+describe('exceedsHighlightBudget', () => {
+  it('highlights normal-sized blocks', () => {
+    expect(exceedsHighlightBudget('const x = 1\n'.repeat(100))).toBe(false)
+  })
+
+  it('skips highlighting past the line budget', () => {
+    expect(exceedsHighlightBudget('x\n'.repeat(5_000))).toBe(true)
+  })
+
+  it('skips highlighting past the char budget on few lines', () => {
+    expect(exceedsHighlightBudget('a'.repeat(200_000))).toBe(true)
+  })
+
+  it('short-circuits on char budget before line loop', () => {
+    expect(exceedsHighlightBudget('y\n'.repeat(250_000))).toBe(true)
+  })
+})
+
+describe('chunkByLines', () => {
+  it('keeps a small block as a single chunk', () => {
+    const code = 'a\nb\nc'
+    expect(chunkByLines(code, 200)).toEqual([{ text: code, lines: 3 }])
+  })
+
+  it('splits a large block and reconstructs it losslessly', () => {
+    const code = Array.from({ length: 1000 }, (_, i) => `line ${i}`).join('\n')
+    const chunks = chunkByLines(code, 200)
+
+    expect(chunks).toHaveLength(5)
+    expect(chunks.map(chunk => chunk.text).join('\n')).toBe(code)
+    expect(chunks.reduce((sum, chunk) => sum + chunk.lines, 0)).toBe(1000)
+  })
+})