From 0740d55dde1db0b956affd60709d23b57b3c331f Mon Sep 17 00:00:00 2001
From: togotago <88701594+togotago@users.noreply.github.com>
Date: Wed, 18 Feb 2026 23:00:50 +0100
Subject: [PATCH] feat: make system event messages collapsible (#9)

System events now render as compact pills (label + chevron + timestamp)
that expand on click to reveal the full message content.

- Collapsed (default): rounded-full pill with Zap icon, label, ChevronDown,
  and timestamp. Clean single-line appearance.
- Expanded (on click): rounded-xl container with full message text shown
  below in whitespace-pre-wrap. Chevron rotates 180deg.
- Added cursor-pointer and hover:bg-pc-elevated/50 for discoverability.
- Removed always-visible truncated text from collapsed state for a cleaner
  default appearance.

Co-authored-by: togotago <drewmfleury@gmail.com>
---
 src/components/ChatMessage.tsx | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/ChatMessage.tsx b/src/components/ChatMessage.tsx
index 543fd84..1b840f4 100644
--- a/src/components/ChatMessage.tsx
+++ b/src/components/ChatMessage.tsx
@@ -418,6 +418,7 @@ function getPlainText(message: ChatMessageType): string {
 
 /** System event displayed as a subtle inline notification */
 function SystemEventMessage({ message }: { message: ChatMessageType }) {
+  const [expanded, setExpanded] = useState(false);
   const text = message.content || getTextBlocks(message.blocks).map(b => (b as Extract<MessageBlock, { type: 'text' }>).text).join(' ');
   // Trim leading brackets like [cron:xxx] or [EVENT] for cleaner display
   const display = text.replace(/^\[.*?\]\s*/, '').trim() || text.trim();
@@ -425,12 +426,22 @@ function SystemEventMessage({ message }: { message: ChatMessageType }) {
 
   return (
     <div className="animate-fade-in flex items-center justify-center gap-2 px-4 py-1.5 my-0.5">
-      <div className="flex items-center gap-1.5 max-w-[85%] rounded-full px-3 py-1 bg-pc-elevated/30 border border-pc-border">
-        <Zap className="h-3 w-3 text-pc-text-muted shrink-0" />
-        <span className="text-[11px] font-medium text-pc-text-muted shrink-0">{label}</span>
-        <span className="text-[11px] text-pc-text-muted truncate">{display}</span>
-        {message.timestamp && (
-          <Timestamp ts={message.timestamp} className="text-[10px] text-pc-text-faint shrink-0 ml-1" />
+      <div
+        className={`flex flex-col max-w-[85%] bg-pc-elevated/30 border border-pc-border cursor-pointer hover:bg-pc-elevated/50 transition-colors ${expanded ? 'rounded-xl' : 'rounded-full'}`}
+        onClick={() => setExpanded(v => !v)}
+      >
+        <div className="flex items-center gap-1.5 px-3 py-1">
+          <Zap className="h-3 w-3 text-pc-text-muted shrink-0" />
+          <span className="text-[11px] font-medium text-pc-text-muted shrink-0">{label}</span>
+          <ChevronDown className={`h-3 w-3 text-pc-text-muted shrink-0 transition-transform duration-200 ${expanded ? 'rotate-180' : ''}`} />
+          {message.timestamp && (
+            <Timestamp ts={message.timestamp} className="text-[10px] text-pc-text-faint shrink-0 ml-1" />
+          )}
+        </div>
+        {expanded && (
+          <div className="px-3 pb-2 pt-0">
+            <p className="text-[11px] text-pc-text-muted whitespace-pre-wrap break-words">{display}</p>
+          </div>
         )}
       </div>
     </div>