@clawpump/claw-agent 0.1.5 → 0.1.7

package/agent/apps/desktop/src/app/messaging/platform-icon.tsx

@@ -0,0 +1,95 @@
+import {
+  SiApple,
+  SiBilibili,
+  SiDiscord,
+  SiGmail,
+  SiHomeassistant,
+  SiMatrix,
+  SiMattermost,
+  SiQq,
+  SiSignal,
+  SiTelegram,
+  SiWechat,
+  SiWhatsapp
+} from '@icons-pack/react-simple-icons'
+import type { ComponentType, SVGProps } from 'react'
+
+import { Globe, Link as LinkIcon, MessageSquareText } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+
+// We render simpleicons.org brand glyphs for platforms whose owners publish a
+// usable mark (telegram, discord, matrix, ...). A few brands — Slack, Dingtalk,
+// Feishu, WeCom — have been removed from Simple Icons at the brand owner's
+// request, so we fall back to a colored letter monogram for those.
+//
+// `iconColor` is the brand's hex from simpleicons.org so we can paint each
+// glyph in its native color on top of a soft tint. The fallback monogram uses
+// the same hex to keep visual consistency.
+type IconKind = 'brand' | 'generic'
+
+interface PlatformIconSpec {
+  Icon?: ComponentType<SVGProps<SVGSVGElement>>
+  color: string
+  kind: IconKind
+  monogram?: string
+}
+
+const PLATFORM_ICONS: Record<string, PlatformIconSpec> = {
+  telegram: { Icon: SiTelegram, color: '#26A5E4', kind: 'brand' },
+  discord: { Icon: SiDiscord, color: '#5865F2', kind: 'brand' },
+  // Slack removed from Simple Icons by Salesforce request — letter monogram.
+  slack: { color: '#4A154B', kind: 'brand', monogram: 'S' },
+  mattermost: { Icon: SiMattermost, color: '#0058CC', kind: 'brand' },
+  matrix: { Icon: SiMatrix, color: '#000000', kind: 'brand' },
+  signal: { Icon: SiSignal, color: '#3A76F0', kind: 'brand' },
+  whatsapp: { Icon: SiWhatsapp, color: '#25D366', kind: 'brand' },
+  bluebubbles: { Icon: SiApple, color: '#0BD318', kind: 'brand' },
+  homeassistant: { Icon: SiHomeassistant, color: '#18BCF2', kind: 'brand' },
+  email: { Icon: SiGmail, color: '#EA4335', kind: 'brand' },
+  sms: { Icon: MessageSquareText, color: '#F43F5E', kind: 'generic' },
+  webhook: { Icon: LinkIcon, color: '#71717A', kind: 'generic' },
+  api_server: { Icon: Globe, color: '#64748B', kind: 'generic' },
+  weixin: { Icon: SiWechat, color: '#07C160', kind: 'brand' },
+  qqbot: { Icon: SiQq, color: '#EB1923', kind: 'brand' },
+  yuanbao: { Icon: SiBilibili, color: '#FB7299', kind: 'brand' }
+}
+
+interface PlatformAvatarProps {
+  platformId: string
+  platformName: string
+  className?: string
+}
+
+export function PlatformAvatar({ className, platformId, platformName }: PlatformAvatarProps) {
+  const spec = PLATFORM_ICONS[platformId]
+
+  const baseClass = cn(
+    'inline-grid size-6 shrink-0 place-items-center rounded-md text-[length:var(--conversation-caption-font-size)] font-medium',
+    className
+  )
+
+  if (!spec) {
+    return (
+      <span aria-hidden="true" className={cn(baseClass, 'bg-(--ui-bg-tertiary) text-(--ui-text-tertiary)')}>
+        {platformName.charAt(0).toUpperCase()}
+      </span>
+    )
+  }
+
+  const { Icon, color } = spec
+
+  return (
+    <span
+      aria-hidden="true"
+      className={baseClass}
+      style={{
+        // 16% tint of the brand color so the glyph reads against any surface
+        // without the avatar dominating the row.
+        backgroundColor: `color-mix(in srgb, ${color} 16%, transparent)`,
+        color
+      }}
+    >
+      {Icon ? <Icon className="size-3.5" /> : spec.monogram || platformName.charAt(0).toUpperCase()}
+    </span>
+  )
+}

