feat(desktop): composer/intro polish + shared ErrorState

- Composer single-line row centers (was bottom-aligned); placeholder randomizes per session (starter vs follow-up) without mid-stream flip. - Drop chat header on brand-new sessions (dead label + border). - ⌘N flashes its sidebar hint; ⌘. toggles the command center. - Intro wordmark fills width (drop 8rem fit cap). - Unify error states on a shared ErrorState component (boundary + updates).
2026-06-04 00:19:05 -05:00
parent 3a5e36cfa5
commit 5bb7156949
8 changed files with 188 additions and 71 deletions
--- a/apps/desktop/src/app/chat/composer/index.tsx
+++ b/apps/desktop/src/app/chat/composer/index.tsx
@ -81,6 +81,31 @@ const COMPOSER_SINGLE_LINE_MAX_PX = 36
 const COMPOSER_FADE_BACKGROUND =
  'linear-gradient(to bottom, transparent, color-mix(in srgb, var(--dt-background) 10%, transparent))'

+// Resting composer placeholders. New sessions get open-ended starters; an
+// existing chat gets phrasings that read as a continuation of the thread.
+// One is picked at random per session (stable until the session changes).
+const NEW_SESSION_PLACEHOLDERS = [
+  'What are we building?',
+  'Give Hermes a task',
+  "What's on your mind?",
+  'Describe what you need',
+  'What should we tackle?',
+  'Ask anything',
+  'Start with a goal'
+]
+
+const FOLLOW_UP_PLACEHOLDERS = [
+  'Send a follow-up',
+  'Add more context',
+  'Refine the request',
+  "What's next?",
+  'Keep it going',
+  'Push it further',
+  'Adjust or continue'
+]
+
+const pickPlaceholder = (pool: readonly string[]) => pool[Math.floor(Math.random() * pool.length)]
+
 interface QueueEditState {
  attachments: ComposerAttachment[]
  draft: string
@ -163,6 +188,33 @@ export function ChatBar({

  const gatewayState = useStore($gatewayState)

+  // Resting placeholder: a starter for brand-new sessions, a continuation for
+  // existing ones. Picked once and only re-rolled when we genuinely move to a
+  // *different* conversation. Critically, the first id assignment of a freshly
+  // started session (null → id, on the first send) is treated as the same
+  // conversation so the placeholder doesn't visibly flip mid-stream.
+  const [restingPlaceholder, setRestingPlaceholder] = useState(() =>
+    pickPlaceholder(sessionId ? FOLLOW_UP_PLACEHOLDERS : NEW_SESSION_PLACEHOLDERS)
+  )
+  const prevSessionIdRef = useRef(sessionId)
+
+  useEffect(() => {
+    const prev = prevSessionIdRef.current
+    prevSessionIdRef.current = sessionId
+
+    if (prev === sessionId) {
+      return
+    }
+
+    // null → id: the new session we're already in just got persisted. Keep the
+    // starter we showed instead of swapping to a follow-up under the user.
+    if (prev == null && sessionId) {
+      return
+    }
+
+    setRestingPlaceholder(pickPlaceholder(sessionId ? FOLLOW_UP_PLACEHOLDERS : NEW_SESSION_PLACEHOLDERS))
+  }, [sessionId])
+
  // When the bar is disabled it's because the gateway isn't open. Distinguish a
  // cold start ("Starting Hermes...") from a dropped connection we're trying to
  // restore (e.g. after the Mac slept) so the stuck state reads as recoverable.
@ -170,7 +222,7 @@ export function ChatBar({
    ? gatewayState === 'closed' || gatewayState === 'error'
      ? 'Reconnecting to Hermes…'
      : 'Starting Hermes...'
-    : 'Send follow-up'
+    : restingPlaceholder

  const focusInput = useCallback(() => {
    focusComposerInput(editorRef.current)
@ -1285,7 +1337,7 @@ export function ChatBar({
                    'grid w-full',
                    stacked
                      ? 'grid-cols-[auto_1fr] gap-(--composer-row-gap) [grid-template-areas:"input_input"_"menu_controls"]'
-                      : 'grid-cols-[auto_1fr_auto] items-end gap-(--composer-control-gap) [grid-template-areas:"menu_input_controls"]'
+                      : 'grid-cols-[auto_1fr_auto] items-center gap-(--composer-control-gap) [grid-template-areas:"menu_input_controls"]'
                  )}
                >
                  <div className="flex items-center [grid-area:menu]">{contextMenu}</div>
--- a/apps/desktop/src/app/chat/index.tsx
+++ b/apps/desktop/src/app/chat/index.tsx
@ -110,6 +110,13 @@ function ChatHeader({
      ? pinnedSessionIds.includes(selectedSessionId)
      : false

+  // A brand-new session has no session to pin/delete/rename, so the header is
+  // just a dead "New session" label + chevron. Drop it (and its border)
+  // entirely until there's a real session to act on.
+  if (!selectedSessionId && !activeSessionId && !isRoutedSessionView) {
+    return null
+  }
+
  return (
    <header className={cn(titlebarHeaderBaseClass, isRoutedSessionView && titlebarHeaderShadowClass)}>
      <div className="min-w-0 flex-1">
--- a/apps/desktop/src/app/chat/sidebar/index.tsx
+++ b/apps/desktop/src/app/chat/sidebar/index.tsx
@ -230,8 +230,28 @@ export function ChatSidebar({
  const [workspaceOrderIds, setWorkspaceOrderIds] = useState<string[]>([])
  const [searchQuery, setSearchQuery] = useState('')
  const [serverMatches, setServerMatches] = useState<SessionSearchResult[]>([])
+  const [newSessionKbdFlash, setNewSessionKbdFlash] = useState(false)
  const trimmedQuery = searchQuery.trim()

+  // Flash the ⌘N hint full-opacity (no transition) for the press, so hitting
+  // the shortcut visibly pings its affordance in the sidebar.
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout> | undefined
+
+    const onShortcut = () => {
+      setNewSessionKbdFlash(true)
+      clearTimeout(timeout)
+      timeout = setTimeout(() => setNewSessionKbdFlash(false), 140)
+    }
+
+    window.addEventListener('hermes:new-session-shortcut', onShortcut)
+
+    return () => {
+      window.removeEventListener('hermes:new-session-shortcut', onShortcut)
+      clearTimeout(timeout)
+    }
+  }, [])
+
  const activeSidebarSessionId = currentView === 'chat' ? selectedSessionId : null

  const dndSensors = useSensors(
@ -449,7 +469,10 @@ export function ChatSidebar({
                        <>
                          <span className="min-w-0 flex-1 truncate max-[46.25rem]:hidden">{item.label}</span>
                          {item.id === 'new-session' && (
-                            <KbdGroup className="ml-auto max-[46.25rem]:hidden" keys={[...NEW_SESSION_KBD]} />
+                            <KbdGroup
+                              className={cn('ml-auto max-[46.25rem]:hidden', newSessionKbdFlash && 'opacity-100!')}
+                              keys={[...NEW_SESSION_KBD]}
+                            />
                          )}
                        </>
                      )}
--- a/apps/desktop/src/app/desktop-controller.tsx
+++ b/apps/desktop/src/app/desktop-controller.tsx
@ -216,6 +216,20 @@ export function DesktopController() {
    return () => window.removeEventListener('keydown', onKeyDown)
  }, [])

+  // Cmd/Ctrl+. toggles the command center (sessions / system / usage).
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey && event.key === '.') {
+        event.preventDefault()
+        toggleCommandCenter()
+      }
+    }
+
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [toggleCommandCenter])
+
  const refreshSessions = useCallback(async () => {
    const requestId = refreshSessionsRequestRef.current + 1
    refreshSessionsRequestRef.current = requestId
@ -435,6 +449,8 @@ export function DesktopController() {

      event.preventDefault()
      startFreshSessionDraft()
+      // Briefly light up the sidebar's ⌘N hint so the shortcut is discoverable.
+      window.dispatchEvent(new CustomEvent('hermes:new-session-shortcut'))
    }

    window.addEventListener('keydown', onKeyDown)
--- a/apps/desktop/src/app/updates-overlay.tsx
+++ b/apps/desktop/src/app/updates-overlay.tsx
@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
 import { Button } from '@/components/ui/button'
 import { writeClipboardText } from '@/components/ui/copy-button'
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/ui/dialog'
+import { ErrorState } from '@/components/ui/error-state'
 import type { DesktopUpdateCommit, DesktopUpdateStage, DesktopUpdateStatus } from '@/global'
 import { buildCommitChangelog, type CommitGroup } from '@/lib/commit-changelog'
 import { AlertCircle, Check, CheckCircle2, Copy, Loader2, Sparkles, Terminal } from '@/lib/icons'
@ -331,31 +332,22 @@ function ApplyingView({ apply }: { apply: UpdateApplyState }) {

 function ErrorView({ message, onDismiss, onRetry }: { message: string; onDismiss: () => void; onRetry: () => void }) {
  return (
-    <div className="grid gap-5 px-6 pb-6 pt-7 pr-8">
-      <div className="flex flex-col items-center gap-3 text-center">
-        <span className="flex size-14 items-center justify-center rounded-2xl bg-destructive/10 text-destructive">
-          <AlertCircle className="size-7" />
-        </span>
-
-        <DialogTitle className="text-center text-xl">Update didn’t finish</DialogTitle>
-        <DialogDescription className="text-center text-sm">
+    <ErrorState
+      className="px-6 pb-6 pt-7 pr-8"
+      description={
+        <DialogDescription className="max-w-prose text-center text-sm leading-5 text-muted-foreground">
          {message || 'No worries — nothing was lost. You can try again now.'}
        </DialogDescription>
-      </div>
-
-      <div className="grid gap-2">
-        <Button className="font-semibold" onClick={onRetry} size="lg">
-          Try again
-        </Button>
-        <button
-          className="text-center text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
-          onClick={onDismiss}
-          type="button"
-        >
-          Not now
-        </button>
-      </div>
-    </div>
+      }
+      title={<DialogTitle className="text-center text-xl font-semibold tracking-tight">Update didn’t finish</DialogTitle>}
+    >
+      <Button className="font-semibold" onClick={onRetry} size="lg">
+        Try again
+      </Button>
+      <Button onClick={onDismiss} variant="text">
+        Not now
+      </Button>
+    </ErrorState>
  )
 }

--- a/apps/desktop/src/components/chat/intro.tsx
+++ b/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)

@ -155,7 +157,6 @@ function resolveCopy(personality?: string, seed?: number): IntroCopy {
 export function Intro({ personality, seed }: IntroProps) {
  const [mountSeed] = useState(() => Math.floor(Math.random() * 100000))
  const copy = resolveCopy(personality, mountSeed + (seed ?? 0))
-
  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"
@ -163,15 +164,14 @@ export function Intro({ personality, seed }: IntroProps) {
    >
      <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-3 w-[88%] 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-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>
--- a/apps/desktop/src/components/error-boundary.tsx
+++ b/apps/desktop/src/components/error-boundary.tsx
@ -1,7 +1,7 @@
 import { Component, type ErrorInfo, type ReactNode } from 'react'

 import { Button } from '@/components/ui/button'
-import { AlertTriangle, RefreshCw } from '@/lib/icons'
+import { ErrorState } from '@/components/ui/error-state'

 export interface ErrorBoundaryFallbackProps {
  error: Error
@ -53,43 +53,25 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt

 function RootErrorFallback({ error, reset }: ErrorBoundaryFallbackProps) {
  return (
-    <div className="fixed inset-0 z-[1500] flex items-center justify-center bg-(--ui-chat-surface-background) p-6">
-      <div className="w-full max-w-[40rem] overflow-hidden rounded-xl border border-(--ui-stroke-secondary) bg-(--ui-chat-bubble-background) shadow-sm">
-        <div className="flex items-start gap-3 border-b border-(--ui-stroke-tertiary) px-5 py-4">
-          <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-destructive/10 text-destructive">
-            <AlertTriangle className="size-5" />
-          </div>
-          <div>
-            <h2 className="text-[0.9375rem] font-semibold tracking-tight">Something broke in the interface</h2>
-            <p className="mt-1 text-[0.8125rem] leading-5 text-(--ui-text-tertiary)">
-              The view hit an unexpected error. Your chats and settings are safe - try again, or reload the window.
-            </p>
-          </div>
-        </div>
-
-        <div className="grid gap-4 p-5">
-          <div className="rounded-md border border-destructive/30 bg-destructive/10 px-4 py-3 font-mono text-[0.7rem] leading-4 text-destructive">
-            {error.message || String(error)}
-          </div>
-
-          <div className="flex flex-wrap items-center gap-2.5">
-            <Button onClick={reset}>
-              <RefreshCw className="size-4" />
-              Try again
-            </Button>
-            <Button onClick={() => window.location.reload()} variant="text">
-              Reload window
-            </Button>
-            <Button
-              className="ml-auto"
-              onClick={() => void window.hermesDesktop?.revealLogs()?.catch(() => undefined)}
-              variant="text"
-            >
-              Open logs
-            </Button>
-          </div>
-        </div>
-      </div>
+    <div className="fixed inset-0 z-[1500] grid place-items-center bg-(--ui-chat-surface-background) p-6">
+      <ErrorState
+        className="w-full max-w-[28rem]"
+        description={error.message || 'The view hit an unexpected error. Your chats and settings are safe.'}
+        title="Something broke in the interface"
+      >
+        <Button className="font-semibold" onClick={reset} size="lg">
+          Try again
+        </Button>
+        <Button onClick={() => window.location.reload()} variant="text">
+          Reload window
+        </Button>
+        <Button
+          onClick={() => void window.hermesDesktop?.revealLogs()?.catch(() => undefined)}
+          variant="text"
+        >
+          Open logs
+        </Button>
+      </ErrorState>
    </div>
  )
 }
--- a/apps/desktop/src/components/ui/error-state.tsx
+++ b/apps/desktop/src/components/ui/error-state.tsx
@ -0,0 +1,45 @@
+import type { ReactNode } from 'react'
+
+import { AlertCircle } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+
+export interface ErrorStateProps {
+  /** Optional actions row/stack rendered below the copy. */
+  children?: ReactNode
+  className?: string
+  description?: ReactNode
+  /** Defaults to a destructive AlertCircle. */
+  icon?: ReactNode
+  title: ReactNode
+}
+
+// Shared, presentation-only error layout: a destructive icon chip over a
+// centered title + body, with an optional actions stack. Used by both the
+// top-level React error boundary and the in-dialog update error so every
+// failure state reads the same. Title/description accept nodes so callers in a
+// Radix Dialog can pass DialogTitle/DialogDescription for accessibility.
+export function ErrorState({ children, className, description, icon, title }: ErrorStateProps) {
+  return (
+    <div className={cn('grid gap-5', className)}>
+      <div className="flex flex-col items-center gap-3 text-center">
+        <span className="flex size-14 items-center justify-center rounded-2xl bg-destructive/10 text-destructive">
+          {icon ?? <AlertCircle className="size-7" />}
+        </span>
+
+        {typeof title === 'string' ? (
+          <h2 className="text-center text-xl font-semibold tracking-tight">{title}</h2>
+        ) : (
+          title
+        )}
+
+        {typeof description === 'string' ? (
+          <p className="max-w-prose text-center text-sm leading-5 text-muted-foreground">{description}</p>
+        ) : (
+          description
+        )}
+      </div>
+
+      {children && <div className="grid gap-2">{children}</div>}
+    </div>
+  )
+}