diff --git a/FEEDBACK.md b/FEEDBACK.md index df9115a..5d06fef 100644 --- a/FEEDBACK.md +++ b/FEEDBACK.md @@ -719,3 +719,63 @@ - **Priority:** medium - **Status:** open - **Description:** Context compaction button — Add a button in the PinchChat UI to trigger OpenClaw's context summarize/compaction. When a session's token usage is high (e.g. near the limit), the user can click to compact the conversation history, summarizing older messages to free up context window space. OpenClaw should expose an API/tool for this. (Feedback from Bardak) + +## Item #64 +- **Date:** 2026-02-14 +- **Priority:** high +- **Status:** open +- **Source:** Josh (Bardak) +- **Description:** PWA not working — no install button appears on mobile or desktop. The app should be installable as a Progressive Web App. Check manifest.json, service worker registration, and install prompt handling. Test on both Chrome mobile and desktop. + +## Item #65 +- **Date:** 2026-02-14 +- **Priority:** medium +- **Status:** open +- **Source:** Josh (Bardak) +- **Description:** Replace the star icon (⭐) next to "PinchChat" and "Sessions" in the sidebar/navbar. It looks cheap. Replace with something better — PinchChat logo, lobster emoji (🦞), or whatever looks cool and fits the branding. Make it feel intentional, not placeholder. + +## Item #66 +- **Date:** 2026-02-14 +- **Priority:** high +- **Status:** open +- **Source:** Josh (Bardak) +- **Description:** Image display bug — when the assistant sends an image, it initially shows as an empty square container (wrong aspect ratio, no image visible). Clicking it opens the preview modal correctly and shows the image. After closing the preview, the image then renders correctly in the message bubble with the right aspect ratio. The image should render correctly on first load without requiring user interaction. Likely a lazy-loading or onload sizing issue. + +## Item #67 (DUPLICATE — see Item #63) +- **Date:** 2026-02-14 +- **Note:** Already tracked as Item #63. Context compaction button. + +## Item #68 +- **Date:** 2026-02-14 +- **Priority:** medium +- **Status:** open +- **Source:** Josh (Bardak) +- **Description:** Colorize channel/source icons in the session list and chat — use each service's brand colors for visual identification. Discord = blurple (#5865F2), Telegram = blue (#26A5E4), Cron = amber/orange, TeamSpeak = blue (#2580C3), Signal = blue (#3A76F0), webchat = green, bardak-bot = custom, etc. Currently they're all the same color and hard to distinguish at a glance. + +## Item #69 +- **Date:** 2026-02-14 +- **Priority:** medium +- **Status:** open +- **Source:** Josh (Bardak) +- **Description:** Display the agent/assistant name somewhere in the UI (header, sidebar, or chat). The name is available in OpenClaw config at `ui.assistant.name` (e.g. "Marlbot"). Currently there's no indication of who the agent is — should be visible, especially for multi-agent setups. Could also show the avatar if `ui.assistant.avatar` is set. **Important:** these fields are optional and most users won't set them — always have a sensible fallback (e.g. "Assistant" + default robot icon) when `ui.assistant.name` / `ui.assistant.avatar` are absent. + +## Item #70 +- **Date:** 2026-02-14 +- **Priority:** medium +- **Status:** open +- **Source:** Josh (Bardak) +- **Description:** WebSocket connection indicator uses primary/accent color — this is problematic because when the theme accent is red, the "connected" dot looks like an error/disconnected state. Use fixed semantic colors instead: green (#22c55e) for connected, red for disconnected, amber for reconnecting. Never tie connection status indicator to the theme accent color. + +## Item #71 +- **Date:** 2026-02-14 +- **Priority:** low +- **Status:** open +- **Source:** Josh (Bardak) +- **Description:** The three-dot menu (⋯) at the bottom of the sidebar next to the version number feels useless. Remove it or replace with something actually useful (e.g. settings shortcut, theme picker, link to GitHub repo, etc.). + +## Item #72 +- **Date:** 2026-02-14 +- **Priority:** high +- **Status:** open +- **Source:** Josh (Bardak) +- **Description:** After OpenClaw compaction, all previous messages disappear from the chat UI. This is a bad UX — the user loses their message history visually even though the conversation continues. Ideally PinchChat should keep a local cache/history of previous messages (IndexedDB or localStorage) so the user can still scroll back and see/copy-paste old messages even after compaction. The compaction boundary could be shown with a visual separator ("— context compacted —") but old messages should remain visible above it. This is critical for usability — users need to be able to reference what they said earlier. diff --git a/public/manifest.json b/public/manifest.json index 1449def..d67a75f 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,8 +1,10 @@ { + "id": "/", "name": "PinchChat", "short_name": "PinchChat", "description": "A sleek, dark-themed webchat UI for OpenClaw — monitor sessions, stream responses, and inspect tool calls in real-time.", "start_url": "/", + "scope": "/", "display": "standalone", "background_color": "#1e1e24", "theme_color": "#1e1e24", diff --git a/public/sw.js b/public/sw.js index 86ac5c5..883a853 100644 --- a/public/sw.js +++ b/public/sw.js @@ -1,5 +1,5 @@ // PinchChat Service Worker — cache static assets for offline/instant load -const CACHE_NAME = 'pinchchat-__SW_VERSION__'; +const CACHE_NAME = 'pinchchat-v1'; // Cache static assets on install self.addEventListener('install', (event) => { diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 2179ac4..3e5c015 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -81,7 +81,7 @@ export function Header({ status, sessionKey, onToggleSidebar, activeSessionData, {status === 'connected' ? (
- + {t('header.connected')}
) : status === 'connecting' ? ( diff --git a/src/components/ImageBlock.tsx b/src/components/ImageBlock.tsx index 87776a1..a276dd3 100644 --- a/src/components/ImageBlock.tsx +++ b/src/components/ImageBlock.tsx @@ -64,17 +64,18 @@ export function ImageBlock({ src, alt }: ImageBlockProps) { aria-label={`View ${alt || 'image'} full size`} className="block rounded-xl border border-pc-border cursor-pointer hover:brightness-110 transition-all focus:outline-none focus:ring-2 focus:ring-[var(--pc-accent-dim)]" > - {loading && ( -
- )} - {alt setLoading(false)} - onError={() => { setLoading(false); setError(true); }} - /> +
+ {loading && ( +
+ )} + {alt setLoading(false)} + onError={() => { setLoading(false); setError(true); }} + /> +
{lightbox && setLightbox(false)} />} diff --git a/src/components/SessionIcon.tsx b/src/components/SessionIcon.tsx index c63f537..f1f7058 100644 --- a/src/components/SessionIcon.tsx +++ b/src/components/SessionIcon.tsx @@ -46,44 +46,63 @@ function SlackIcon({ size = 15, className = '' }: { size?: number; className?: s * Returns the appropriate icon for a session based on its channel or kind. * Detects cron sessions from the session key pattern. */ -export function SessionIcon({ session, isActive, isCurrentSession }: { +export function SessionIcon({ session, isCurrentSession }: { session: Session; - isActive?: boolean; + isActive?: boolean; // kept for API compat, brand colors used instead isCurrentSession?: boolean; }) { const size = 15; - const baseClass = isCurrentSession ? 'text-pc-accent-light/70' : isActive ? 'text-violet-400/70' : ''; + // Brand colors for each channel + const brandColor = (() => { + const isCron = session.key.includes(':cron:'); + if (isCron) return 'text-amber-400/80'; + const isSubAgent = session.key.includes(':spawn:') || session.key.includes(':sub:'); + if (isSubAgent) return 'text-violet-400/80'; + const ch = session.channel?.toLowerCase(); + switch (ch) { + case 'discord': return 'text-[#5865F2]'; + case 'telegram': return 'text-[#26A5E4]'; + case 'signal': return 'text-[#3A76F0]'; + case 'whatsapp': return 'text-[#25D366]'; + case 'slack': return 'text-[#E01E5A]'; + case 'webchat': return 'text-emerald-400/80'; + case 'teamspeak': return 'text-[#2580C3]'; + default: return 'text-pc-text-secondary'; + } + })(); + + const colorClass = isCurrentSession ? 'text-pc-accent-light' : brandColor; // Detect cron sessions from key pattern const isCron = session.key.includes(':cron:'); if (isCron) { - return ; + return ; } // Detect sub-agent / spawned sessions const isSubAgent = session.key.includes(':spawn:') || session.key.includes(':sub:'); if (isSubAgent) { - return ; + return ; } const channel = session.channel?.toLowerCase(); switch (channel) { case 'discord': - return ; + return ; case 'telegram': - return ; + return ; case 'signal': - return ; + return ; case 'whatsapp': - return ; + return ; case 'slack': - return ; + return ; case 'webchat': - return ; + return ; case 'teamspeak': - return ; + return ; default: - return ; + return ; } } diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 26a0f18..f8a187f 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -1,11 +1,12 @@ import { useState, useMemo, useRef, useEffect, useCallback } from 'react'; -import { X, Sparkles, Search, Pin, Trash2, Columns2, Clock, Bot, MessageSquare, Globe, Zap, ArrowUpCircle } from 'lucide-react'; +import { X, Search, Pin, Trash2, Columns2, Clock, Bot, MessageSquare, Globe, Zap, ArrowUpCircle, Download } from 'lucide-react'; import type { Session } from '../types'; import { useT } from '../hooks/useLocale'; import { SessionIcon } from './SessionIcon'; import { sessionDisplayName } from '../lib/sessionName'; import { relativeTime } from '../lib/relativeTime'; import { useUpdateCheck } from '../hooks/useUpdateCheck'; +import { usePwaInstall } from '../hooks/usePwaInstall'; function VersionBadge() { const update = useUpdateCheck(__APP_VERSION__); @@ -31,6 +32,34 @@ function VersionBadge() { ); } +function SidebarFooter() { + const pwa = usePwaInstall(); + return ( +
+ {pwa.canInstall && ( + + )} + + + + +
+ ); +} + const PINNED_KEY = 'pinchchat-pinned-sessions'; const WIDTH_KEY = 'pinchchat-sidebar-width'; const ORDER_KEY = 'pinchchat-session-order'; @@ -258,8 +287,8 @@ export function Sidebar({ sessions, activeSession, onSwitch, onDelete, onSplit,
-
- +
+ PinchChat
{t('sidebar.title')} @@ -511,12 +540,7 @@ export function Sidebar({ sessions, activeSession, onSwitch, onDelete, onSplit, })}
{/* Footer with version */} -
- - - - -
+ {/* Resize drag handle */}
; + userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>; +} + +// Check standalone mode outside of React to avoid setState-in-effect +const isStandalone = typeof window !== 'undefined' && window.matchMedia('(display-mode: standalone)').matches; + +export function usePwaInstall() { + const [deferredPrompt, setDeferredPrompt] = useState(null); + const [isInstalled, setIsInstalled] = useState(isStandalone); + const installedRef = useRef(isStandalone); + + useEffect(() => { + if (installedRef.current) return; + + const handler = (e: Event) => { + e.preventDefault(); + setDeferredPrompt(e as BeforeInstallPromptEvent); + }; + + const installedHandler = () => { + installedRef.current = true; + setIsInstalled(true); + setDeferredPrompt(null); + }; + + window.addEventListener('beforeinstallprompt', handler); + window.addEventListener('appinstalled', installedHandler); + + return () => { + window.removeEventListener('beforeinstallprompt', handler); + window.removeEventListener('appinstalled', installedHandler); + }; + }, []); + + const install = useCallback(async () => { + if (!deferredPrompt) return false; + await deferredPrompt.prompt(); + const { outcome } = await deferredPrompt.userChoice; + setDeferredPrompt(null); + return outcome === 'accepted'; + }, [deferredPrompt]); + + return { + canInstall: !!deferredPrompt && !isInstalled, + isInstalled, + install, + }; +}