package/agent/apps/desktop/src/app/model-visibility-overlay.tsx

@@ -0,0 +1,31 @@
+import { useStore } from '@nanostores/react'
+
+import { ModelVisibilityDialog } from '@/components/model-visibility-dialog'
+import type { HermesGateway } from '@/hermes'
+import { $modelVisibilityOpen, setModelVisibilityOpen } from '@/store/model-visibility'
+import { $activeSessionId, $gatewayState } from '@/store/session'
+
+interface ModelVisibilityOverlayProps {
+  gateway?: HermesGateway
+  onOpenProviders: () => void
+}
+
+export function ModelVisibilityOverlay({ gateway, onOpenProviders }: ModelVisibilityOverlayProps) {
+  const activeSessionId = useStore($activeSessionId)
+  const gatewayOpen = useStore($gatewayState) === 'open'
+  const open = useStore($modelVisibilityOpen)
+
+  if (!gatewayOpen) {
+    return null
+  }
+
+  return (
+    <ModelVisibilityDialog
+      gw={gateway}
+      onOpenChange={setModelVisibilityOpen}
+      onOpenProviders={onOpenProviders}
+      open={open}
+      sessionId={activeSessionId}
+    />
+  )
+}

package/agent/apps/desktop/src/app/overlays/overlay-search-input.tsx

@@ -1,77 +1,33 @@
-import type { ReactNode, RefObject } from 'react'
+import type { RefObject } from 'react'
 
-import { Button } from '@/components/ui/button'
-import { Codicon } from '@/components/ui/codicon'
-import { Input } from '@/components/ui/input'
-import { Loader2, Search } from '@/lib/icons'
-import { cn } from '@/lib/utils'
+import { SearchField } from '@/components/ui/search-field'
 
 interface OverlaySearchInputProps {
-  placeholder: string
-  value: string
-  onChange: (value: string) => void
   containerClassName?: string
-  inputClassName?: string
-  loading?: boolean
-  onClear?: () => void
   inputRef?: RefObject<HTMLInputElement | null>
-  trailingAction?: ReactNode
+  loading?: boolean
+  onChange: (value: string) => void
+  placeholder: string
+  value: string
 }
 
+// Borderless underline search — matches the tools/skills page (PageSearchShell).
 export function OverlaySearchInput({
-  placeholder,
-  value,
-  onChange,
   containerClassName,
-  inputClassName,
-  loading = false,
-  onClear,
   inputRef,
-  trailingAction
+  loading = false,
+  onChange,
+  placeholder,
+  value
 }: OverlaySearchInputProps) {
-  const clear = onClear ?? (() => onChange(''))
-  const hasTrailing = Boolean(trailingAction)
-
-  return (
-    <div className={cn('relative', containerClassName)}>
-      <Search className="pointer-events-none absolute left-3 top-1/2 z-1 size-3.5 -translate-y-1/2 text-muted-foreground/80" />
-      <Input
-        className={cn(
-          'relative z-0 h-8 rounded-lg py-2 pl-8 text-[length:var(--conversation-text-font-size)]',
-          hasTrailing || loading || value ? 'pr-16' : 'pr-8',
-          inputClassName
-        )}
-        onChange={event => onChange(event.target.value)}
-        placeholder={placeholder}
-        ref={inputRef}
-        value={value}
-      />
-      <div className="absolute right-1.5 top-1/2 z-1 flex -translate-y-1/2 items-center gap-0.5">
-        {trailingAction}
-        {loading ? (
-          <Loader2 className="pointer-events-none size-3.5 animate-spin text-muted-foreground/70" />
-        ) : value ? (
-          <Button
-            aria-label="Clear search"
-            className="text-muted-foreground/85 hover:bg-accent/60 hover:text-foreground"
-            onClick={clear}
-            size="icon-xs"
-            variant="ghost"
-          >
-            <Codicon name="close" size="0.875rem" />
-          </Button>
-        ) : null}
-      </div>
-    </div>
-  )
-}
-
-export function PageSearchInput(props: OverlaySearchInputProps) {
   return (
-    <OverlaySearchInput
-      {...props}
-      containerClassName={cn('mx-auto w-[min(36rem,calc(100%-2rem))] min-w-0', props.containerClassName)}
-      inputClassName={cn('h-8 rounded-lg py-2 pl-8', props.inputClassName)}
+    <SearchField
+      containerClassName={containerClassName}
+      inputRef={inputRef}
+      loading={loading}
+      onChange={onChange}
+      placeholder={placeholder}
+      value={value}
     />
   )
 }

