+
+ )
+}
diff --git a/ui/desktop/frontend/src/components/chat/ActivityIndicator.tsx b/ui/desktop/frontend/src/components/chat/ActivityIndicator.tsx
new file mode 100644
index 00000000..8294b96f
--- /dev/null
+++ b/ui/desktop/frontend/src/components/chat/ActivityIndicator.tsx
@@ -0,0 +1,100 @@
+import { useTranslation } from 'react-i18next'
+
+interface ActivityIndicatorProps {
+ phase: string
+ tool?: string
+ iteration?: number
+}
+
+const PHASE_COLOR: Record
+ {emoji || name.charAt(0).toUpperCase()}
+
+
+
+
+ )
+}
+
+function PhaseIcon({ phase, color }: { phase: string; color: string }) {
+ const cls = `w-3.5 h-3.5 ${color}`
+
+ switch (phase) {
+ case 'thinking':
+ // Brain icon
+ return (
+
+ )
+ case 'tool_exec':
+ // Wrench icon
+ return (
+
+ )
+ case 'retrying':
+ // RefreshCw icon
+ return (
+
+ )
+ default:
+ // Bouncing dots fallback
+ return (
+
+ {[0, 150, 300].map((delay) => (
+
+ ))}
+
+ )
+ }
+}
diff --git a/ui/desktop/frontend/src/components/chat/AuthImage.tsx b/ui/desktop/frontend/src/components/chat/AuthImage.tsx
new file mode 100644
index 00000000..a31f0528
--- /dev/null
+++ b/ui/desktop/frontend/src/components/chat/AuthImage.tsx
@@ -0,0 +1,30 @@
+import { useMediaUrl } from '../../hooks/use-media-url'
+import { SaveFile } from '../../../wailsjs/go/main/App'
+
+interface AuthImageProps {
+ src: string
+ alt?: string
+ className?: string
+ onClick?: () => void
+}
+
+/** Image with blob-cached src to prevent flickering on session switch. */
+export function AuthImage({ src, alt, className, onClick }: AuthImageProps) {
+ const cachedSrc = useMediaUrl(src)
+
+ if (!cachedSrc) {
+ return
+ }
+
+ return
+
+ )
+}
+
+/** Empty state with logo and clickable suggested prompts */
+function EmptyState({ agentName, onSuggestion }: { agentName?: string; onSuggestion?: (text: string) => void }) {
+ const { t } = useTranslation('desktop')
+ const suggestions = t('chat.suggestions', { returnObjects: true }) as string[]
+ return (
+
+ {/* Messages area */}
+
+
+
+
+ {/* Team task panel */}
+
+ {!selectedAgent && (
+
+
+
+
+ )}
+ {selectedAgent && !hasMessages && {t('loading')}
+
+ 
+
+ )
+}
diff --git a/ui/desktop/frontend/src/components/chat/ChatTopBar.tsx b/ui/desktop/frontend/src/components/chat/ChatTopBar.tsx
new file mode 100644
index 00000000..78a84e97
--- /dev/null
+++ b/ui/desktop/frontend/src/components/chat/ChatTopBar.tsx
@@ -0,0 +1,178 @@
+import { useState, useRef, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAgents } from '../../hooks/use-agents'
+import { useUiStore } from '../../stores/ui-store'
+import { LANGUAGES, getAllTimezones } from '../../lib/constants'
+
+function LanguagePicker() {
+ const locale = useUiStore((s) => s.locale)
+ const setLocale = useUiStore((s) => s.setLocale)
+ const { i18n } = useTranslation()
+ const [open, setOpen] = useState(false)
+ const ref = useRef
+ + {agentName + ? t('chat.emptyTitle', { name: agentName }) + : t('chat.emptyTitleDefault')} +
++ {agentName ? t('chat.emptyDescAgent') : t('chat.emptyDescNoAgent')} +
+ {agentName && ( +
+ {suggestions.map((prompt) => (
+
+ ))}
+
+ )}
+ + Press ⌘N {t('sidebar.newChat').toLowerCase()} +
+
+
+ {open && (
+
+ )
+}
+
+function TimezonePicker() {
+ const timezone = useUiStore((s) => s.timezone)
+ const setTimezone = useUiStore((s) => s.setTimezone)
+ const [open, setOpen] = useState(false)
+ const [search, setSearch] = useState('')
+ const ref = useRef
+ {LANGUAGES.map((lang) => (
+
+ ))}
+
+ )}
+
+
+ {open && (
+
+ )
+}
+
+export function ChatTopBar() {
+ const { selectedAgent } = useAgents()
+ const toggleSidebar = useUiStore((s) => s.toggleSidebar)
+ const sidebarOpen = useUiStore((s) => s.sidebarOpen)
+
+ return (
+
+
+ )}
+
+ setSearch(e.target.value)}
+ placeholder="Search timezone..."
+ className="w-full px-2 py-1 text-xs bg-surface-tertiary border border-border rounded text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent"
+ autoFocus
+ />
+
+
+ {filtered.slice(0, 50).map((tz) => (
+
+ ))}
+
+
+ {/* Sidebar toggle */}
+ {!sidebarOpen && (
+
+ )}
+
+ {/* Agent info */}
+
+ )
+}
diff --git a/ui/desktop/frontend/src/components/chat/CodeBlock.tsx b/ui/desktop/frontend/src/components/chat/CodeBlock.tsx
new file mode 100644
index 00000000..8a5942cf
--- /dev/null
+++ b/ui/desktop/frontend/src/components/chat/CodeBlock.tsx
@@ -0,0 +1,47 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
+
+interface CodeBlockProps {
+ language: string
+ code: string
+}
+
+export function CodeBlock({ language, code }: CodeBlockProps) {
+ const { t } = useTranslation('common')
+ const [copied, setCopied] = useState(false)
+
+ const handleCopy = async () => {
+ await navigator.clipboard.writeText(code)
+ setCopied(true)
+ setTimeout(() => setCopied(false), 2000)
+ }
+
+ return (
+
+ {selectedAgent ? (
+
+
+ {/* Top right pickers */}
+
+ {selectedAgent.name}
+
+ {selectedAgent.model}
+
+
+ ) : (
+ Select an agent to start chatting
+ )}
+
+
+
+
+ {code}
+
+
+ )
+}
diff --git a/ui/desktop/frontend/src/components/chat/FileButton.tsx b/ui/desktop/frontend/src/components/chat/FileButton.tsx
new file mode 100644
index 00000000..dfaa7c49
--- /dev/null
+++ b/ui/desktop/frontend/src/components/chat/FileButton.tsx
@@ -0,0 +1,84 @@
+import { useState } from 'react'
+import { createPortal } from 'react-dom'
+import { useTranslation } from 'react-i18next'
+import { FilePreviewDialog } from './FilePreviewDialog'
+import { downloadFile } from './AuthImage'
+
+export interface FileButtonProps {
+ url: string
+ filename: string
+ mimeType?: string
+ size?: number
+}
+
+function formatFileSize(bytes: number): string {
+ if (bytes < 1024) return `${bytes} B`
+ if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+ return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+function fileIcon(name: string): string {
+ if (/\.(md|markdown)$/i.test(name)) return '📝'
+ if (/\.(ts|tsx|js|jsx|py|go|rs|java|c|cpp|h|rb|sh|yaml|yml|toml)$/i.test(name)) return '💻'
+ if (/\.(zip|tar|gz|rar|7z)$/i.test(name)) return '📦'
+ if (/\.(csv|xls|xlsx)$/i.test(name)) return '📊'
+ if (/\.(pdf)$/i.test(name)) return '📕'
+ if (/\.(json|xml|html|css)$/i.test(name)) return '📋'
+ return '📄'
+}
+
+function truncateName(name: string, max = 30): string {
+ if (name.length <= max) return name
+ const ext = name.includes('.') ? name.slice(name.lastIndexOf('.')) : ''
+ return name.slice(0, max - ext.length - 1) + '…' + ext
+}
+
+export function FileButton({ url, filename, mimeType, size }: FileButtonProps) {
+ const { t } = useTranslation('common')
+ const [previewOpen, setPreviewOpen] = useState(false)
+
+ // Strip timestamp from filename for display: "file.1774537056.md" → "file.md"
+ const displayName = filename.split('?')[0].replace(/\.\d{9,}(\.\w+)$/, '$1')
+
+ return (
+ <>
+
+
+
+
+
+ {previewOpen && createPortal(
+
+ {language}
+
+
+
+
+ )
+ }
+ if (textContent === null) {
+ return {t('errors.serverError', 'Failed to load file preview')}
+ +{t('loading')}
+ } + if (isMarkdown(filename)) { + // Resolve relative image/link paths in markdown against the file's directory URL + const baseDir = url.substring(0, url.lastIndexOf('/') + 1) + const resolved = textContent.replace( + /(!?\[.*?\])\((?!https?:\/\/|\/|#)(.*?)\)/g, + (_, prefix, relPath) => `${prefix}(${baseDir}${relPath})`, + ) + return ( +
+
+ )
+ }
+ if (isCode(filename)) {
+ return (
+
+
+ {textContent}
+
+
+ )
+ }
+ // plain text / log / csv
+ return (
+
+ {textContent}
+
+ )
+ }
+ return (
+
+
+ )
+ }
+
+ return (
+ {t('selectFileToView')}
+ +
+
+ )
+}
diff --git a/ui/desktop/frontend/src/components/chat/ImageLightbox.tsx b/ui/desktop/frontend/src/components/chat/ImageLightbox.tsx
new file mode 100644
index 00000000..c48376f3
--- /dev/null
+++ b/ui/desktop/frontend/src/components/chat/ImageLightbox.tsx
@@ -0,0 +1,118 @@
+import { useEffect, useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AuthImage, downloadFile } from './AuthImage'
+
+export interface LightboxImage {
+ src: string
+ alt?: string
+}
+
+interface ImageLightboxProps {
+ src: string
+ alt?: string
+ onClose: () => void
+ /** Gallery mode */
+ images?: LightboxImage[]
+ currentIndex?: number
+ onNavigate?: (index: number) => void
+}
+
+const btnClass =
+ 'rounded-full bg-white/90 dark:bg-neutral-800/90 p-2.5 text-neutral-700 dark:text-neutral-200 shadow-md ring-1 ring-black/10 dark:ring-white/10 hover:bg-white dark:hover:bg-neutral-700 transition-colors cursor-pointer'
+
+export function ImageLightbox(props: ImageLightboxProps) {
+ const { t } = useTranslation('common')
+ const { onClose, images, currentIndex, onNavigate } = props
+ const isGallery = images && images.length > 1 && onNavigate && currentIndex != null
+ const current = isGallery ? images[currentIndex] : { src: props.src, alt: props.alt }
+ const canPrev = isGallery && currentIndex > 0
+ const canNext = isGallery && currentIndex < images.length - 1
+
+ const handleKeyDown = useCallback(
+ (e: KeyboardEvent) => {
+ if (e.key === 'Escape') { e.preventDefault(); onClose() }
+ if (isGallery) {
+ if (e.key === 'ArrowLeft' && canPrev) { e.preventDefault(); onNavigate(currentIndex - 1) }
+ if (e.key === 'ArrowRight' && canNext) { e.preventDefault(); onNavigate(currentIndex + 1) }
+ }
+ },
+ [onClose, isGallery, canPrev, canNext, onNavigate, currentIndex],
+ )
+
+ useEffect(() => {
+ document.addEventListener('keydown', handleKeyDown)
+ return () => document.removeEventListener('keydown', handleKeyDown)
+ }, [handleKeyDown])
+
+ return (
+ e.stopPropagation()}
+ >
+ {/* Header */}
+
+
+ {displayName}
+
+
+
+
+ {/* Content */}
+
+ {renderContent()}
+
+
+ {/* Close + Download toolbar */}
+
+ )
+}
diff --git a/ui/desktop/frontend/src/components/chat/InputBar.tsx b/ui/desktop/frontend/src/components/chat/InputBar.tsx
new file mode 100644
index 00000000..faeb1a6a
--- /dev/null
+++ b/ui/desktop/frontend/src/components/chat/InputBar.tsx
@@ -0,0 +1,299 @@
+import { useState, useRef, useCallback, type KeyboardEvent, type DragEvent } from 'react'
+import { useTranslation } from 'react-i18next'
+
+/** A file queued for upload or a direct filesystem path (desktop). */
+export interface AttachedFile {
+ id: string
+ /** Browser File object — present for drag/drop and file picker uploads. */
+ file?: File
+ /** Direct filesystem path — present for pasted paths (desktop only, skip HTTP upload). */
+ localPath?: string
+ name: string
+ /** Image thumbnail data URL (only for browser File images). */
+ preview?: string
+}
+
+interface InputBarProps {
+ onSend: (text: string, files?: AttachedFile[]) => void
+ onStop?: () => void
+ disabled?: boolean
+ isRunning?: boolean
+ placeholder?: string
+}
+
+/** Human-readable file size. */
+function formatSize(bytes: number): string {
+ if (bytes < 1024) return `${bytes} B`
+ if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`
+ return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+/** Detect if text looks like one or more absolute file paths (one per line). */
+const FILE_PATH_RE = /^(\/[\w.\-/ ]+(?:\.\w+)?|[A-Z]:\\[\w.\-\\ ]+(?:\.\w+)?)$/
+
+function extractFilePaths(text: string): string[] {
+ return text.split('\n').map((l) => l.trim()).filter((l) => FILE_PATH_RE.test(l))
+}
+
+const IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/svg+xml']
+
+export function InputBar({ onSend, onStop, disabled, isRunning, placeholder }: InputBarProps) {
+ const { t } = useTranslation('common')
+ const [text, setText] = useState('')
+ const [files, setFiles] = useState
+
+
+
+
+ {/* Prev arrow */}
+ {canPrev && (
+
+ )}
+
+ {/* Next arrow */}
+ {canNext && (
+
+ )}
+
+ {/* Image */}
+ e.stopPropagation()}>
+ e.stopPropagation()}
+ >
+ {currentIndex + 1} / {images.length}
+
+ )}
+
+
+ {/* Hidden file input */}
+
+
+ {/* Drop overlay */}
+ {dragging && (
+
+ {t('dropFilesHere', 'Drop files here')}
+
+ )}
+
+ {/* Attached files preview */}
+ {files.length > 0 && (
+
+ {files.map((af) => (
+
+ )}
+
+ {/* Input container */}
+
+ {af.preview ? (
+ 
+ ) : (
+
+ )}
+ {af.name}
+ {af.file && ({formatSize(af.file.size)})}
+
+
+ ))}
+
+ {/* Attach button */}
+
+
+ {/* Textarea */}
+