feat: read indicator — NEW divider line between read and unread messages

web/src/components/ChatArea.tsx

@@ -326,6 +326,7 @@ export function ChatArea() {
   const members = activeServerId ? membersByServer[activeServerId] || [] : [];
   const memberUsernames = useMemo(() => new Set(members.map((m) => m.username)), [members]);
   const markRead = useReadStatesStore((s) => s.markRead);
+  const readStates = useReadStatesStore((s) => s.states);
 
   const [showPinned, setShowPinned] = useState(false);
   const [showFeatureRequests, setShowFeatureRequests] = useState(false);
@@ -828,7 +829,12 @@ export function ChatArea() {
                 {!isLoading && messages.length === 0 && (
                   <p className="text-gb-fg-f">[no messages in this channel]</p>
                 )}
-                {messages.map((message) => (
+                {messages.map((message, i) => {
+                  // ponytail: last-read divider — show after the message matching the user's read state
+                  const lastReadId = activeChannelId ? readStates[activeChannelId] : undefined;
+                  const showDivider = lastReadId && message.id === lastReadId && i < messages.length - 1;
+                  return (
+                    <>
                       <MessageItem
                         key={message.id}
                         message={message}
@@ -848,7 +854,16 @@ export function ChatArea() {
                         parentMessage={message.reply_to ? messages.find((m) => m.id === message.reply_to) : null}
                         onJumpToParent={handleJumpToMessage}
                       />
-                ))}
+                      {showDivider && (
+                        <div className="flex items-center gap-2 my-1">
+                          <span className="flex-1 border-t border-gb-red"></span>
+                          <span className="text-gb-red text-xs font-bold shrink-0">── NEW ──</span>
+                          <span className="flex-1 border-t border-gb-red"></span>
+                        </div>
+                      )}
+                    </>
+                  );
+                })}
                 <div ref={bottomRef} />
               </div>
               <div className="px-3 pt-1 text-xs text-gb-fg-f font-mono italic h-5 select-none">

web/src/components/DMChat.tsx

@@ -168,6 +168,7 @@ export function DMChat() {
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const lastTypingRef = useRef<number>(0);
   const markConvRead = useReadStatesStore((s) => s.markConvRead);
+  const convStates = useReadStatesStore((s) => s.convStates);
 
   const id = conversationId || activeId;
   const conversation = conversations.find((c) => c.id === id);
@@ -321,7 +322,11 @@ export function DMChat() {
         {isLoadingOlder && <p className="text-center text-gb-fg-f text-xs">[loading older messages...]</p>}
         {!id && <p className="text-gb-fg-f">[select a conversation]</p>}
         {id && messages.length === 0 && <p className="text-gb-fg-f">[no messages]</p>}
-        {messages.map((msg: ConversationMessage) => (
+        {messages.map((msg: ConversationMessage, i: number) => {
+          const lastReadId = id ? convStates[id] : undefined;
+          const showDivider = lastReadId && msg.id === lastReadId && i < messages.length - 1;
+          return (
+            <>
               <DMMessageItem
                 key={msg.id}
                 msg={msg}
@@ -333,7 +338,16 @@ export function DMChat() {
                 currentUserId={currentUser?.id}
                 conversationId={id || ""}
               />
-        ))}
+              {showDivider && (
+                <div className="flex items-center gap-2 my-1">
+                  <span className="flex-1 border-t border-gb-red"></span>
+                  <span className="text-gb-red text-xs font-bold shrink-0">── NEW ──</span>
+                  <span className="flex-1 border-t border-gb-red"></span>
+                </div>
+              )}
+            </>
+          );
+        })}
         <div ref={bottomRef} />
       </div>
       <div className="px-3 pt-1 text-xs text-gb-fg-f font-mono italic h-5 select-none">