package/agent/apps/desktop/src/app/overlays/overlay-split-layout.tsx

@@ -1,8 +1,12 @@
 import type { ReactNode } from 'react'
 
+import { Button } from '@/components/ui/button'
+import { Codicon } from '@/components/ui/codicon'
 import type { IconComponent } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 
+import { PAGE_INSET_X } from '../layout-constants'
+
 interface OverlaySplitLayoutProps {
   children: ReactNode
   className?: string
@@ -22,6 +26,9 @@ interface OverlayNavItemProps {
   active: boolean
   icon: IconComponent
   label: string
+  // Renders as an indented child of another nav item: smaller icon and a
+  // lighter active state so it never competes with the boxed parent item.
+  nested?: boolean
   onClick: () => void
   trailing?: ReactNode
 }
@@ -43,7 +50,9 @@ export function OverlaySidebar({ children, className }: OverlaySidebarProps) {
   return (
     <aside
       className={cn(
-        'flex min-h-0 flex-col gap-0.5 overflow-y-auto bg-(--ui-sidebar-surface-background) px-2.5 py-3',
+        // pt clears the floating titlebar/header; the bg itself fills from the
+        // card's top edge so there's no surface-colored gap above the sidebar.
+        'flex min-h-0 flex-col gap-0.5 overflow-y-auto bg-(--ui-sidebar-surface-background) px-2.5 pb-3 pt-[calc(var(--titlebar-height)+1rem)]',
         className
       )}
     >
@@ -54,23 +63,66 @@ export function OverlaySidebar({ children, className }: OverlaySidebarProps) {
 
 export function OverlayMain({ children, className }: OverlayMainProps) {
   return (
-    <main className={cn('flex min-h-0 flex-1 flex-col overflow-hidden bg-transparent p-3', className)}>{children}</main>
+    <main
+      className={cn(
+        'flex min-h-0 flex-1 flex-col overflow-hidden bg-transparent pb-3 pt-[calc(var(--titlebar-height)+1rem)]',
+        PAGE_INSET_X,
+        className
+      )}
+    >
+      {children}
+    </main>
+  )
+}
+
+// Boxless "+ New …" action that tops an OverlaySidebar list (profiles, cron, …).
+// The text variant underlines on hover, which also strokes the icon glyph — so
+// we keep the button itself underline-free and underline only the label span.
+export function OverlayNewButton({
+  icon = 'add',
+  label,
+  onClick
+}: {
+  icon?: string
+  label: string
+  onClick: () => void
+}) {
+  return (
+    <Button
+      className="group mb-1 w-full justify-start gap-2 text-muted-foreground hover:bg-transparent hover:text-foreground"
+      onClick={onClick}
+      size="sm"
+      variant="ghost"
+    >
+      <Codicon name={icon} />
+      <span className="underline-offset-4 group-hover:underline">{label}</span>
+    </Button>
   )
 }
 
-export function OverlayNavItem({ active, icon: Icon, label, onClick, trailing }: OverlayNavItemProps) {
+export function OverlayNavItem({ active, icon: Icon, label, nested, onClick, trailing }: OverlayNavItemProps) {
   return (
     <button
       className={cn(
         'flex h-7 w-full items-center justify-start gap-2 rounded-md border px-2 text-left text-[length:var(--conversation-text-font-size)] font-normal transition-colors',
-        active
-          ? 'border-(--ui-stroke-tertiary) bg-(--ui-bg-tertiary) text-foreground'
-          : 'border-transparent bg-transparent text-(--ui-text-secondary) hover:bg-(--chrome-action-hover) hover:text-foreground'
+        nested
+          ? active
+            ? 'border-transparent bg-(--chrome-action-hover) font-medium text-foreground'
+            : 'border-transparent bg-transparent text-(--ui-text-tertiary) hover:bg-(--chrome-action-hover) hover:text-foreground'
+          : active
+            ? 'border-(--ui-stroke-tertiary) bg-(--ui-bg-tertiary) text-foreground'
+            : 'border-transparent bg-transparent text-(--ui-text-secondary) hover:bg-(--chrome-action-hover) hover:text-foreground'
       )}
       onClick={onClick}
       type="button"
     >
-      <Icon className={cn('size-4 shrink-0', active ? 'text-foreground/80' : 'text-muted-foreground/80')} />
+      <Icon
+        className={cn(
+          'shrink-0',
+          nested ? 'size-3.5' : 'size-4',
+          active ? 'text-foreground/80' : 'text-muted-foreground/80'
+        )}
+      />
       <span className="min-w-0 flex-1 truncate">{label}</span>
       {trailing}
     </button>

package/agent/apps/desktop/src/app/overlays/overlay-view.tsx

@@ -2,6 +2,7 @@ import { type ReactNode, useEffect } from 'react'
 
 import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
+import { translateNow } from '@/i18n'
 import { triggerHaptic } from '@/lib/haptics'
 import { cn } from '@/lib/utils'
 
@@ -17,7 +18,7 @@ interface OverlayViewProps {
 export function OverlayView({
   children,
   onClose,
-  closeLabel = 'Close',
+  closeLabel = translateNow('common.close'),
   contentClassName,
   headerContent,
   rootClassName
@@ -64,23 +65,26 @@ export function OverlayView({
       >
         <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-[calc(var(--titlebar-height)+0.1875rem)] [-webkit-app-region:drag]">
           {headerContent && (
-            <div className="pointer-events-auto absolute left-1/2 top-[calc(1rem+var(--titlebar-height)/2)] -translate-x-1/2 -translate-y-1/2 [-webkit-app-region:no-drag]">
+            <div className="pointer-events-auto absolute left-1/2 top-[calc(0.5rem+var(--titlebar-height)/2)] -translate-x-1/2 -translate-y-1/2 [-webkit-app-region:no-drag]">
               {headerContent}
             </div>
           )}
 
           <Button
             aria-label={closeLabel}
-            className="pointer-events-auto absolute right-3 top-[calc(0.1875rem+var(--titlebar-height)/2)] h-7 w-7 -translate-y-1/2 rounded-md text-(--ui-text-tertiary) hover:bg-(--chrome-action-hover) hover:text-foreground [-webkit-app-region:no-drag]"
+            className="pointer-events-auto absolute right-3 top-[calc(0.1875rem+var(--titlebar-height)/2)] -translate-y-1/2 text-(--ui-text-tertiary) hover:bg-(--chrome-action-hover) hover:text-foreground [-webkit-app-region:no-drag]"
             onClick={closeOverlay}
-            size="icon"
+            size="icon-titlebar"
             variant="ghost"
           >
             <Codicon name="close" size="1rem" />
           </Button>
         </div>
 
-        <div className={cn('min-h-0 flex flex-1 flex-col pt-(--titlebar-height)', contentClassName)}>{children}</div>
+        {/* No top padding here: the split-layout columns own their own
+            titlebar clearance so their backgrounds run flush to the card top
+            (otherwise the card surface shows as a gap above the sidebar). */}
+        <div className={cn('min-h-0 flex flex-1 flex-col', contentClassName)}>{children}</div>
       </div>
     </div>
   )

package/agent/apps/desktop/src/app/page-search-shell.tsx

@@ -1,26 +1,32 @@
 import type { ReactNode } from 'react'
 
+import { SearchField } from '@/components/ui/search-field'
 import { cn } from '@/lib/utils'
 
-import { PageSearchInput } from './overlays/overlay-search-input'
-
 interface PageSearchShellProps extends React.ComponentProps<'section'> {
   children: ReactNode
+  /** Primary tabs shown on the top row, beside the search. */
+  tabs?: ReactNode
+  /** Secondary filters shown full-width on their own row below (expands). */
   filters?: ReactNode
   onSearchChange: (value: string) => void
   searchPlaceholder: string
   searchTrailingAction?: ReactNode
   searchValue: string
+  /** Hide the search field when there's nothing to search (empty dataset). */
+  searchHidden?: boolean
 }
 
 export function PageSearchShell({
   children,
   className,
+  tabs,
   filters,
   onSearchChange,
   searchPlaceholder,
   searchTrailingAction,
   searchValue,
+  searchHidden = false,
   ...props
 }: PageSearchShellProps) {
   return (
@@ -28,24 +34,40 @@ export function PageSearchShell({
       {...props}
       className={cn('flex h-full min-w-0 flex-col overflow-hidden bg-(--ui-chat-surface-background)', className)}
     >
-      <div className="relative z-10 grid gap-2 border-b border-(--ui-stroke-tertiary) px-3 py-2.5">
-        {/* Reserve the top-right titlebar tools + native window-controls
-            footprint so the full-width search input never slides under them
-            (this header sits in the titlebar row at the window top). */}
-        <div
-          style={{
-            paddingRight:
-              'max(0px, calc(var(--titlebar-tools-right, 0px) + var(--titlebar-tools-width, 0px) - 0.75rem))'
-          }}
-        >
-          <PageSearchInput
-            onChange={onSearchChange}
-            placeholder={searchPlaceholder}
-            trailingAction={searchTrailingAction}
-            value={searchValue}
-          />
-        </div>
-        {filters ? <div className="flex flex-wrap items-center justify-center gap-1.5">{filters}</div> : null}
+      {/*
+        Header lives in the page body, below the window chrome (the shell floats
+        traffic lights over the top titlebar-height strip, which the `pt` clears
+        and leaves draggable). Top row: primary tabs + search. Second row:
+        secondary filters, full-width so they expand. Interactive bits opt out
+        of the drag region.
+      */}
+      {/*
+        IMPORTANT: do NOT put `-webkit-app-region: drag` on this header. It spans
+        full width over the band where the floating titlebar icon clusters live,
+        and an overlapping OS drag region eats their clicks at the compositor
+        level (pointer-events / no-drag carve-outs across separate stacking
+        contexts don't reliably fix it on macOS). The shell already supplies a
+        draggable titlebar strip that is `calc()`'d around the icon clusters
+        (see app-shell.tsx), so window dragging still works here.
+      */}
+      <div className="shrink-0">
+        {(tabs || !searchHidden) && (
+          <div className="flex items-center gap-3 px-3 pb-2 pt-[calc(var(--titlebar-height)+0.5rem)]">
+            {tabs ? <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1">{tabs}</div> : null}
+            {!searchHidden && (
+              <div className={cn('flex shrink-0 items-center', !tabs && 'flex-1')}>
+                <SearchField
+                  containerClassName="max-w-[45vw]"
+                  onChange={onSearchChange}
+                  placeholder={searchPlaceholder}
+                  trailingAction={searchTrailingAction}
+                  value={searchValue}
+                />
+              </div>
+            )}
+          </div>
+        )}
+        {filters ? <div className="flex flex-wrap items-center gap-x-2 gap-y-1 px-3 pb-2">{filters}</div> : null}
       </div>
       <div className="min-h-0 flex-1 overflow-hidden bg-(--ui-chat-surface-background)">{children}</div>
     </section>

package/agent/apps/desktop/src/app/profiles/create-profile-dialog.tsx

@@ -0,0 +1,165 @@
+import { useEffect, useState } from 'react'
+
+import { ActionStatus } from '@/components/ui/action-status'
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Textarea } from '@/components/ui/textarea'
+import { createProfile, updateProfileSoul } from '@/hermes'
+import { useI18n } from '@/i18n'
+import { AlertTriangle } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+import type { ProfileInfo } from '@/types/hermes'
+
+const PROFILE_NAME_RE = /^[a-z0-9][a-z0-9_-]{0,63}$/
+
+export function isValidProfileName(name: string): boolean {
+  return PROFILE_NAME_RE.test(name.trim())
+}
+
+// Self-contained create flow (name + clone toggle + optional SOUL.md). Owns the
+// createProfile/updateProfileSoul calls so every caller just refreshes/selects
+// via onCreated. SOUL left blank keeps the cloned/blank persona untouched.
+export function CreateProfileDialog({
+  onClose,
+  onCreated,
+  open,
+  profiles = []
+}: {
+  onClose: () => void
+  onCreated?: (name: string) => Promise<void> | void
+  open: boolean
+  profiles?: ProfileInfo[]
+}) {
+  const { t } = useI18n()
+  const p = t.profiles
+  const [name, setName] = useState('')
+  const [cloneFrom, setCloneFrom] = useState<null | string>('default')
+  const [soul, setSoul] = useState('')
+  const [status, setStatus] = useState<'done' | 'idle' | 'saving'>('idle')
+  const [error, setError] = useState<null | string>(null)
+
+  useEffect(() => {
+    if (!open) {
+      return
+    }
+
+    setName('')
+    setCloneFrom('default')
+    setSoul('')
+    setError(null)
+    setStatus('idle')
+  }, [open])
+
+  const trimmed = name.trim()
+  const invalid = trimmed !== '' && !isValidProfileName(trimmed)
+  const busy = status === 'saving' || status === 'done'
+
+  async function handleSubmit(event: React.FormEvent) {
+    event.preventDefault()
+
+    if (!trimmed || invalid) {
+      setError(invalid ? p.invalidName(p.nameHint) : p.nameRequired)
+
+      return
+    }
+
+    setStatus('saving')
+    setError(null)
+
+    try {
+      await createProfile({ name: trimmed, clone_from: cloneFrom })
+
+      if (soul.trim()) {
+        await updateProfileSoul(trimmed, soul)
+      }
+
+      await onCreated?.(trimmed)
+      setStatus('done')
+      window.setTimeout(onClose, 800)
+    } catch (err) {
+      setStatus('idle')
+      setError(err instanceof Error ? err.message : p.failedCreate)
+    }
+  }
+
+  return (
+    <Dialog onOpenChange={value => !value && !busy && onClose()} open={open}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>{p.newProfile}</DialogTitle>
+          <DialogDescription>{p.createDesc}</DialogDescription>
+        </DialogHeader>
+
+        <form className="grid gap-4" onSubmit={handleSubmit}>
+          <div className="grid gap-1.5">
+            <label className="text-xs font-medium" htmlFor="new-profile-name">
+              {p.nameLabel}
+            </label>
+            <Input
+              aria-invalid={invalid}
+              autoFocus
+              id="new-profile-name"
+              onChange={event => setName(event.target.value)}
+              placeholder="my-profile"
+              value={name}
+            />
+            <p className={cn('text-[0.66rem] leading-4', invalid ? 'text-destructive' : 'text-muted-foreground')}>
+              {p.nameHint}
+            </p>
+          </div>
+
+          <div className="grid gap-1.5">
+            <label className="text-xs font-medium" htmlFor="new-profile-clone-from">
+              {p.cloneFrom}
+            </label>
+            <Select onValueChange={value => setCloneFrom(value === '__none__' ? null : value)} value={cloneFrom ?? '__none__'}>
+              <SelectTrigger className="h-9 rounded-md" id="new-profile-clone-from">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__none__">{p.cloneFromNone}</SelectItem>
+                {profiles.map(profile => (
+                  <SelectItem key={profile.name} value={profile.name}>
+                    {profile.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <p className="text-xs text-muted-foreground">{p.cloneFromDesc}</p>
+          </div>
+
+          <div className="grid gap-1.5">
+            <label className="text-xs font-medium" htmlFor="new-profile-soul">
+              SOUL.md <span className="font-normal text-muted-foreground">- {p.soulOptional}</span>
+            </label>
+            <Textarea
+              className="min-h-28 font-mono text-xs leading-5"
+              id="new-profile-soul"
+              onChange={event => setSoul(event.target.value)}
+              placeholder={p.soulPlaceholder(cloneFrom ? p.soulPlaceholderCloned : p.soulPlaceholderEmpty)}
+              value={soul}
+            />
+          </div>
+
+          {error && (
+            <div className="flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
+              <AlertTriangle className="mt-0.5 size-3.5 shrink-0" />
+              <span>{error}</span>
+            </div>
+          )}
+
+          <DialogFooter>
+            <Button disabled={busy} onClick={onClose} type="button" variant="ghost">
+              {t.common.cancel}
+            </Button>
+            <Button disabled={busy || !trimmed || invalid} type="submit">
+              <ActionStatus busy={p.creating} done={p.created} idle={p.createAction} state={status} />
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}