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.
- Add GatewayMessage and JsonPayload interfaces to gateway.ts
- Type WebSocket message parsing with GatewayMessage instead of any
- Use ReturnType<typeof setTimeout> for timer refs
- Type chat event payload destructuring explicitly
- Add ChatPayloadMessage interface for extractText()
- Replace any casts in loadSessions/loadHistory with typed assertions
- Add str() helper in ToolCall.tsx for safe unknown→string extraction
- Use Extract<MessageBlock, ...> type guards instead of `as any` casts
- Type CodeBlock children prop properly
- Catches render errors and shows a styled recovery UI instead of blank white screen
- Try Again button re-renders, Reload button refreshes the page
- Error details shown in a collapsible pre block
- Full i18n support (EN/FR)
- Wraps the entire app in main.tsx
- ImageBlock: wrap clickable image in <button> with aria-label, add
role=dialog and aria-modal to lightbox overlay
- KeyboardShortcuts: add role=dialog and aria-modal to modal overlay
- CodeBlock: add aria-label to copy button
- LanguageSelector: add aria-label with current language
Replace the disparate gradient/orange/red color scheme with a single
soft sky-blue (rgb 56,189,248) that subtly intensifies as usage grows.
Opacity ramps from 0.35 at low usage to 1.0 at full context.
Applies to both sidebar session bars and header token bar.
- Demo animation is now the first thing visitors see (in the hero)
- Features use alternating left/right layout with visual panels
- Each feature has a mini illustration (tool badges, session list, etc.)
- Scroll-reveal animation on feature rows
- Removed the old grid layout
- Responsive: stacks vertically on mobile
Closes feedback #13
- Search input appears when 4+ sessions exist
- Filters sessions by label/key in real-time
- Ctrl+K / Cmd+K keyboard shortcut to focus search
- Clear button and 'no results' state
- i18n support (EN + FR)
Appears on hover over assistant message bubbles. Shows a check icon
with 'Copied!' feedback for 2s after clicking. i18n support (EN/FR).
Does not show on streaming messages or empty messages.
Replaces the screenshot placeholder with a live animated demo showing:
- Sidebar with fake sessions and token usage bars
- User typing animation with cursor
- Thinking indicator with animated dots
- Colored tool call badges (web_search, exec)
- Expandable tool results with parameters
- Formatted assistant response with markdown
- Auto-looping animation
All pure CSS/JS, no dependencies. Matches the app's dark theme and color scheme.
Closes feedback item #12
Adds a slim animated banner below the header that:
- Shows 'Connection lost — reconnecting…' with spinner when WS drops
- Flashes 'Reconnected!' with auto-dismiss after 3s on recovery
- Only appears after initial connection (not on first load)
- Supports EN/FR via i18n system
- Uses aria role=alert for accessibility
Reorder and rewrite feature descriptions to highlight what actually
differentiates PinchChat: tool call visualization, GPT-like interface,
multi-session navigation. Remove generic features (markdown, file upload,
dark theme) that don't sell the product. Pragmatic tone, no fluff.
Floating button appears when user scrolls away from the bottom of the
conversation, making it easy to jump back to the latest messages.
Includes i18n labels (EN/FR) and smooth scroll animation.
- Add image block type for base64 and URL images
- Parse image/image_url blocks from gateway history
- Render images inline in chat messages (rounded, dark-themed)
- Click-to-zoom lightbox with Escape to close
- Markdown images also use the lightbox component
- Detect base64 images in tool results (e.g. Read tool on image files)
- Support png, jpg, gif, webp formats
- Use logo.png as favicon (replaces emoji SVG)
- Show logo in header next to title
- Show larger logo on login screen
- Add OG image meta tag
- Add centered logo in README
- Closes feedback item #8
Hover over any fenced code block to reveal a floating copy-to-clipboard
button (top-right corner). Provides visual feedback (checkmark) on success.
Uses a custom ReactMarkdown <pre> component wrapper.
Previously, every message update forced a scroll to bottom, which was
disruptive when reading older messages in the history. Now the chat only
auto-scrolls if the user is within 150px of the bottom, or if they just
sent a message. This preserves scroll position when browsing history
while still following new streaming content.
