- Extract ThemeContext and ToolCollapseContext definitions into separate
files to satisfy react-refresh/only-export-components rule
- Move useTheme and useToolCollapse hooks to dedicated hook files
- Fix empty catch block in ThemeContext (add comment)
- Replace Date.now() ref in ThinkingIndicator with useState initializer
- Update all imports across components
Closes feedback #58
- Add ThemeContext with CSS custom properties for all base colors
- Three theme modes: Dark (default), Light, OLED Black
- Six accent colors: Cyan, Violet, Emerald, Amber, Rose, Blue
- Theme switcher dropdown in header (palette icon)
- Persisted in localStorage
- CSS variables replace hardcoded hex colors in index.css and components
- i18n support (EN/FR) for theme labels
Add a wrap/nowrap toggle button on tool call parameters and results.
Default: word-wrap enabled (pre-wrap + break-words) so content fits
without horizontal scrolling. Click the toggle to switch to nowrap
mode for raw formatting with horizontal scroll.
Closes feedback #41
When the agent is reasoning with hidden thinking (thinking=low), show a
pulsing 'Reasoning...' indicator with elapsed time instead of generic
bouncing dots. Once text content starts streaming, falls back to the
regular streaming dots.
Closes feedback #40
Fetch agent identity via agent.identity.get WS method after connect.
Display avatar in message bubbles (replacing Bot icon) and in the
header (replacing the PinchChat logo when an avatar is configured).
Falls back to default icons when no avatar is set.
The MetadataViewer popup was rendered inside the message bubble which has
overflow-hidden, causing the popup to be invisible. Fix by using
createPortal to render the popup directly on document.body with fixed
positioning. Also adds click-outside-to-close behavior.
Closes feedback #46
Small info button appears on hover of each message bubble.
Click to expand a panel showing raw message metadata (id, role,
timestamp, channel, sender info, etc.) from the gateway.
Useful for debugging and understanding message routing.
Collapsed by default, doesn't clutter the UI.
Closes feedback item #39
Replace violet tint with cyan/teal tones to match the existing cyan accent
theme. User messages now use from-cyan-900/20 background gradient and
cyan-400/15 border, with cyan-200 user icon. Subtler and more cohesive
with the dark theme while remaining clearly distinct from assistant messages.
Fixes feedback #44
User messages now have a subtle violet tint (border + gradient) to
distinguish them from assistant messages, similar to WhatsApp/Telegram
style. Keeps the dark theme and soft palette.
Deleted sessions would reappear after page refresh because the
gateway sessions.list response still included them. Now maintains
a localStorage blacklist of deleted session keys that filters them
out on every load, regardless of gateway-side deletion support.
Adds a floating button in the chat area that lets users collapse or expand
all tool call details at once. Useful for long conversations with many tool
calls where scrolling through expanded results is tedious.
- New ToolCollapseContext provides global collapse/expand state
- ToolCall components react to global state changes via version tracking
- Toggle button appears only when conversation has tool calls
- Supports EN/FR i18n
Add a download button in the header that exports the current session's
messages as a well-formatted Markdown file. Includes:
- User/assistant/system event labels with timestamps
- Thinking blocks as collapsible <details>
- Tool calls with JSON parameters
- Tool results as collapsible sections
- Image placeholders
- Session label and export date in header
i18n: EN + FR translations for the export tooltip.
Add overflow-x: hidden and word-break styles to textarea to prevent
ugly horizontal scrollbar on Windows. Also hide the horizontal webkit
scrollbar track entirely.
Add ::-webkit-scrollbar rules matching the dark theme. Textarea gets
an even thinner 4px scrollbar. Fixes ugly default scrollbar on macOS.
Closes feedback #36.
- Show relative time (2m, 3h, 1d) next to each session name
- Display last message preview below session name (truncated to 80 chars)
- Sort sessions by most recently updated (within pinned/unpinned groups)
- Map updatedAt and lastMessagePreview from gateway sessions.list response
Shows the agentId (e.g. 'main') with a bot icon in the header subtitle,
making it clear which agent is handling the current conversation.
Useful for multi-agent setups.
Replace raw session keys/UUIDs with readable names derived from
session metadata (label, kind, channel). Priority: label > kind-based
name (Main, Cron, Task) with channel suffix > cleaned key fallback.
New utility: src/lib/sessionName.ts used by both Header and Sidebar.
The looksLikeCode/isCodeLine heuristics were too aggressive:
- Pattern /^\s*(\/\/|#|\/\*|\*)/ matched markdown bold (**text**) and
headings (# title) as code comments, causing entire sections to be
wrapped in code fences and rendered as raw text
- Pattern /^\s*(\/\/|#)/ in isCodeLine caught markdown headers
- Added early bail-out when text contains markdown indicators (**bold**,
headings, bullet lists) to prevent false positives
- Narrowed comment detection to actual code comments only
Fixes: raw **bold** shown in long assistant messages (reported by Josh)
System events (heartbeats, cron triggers, webhooks, channel events)
now render as subtle inline notifications instead of full user bubbles.
Detection based on content patterns ([EVENT], [cron:], [HEARTBEAT], etc.).
- Pin icon appears on hover for each session, filled when pinned
- Pinned sessions sort to top of list (preserved across page reloads via localStorage)
- Subtle divider separates pinned from unpinned sessions
- i18n support for pin/unpin labels (EN + FR)
Shows the model (e.g. claude-opus-4-6) as a subtle chip next to the
session label in the header. Hovering reveals agent ID if available.
Model and agentId are now extracted from sessions.list response.
Display a header bar above code blocks with the detected language
name (e.g. TypeScript, Python, Shell). Pretty-prints common language
identifiers. The copy button remains in the top-right corner.
Shows how long the agent has been thinking (e.g. '5s', '1m 23s').
Timer appears after 2 seconds to avoid flicker on fast responses.
Helps users gauge if a request is still processing or stuck.
Arrow Up/Down to navigate sessions, Enter to select, Escape to close.
Sessions use role='option' with aria-selected for screen reader support.
Mouse hover syncs with keyboard focus index for smooth interaction.
- Add Vite define for __APP_VERSION__ from package.json
- Use dynamic version in gateway connect handshake and userAgent
- Show version number in sidebar footer
- Add globals.d.ts type declaration
Updates document.title dynamically to show the current session label
(e.g. 'main — PinchChat'). Integrates with the existing notification
system so unread badges still work correctly (e.g. '(3) main — PinchChat').
Resets to plain 'PinchChat' when no session is selected.
The Chat component (and its heavy markdown dependencies ~476KB) are now
loaded via React.lazy() + Suspense. Users see the login screen faster
since only ~245KB is needed initially instead of ~750KB.
Check typeof Notification before accessing .permission or
requestPermission(). Fixes crash on browsers/contexts where
the Notification API is unavailable (e.g. some WebViews).
Show inline hint when the gateway URL doesn't start with ws:// or wss://
and disable the connect button until it's valid. Prevents confusing
connection errors from malformed URLs.
Show a spinner with 'Loading messages…' text while chat history
is being fetched during session switches, instead of briefly
flashing the empty welcome screen. Includes EN/FR i18n.
Show Discord, Telegram, WhatsApp, Signal, Slack brand icons,
clock icon for cron sessions, bot icon for sub-agents, and
globe icon for webchat sessions. Falls back to message bubble
for unknown channels.
Closes feedback #23
- Chat.tsx: replace mutable variable in render IIFE with useMemo+reduce
to satisfy react-hooks/immutability rule
- ConnectionBanner.tsx: move setState calls into a useCallback to avoid
synchronous setState in effect body (react-hooks/set-state-in-effect)
- useGateway.ts: suppress set-state-in-effect for legitimate mount init
Shows a subtle horizontal line with the date label (Today, Yesterday, or
full date) when messages span multiple days. Helps orient users when
scrolling through long conversation histories.
Includes i18n support (EN/FR) for the date labels.
Hover over any user message to reveal a retry button (↻) that resends
the message text. Disabled while a response is generating.
Includes EN/FR i18n strings.
When the tab is not focused:
- Tab title shows unread count: (3) PinchChat
- Browser notification with message preview (if permitted)
- Notifications collapse into one via tag
- Click notification to focus tab
- All clears when tab regains focus
- Permission requested on first user interaction
Disables animations and reduces transition durations to near-zero
when the user has enabled reduced-motion in their OS settings.
Also replaces README screenshot placeholder with link to live demo.
