@assistkick/create 1.34.0 → 1.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistkick/create",
-  "version": "1.34.0",
+  "version": "1.35.0",
   "description": "Scaffold assistkick-product-system into any project",
   "type": "module",
   "bin": {

package/templates/assistkick-product-system/packages/frontend/src/components/ChatMessageBubble.tsx

@@ -9,7 +9,7 @@
  * text blocks, tool use cards, and tool result blocks.
  */
 
-import { useState, useCallback } from 'react';
+import { memo, useState, useCallback } from 'react';
 import type { ChatMessage, TextBlock, ImageBlock, FileBlock } from '../hooks/use_chat_stream';
 import { ChatMessageContent } from './ChatMessageContent';
 import { HighlightedText } from './HighlightedText';
@@ -41,12 +41,12 @@ const getFileTypeLabel = (mimeType: string): string => {
   return 'FILE';
 };
 
-export function ChatMessageBubble({ message, searchQuery = '', activeMatchIndex = -1, matchIndexOffset = 0 }: ChatMessageBubbleProps) {
+export const ChatMessageBubble = memo(function ChatMessageBubble({ message, searchQuery = '', activeMatchIndex = -1, matchIndexOffset = 0 }: ChatMessageBubbleProps) {
   if (message.role === 'user') {
     return <UserBubble message={message} searchQuery={searchQuery} activeMatchIndex={activeMatchIndex} matchIndexOffset={matchIndexOffset} />;
   }
   return <AssistantBubble message={message} searchQuery={searchQuery} activeMatchIndex={activeMatchIndex} matchIndexOffset={matchIndexOffset} />;
-}
+});
 
 function UserBubble({ message, searchQuery, activeMatchIndex, matchIndexOffset }: { message: ChatMessage; searchQuery: string; activeMatchIndex: number; matchIndexOffset: number }) {
   const textBlock = message.content.find((b) => b.type === 'text') as TextBlock | undefined;

package/templates/assistkick-product-system/packages/frontend/src/components/ChatMessageContent.tsx

@@ -7,6 +7,7 @@
  * - ToolResultBlock → collapsed ToolResultCard (shows tool output)
  */
 
+import { memo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import type { ContentBlock, ToolResultBlock, ToolUseBlock } from '../hooks/use_chat_stream';
@@ -67,7 +68,7 @@ const chatMarkdownClass = [
 ].join(' ');
 
 
-export const ChatMessageContent = ({ content, isStreaming, searchQuery = '', activeMatchIndex = -1, matchIndexOffset = 0 }: ChatMessageContentProps) => {
+export const ChatMessageContent = memo(({ content, isStreaming, searchQuery = '', activeMatchIndex = -1, matchIndexOffset = 0 }: ChatMessageContentProps) => {
   const resultMap = buildResultMap(content);
 
   // Pre-compute per-block match offsets so each text block knows its global offset
@@ -139,4 +140,4 @@ export const ChatMessageContent = ({ content, isStreaming, searchQuery = '', act
       })}
     </div>
   );
-};
+});

package/templates/assistkick-product-system/packages/frontend/src/components/ChatView.tsx

@@ -75,6 +75,7 @@ export function ChatView({ visible }: ChatViewProps) {
     loadMessages,
     attachSession,
     messages,
+    streamingMessage,
     streaming,
     connected,
     error,
@@ -136,12 +137,18 @@ export function ChatView({ visible }: ChatViewProps) {
   const messagesContainerRef = useRef<HTMLDivElement>(null);
   const sessionRestoredRef = useRef(false);
 
+  // Combined messages for search and sidebar (historical + streaming)
+  const allMessages = useMemo(
+    () => streamingMessage ? [...messages, streamingMessage] : messages,
+    [messages, streamingMessage],
+  );
+
   // --- Search: compute total matches and per-message offsets ---
   const { totalMatches, messageOffsets } = useMemo(() => {
     if (!searchQuery) return { totalMatches: 0, messageOffsets: [] as number[] };
     let total = 0;
     const offsets: number[] = [];
-    for (const msg of messages) {
+    for (const msg of allMessages) {
       offsets.push(total);
       for (const block of msg.content) {
         if (block.type === 'text') {
@@ -150,7 +157,7 @@ export function ChatView({ visible }: ChatViewProps) {
       }
     }
     return { totalMatches: total, messageOffsets: offsets };
-  }, [messages, searchQuery]);
+  }, [allMessages, searchQuery]);
 
   // Reset active match when query changes
   useEffect(() => {
@@ -320,7 +327,7 @@ export function ChatView({ visible }: ChatViewProps) {
   // Auto-scroll to bottom when new messages arrive
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages, queue]);
+  }, [messages, streamingMessage, queue]);
 
   // Keep a ref to sessions so the onStreamEnd callback can look up session details
   // without stale closure issues.
@@ -366,7 +373,7 @@ export function ChatView({ visible }: ChatViewProps) {
       // Save current session's input, messages, context usage, and system prompt
       if (activeSessionId) {
         inputCacheRef.current.set(activeSessionId, inputValue);
-        messagesCacheRef.current.set(activeSessionId, messages);
+        messagesCacheRef.current.set(activeSessionId, streamingMessage ? [...messages, streamingMessage] : messages);
         if (contextUsage) contextUsageCacheRef.current.set(activeSessionId, contextUsage);
         if (systemPrompt) systemPromptCacheRef.current.set(activeSessionId, systemPrompt);
       }
@@ -424,7 +431,7 @@ export function ChatView({ visible }: ChatViewProps) {
         });
       }
     },
-    [activeSessionId, inputValue, messages, contextUsage, systemPrompt, clearMessages, restoreMessages, clearAttachments, loadMessages, attachSession, initContextUsage, initSystemPrompt, setQueueActiveSession],
+    [activeSessionId, inputValue, messages, streamingMessage, contextUsage, systemPrompt, clearMessages, restoreMessages, clearAttachments, loadMessages, attachSession, initContextUsage, initSystemPrompt, setQueueActiveSession],
   );
 
   // Handle selecting a newly created session
@@ -433,7 +440,7 @@ export function ChatView({ visible }: ChatViewProps) {
       // Save current session's state before switching
       if (activeSessionId) {
         inputCacheRef.current.set(activeSessionId, inputValue);
-        messagesCacheRef.current.set(activeSessionId, messages);
+        messagesCacheRef.current.set(activeSessionId, streamingMessage ? [...messages, streamingMessage] : messages);
         if (contextUsage) contextUsageCacheRef.current.set(activeSessionId, contextUsage);
         if (systemPrompt) systemPromptCacheRef.current.set(activeSessionId, systemPrompt);
       }
@@ -445,7 +452,7 @@ export function ChatView({ visible }: ChatViewProps) {
       setIsNewSession(true);
       setInputValue('');
     },
-    [activeSessionId, inputValue, messages, contextUsage, systemPrompt, clearMessages, clearAttachments, initSystemPrompt, setQueueActiveSession],
+    [activeSessionId, inputValue, messages, streamingMessage, contextUsage, systemPrompt, clearMessages, clearAttachments, initSystemPrompt, setQueueActiveSession],
   );
 
   // File handling for attachments
@@ -691,6 +698,7 @@ export function ChatView({ visible }: ChatViewProps) {
                   <SystemPromptAccordion prompt={displayedSystemPrompt} />
                 )}
 
+                {/* Historical messages — stable array, memoized components skip re-renders */}
                 {messages.map((msg, idx) => (
                   <ChatMessageBubble
                     key={msg.id}
@@ -701,6 +709,17 @@ export function ChatView({ visible }: ChatViewProps) {
                   />
                 ))}
 
+                {/* Streaming message — isolated, only this re-renders per token */}
+                {streamingMessage && (
+                  <ChatMessageBubble
+                    key={streamingMessage.id}
+                    message={streamingMessage}
+                    searchQuery={searchQuery}
+                    activeMatchIndex={activeMatchIndex}
+                    matchIndexOffset={messageOffsets[messages.length] ?? 0}
+                  />
+                )}
+
                 {/* Queued messages */}
                 {queue.map((qm) => (
                   <QueuedMessageBubble
@@ -716,7 +735,7 @@ export function ChatView({ visible }: ChatViewProps) {
             </div>
 
             {/* Todo sidebar — shown when tasks exist */}
-            <ChatTodoSidebar messages={messages} />
+            <ChatTodoSidebar messages={allMessages} />
           </div>
 
           {/* Error banner */}

package/templates/assistkick-product-system/packages/frontend/src/components/ToolUseCard.tsx

@@ -7,7 +7,7 @@
  * content-secondary text, monospace font at 13px.
  */
 
-import { useState } from 'react';
+import { memo, useState } from 'react';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { summarizeToolUse, toolIcon } from '../lib/tool_use_summary';
 import { ToolDiffView } from './ToolDiffView';
@@ -64,7 +64,7 @@ const hasIntegratedView = (name: string): boolean =>
 const hasGenericView = (name: string): boolean =>
   !['Edit', 'Write', 'Read', 'Bash', 'Agent'].includes(name);
 
-export const ToolUseCard = ({ name, input, isStreaming, result }: ToolUseCardProps) => {
+export const ToolUseCard = memo(({ name, input, isStreaming, result }: ToolUseCardProps) => {
   const [expanded, setExpanded] = useState(false);
   const [viewTab, setViewTab] = useState<ViewTab>('humanized');
   const summary = summarizeToolUse(name, input);
@@ -160,4 +160,4 @@ export const ToolUseCard = ({ name, input, isStreaming, result }: ToolUseCardPro
       )}
     </div>
   );
-};
+});

package/templates/assistkick-product-system/packages/frontend/src/hooks/use_chat_stream.ts

@@ -214,6 +214,8 @@ export interface UseChatStreamReturn {
     /** Attempt to re-attach to an in-flight stream after page reload. */
     attachSession: (claudeSessionId: string) => void;
     messages: ChatMessage[];
+    /** The currently streaming assistant message (separate from messages for render isolation). */
+    streamingMessage: ChatMessage | null;
     streaming: boolean;
     connected: boolean;
     error: string | null;
@@ -355,6 +357,11 @@ export const useChatStream = (): UseChatStreamReturn => {
     const [connected, setConnected] = useState(false);
     const [streaming, setStreaming] = useState(false);
     const [messages, setMessages] = useState<ChatMessage[]>([]);
+    /** The currently streaming assistant message, isolated from historical messages
+     *  so that per-token updates don't trigger re-renders of the entire message list. */
+    const [streamingMessage, setStreamingMessage] = useState<ChatMessage | null>(null);
+    /** Ref mirror of streamingMessage for synchronous reads in event handlers. */
+    const streamingMessageRef = useRef<ChatMessage | null>(null);
     const [error, setError] = useState<string | null>(null);
     const [pendingPermission, setPendingPermission] = useState<PendingPermission | null>(null);
     const [cancelledUserMessage, setCancelledUserMessage] = useState<string | null>(null);
@@ -394,17 +401,17 @@ export const useChatStream = (): UseChatStreamReturn => {
             }
 
             switch (msg.type) {
-                case 'stream_start':
+                case 'stream_start': {
                     // Only process if this event is for our active session
                     if (activeClaudeSessionRef.current && msg.claudeSessionId !== activeClaudeSessionRef.current) break;
                     setStreaming(true);
                     setError(null);
-                    // Create an empty assistant message that will accumulate content
-                    setMessages(prev => [
-                        ...prev,
-                        {id: nextMessageId(), role: 'assistant', content: [], isStreaming: true},
-                    ]);
+                    // Create an isolated streaming message (not in the messages array)
+                    const startMsg: ChatMessage = {id: nextMessageId(), role: 'assistant', content: [], isStreaming: true};
+                    streamingMessageRef.current = startMsg;
+                    setStreamingMessage(startMsg);
                     break;
+                }
 
                 case 'stream_event':
                     // Only process events for our active session — prevents cross-session leaking
@@ -412,7 +419,7 @@ export const useChatStream = (): UseChatStreamReturn => {
                     handleStreamEvent(msg.event);
                     break;
 
-                case 'stream_end':
+                case 'stream_end': {
                     // Only process if this event is for our active session
                     if (activeClaudeSessionRef.current && msg.claudeSessionId !== activeClaudeSessionRef.current) break;
                     setStreaming(false);
@@ -421,40 +428,29 @@ export const useChatStream = (): UseChatStreamReturn => {
                     if (msg.error) {
                         setError(msg.error);
                     }
-                    // Mark the last assistant message as no longer streaming
-                    setMessages(prev => {
-                        const updated = [...prev];
-                        for (let i = updated.length - 1; i >= 0; i--) {
-                            if (updated[i].role === 'assistant' && updated[i].isStreaming) {
-                                updated[i] = {...updated[i], isStreaming: false};
-                                break;
-                            }
-                        }
-                        return updated;
-                    });
+                    // Merge the streaming message into historical messages
+                    const endMsg = streamingMessageRef.current;
+                    if (endMsg) {
+                        setMessages(prev => [...prev, {...endMsg, isStreaming: false}]);
+                    }
+                    streamingMessageRef.current = null;
+                    setStreamingMessage(null);
                     // Notify consumers (e.g. message queue) that streaming has ended
                     streamEndCallbackRef.current?.();
                     break;
+                }
 
                 case 'stream_cancelled':
                     // Only process if this event is for our active session
                     if (activeClaudeSessionRef.current && msg.claudeSessionId !== activeClaudeSessionRef.current) break;
                     setStreaming(false);
                     activeClaudeSessionRef.current = null;
-                    // Discard the partial assistant response and the triggering user message.
-                    // Prepopulate the cancelled user message text for the input field.
+                    // Discard the streaming assistant message
+                    streamingMessageRef.current = null;
+                    setStreamingMessage(null);
+                    // Remove the last user message and prepopulate the input field
                     setMessages(prev => {
                         const updated = [...prev];
-
-                        // Remove the last streaming assistant message (partial response)
-                        for (let i = updated.length - 1; i >= 0; i--) {
-                            if (updated[i].role === 'assistant' && updated[i].isStreaming) {
-                                updated.splice(i, 1);
-                                break;
-                            }
-                        }
-
-                        // Remove the last user message and capture its text
                         for (let i = updated.length - 1; i >= 0; i--) {
                             if (updated[i].role === 'user') {
                                 const userContent = updated[i].content;
@@ -466,38 +462,46 @@ export const useChatStream = (): UseChatStreamReturn => {
                                 break;
                             }
                         }
-
                         return updated;
                     });
                     break;
 
-                case 'stream_resumed':
+                case 'stream_resumed': {
                     // Re-attached to an in-flight stream after page reload or session switch.
-                    // Update active session to the one we're re-attaching to.
                     activeClaudeSessionRef.current = msg.claudeSessionId;
-                    // Mark the last assistant message as streaming so new events update it.
-                    // If no assistant message exists (e.g. messages not yet persisted to DB),
-                    // create an empty streaming assistant message for catch-up content.
                     setStreaming(true);
                     setError(null);
-                    setMessages(prev => markOrCreateStreamingAssistant(prev, nextMessageId()));
-                    break;
-
-                case 'stream_error':
-                    setStreaming(false);
-                    setError(msg.error);
-                    // Mark streaming message as done
+                    // Extract last assistant message from historical messages into streamingMessage,
+                    // or create a new empty one if none exists.
+                    streamingMessageRef.current = null;
                     setMessages(prev => {
-                        const updated = [...prev];
-                        for (let i = updated.length - 1; i >= 0; i--) {
-                            if (updated[i].role === 'assistant' && updated[i].isStreaming) {
-                                updated[i] = {...updated[i], isStreaming: false};
-                                break;
+                        for (let i = prev.length - 1; i >= 0; i--) {
+                            if (prev[i].role === 'assistant') {
+                                streamingMessageRef.current = {...prev[i], isStreaming: true};
+                                return [...prev.slice(0, i), ...prev.slice(i + 1)];
                             }
                         }
-                        return updated;
+                        return prev;
                     });
+                    if (!streamingMessageRef.current) {
+                        streamingMessageRef.current = {id: nextMessageId(), role: 'assistant', content: [], isStreaming: true};
+                    }
+                    setStreamingMessage(streamingMessageRef.current);
+                    break;
+                }
+
+                case 'stream_error': {
+                    setStreaming(false);
+                    setError(msg.error);
+                    // Merge the streaming message into historical messages (marked as done)
+                    const errMsg = streamingMessageRef.current;
+                    if (errMsg) {
+                        setMessages(prev => [...prev, {...errMsg, isStreaming: false}]);
+                    }
+                    streamingMessageRef.current = null;
+                    setStreamingMessage(null);
                     break;
+                }
 
                 case 'permission_request':
                     setPendingPermission({
@@ -539,21 +543,17 @@ export const useChatStream = (): UseChatStreamReturn => {
             const blocks = extractContentBlocks(event);
             if (blocks.length === 0) return;
 
-            setMessages(prev => {
-                const updated = [...prev];
-                for (let i = updated.length - 1; i >= 0; i--) {
-                    if (updated[i].role === 'assistant' && updated[i].isStreaming) {
-                        updated[i] = {...updated[i], content: mergeAssistantContent(updated[i].content, blocks)};
-                        break;
-                    }
-                }
-                return updated;
-            });
+            // Update only the isolated streaming message — historical messages stay untouched
+            const current = streamingMessageRef.current;
+            if (current) {
+                const updated = {...current, content: mergeAssistantContent(current.content, blocks)};
+                streamingMessageRef.current = updated;
+                setStreamingMessage(updated);
+            }
             return;
         }
 
-        // Process tool result events — merge tool_result blocks into the last
-        // streaming assistant message so ToolUseCard can show output.
+        // Process tool result events — merge tool_result blocks into the streaming message
         if (event.type === 'tool_result' || event.type === 'human' || event.type === 'user') {
             const blocks = extractContentBlocks(event);
             const resultBlocks = blocks.filter(
@@ -561,30 +561,22 @@ export const useChatStream = (): UseChatStreamReturn => {
             );
             if (resultBlocks.length === 0) return;
 
-            setMessages(prev => {
-                const updated = [...prev];
-                for (let i = updated.length - 1; i >= 0; i--) {
-                    if (updated[i].role === 'assistant' && updated[i].isStreaming) {
-                        // Append tool_result blocks, deduplicating by toolUseId
-                        const existingToolResultIds = new Set(
-                            updated[i].content
-                                .filter((b): b is ToolResultBlock => b.type === 'tool_result')
-                                .map(b => b.toolUseId),
-                        );
-                        const newResults = resultBlocks.filter(
-                            b => !existingToolResultIds.has(b.toolUseId),
-                        );
-                        if (newResults.length > 0) {
-                            updated[i] = {
-                                ...updated[i],
-                                content: [...updated[i].content, ...newResults],
-                            };
-                        }
-                        break;
-                    }
+            const current = streamingMessageRef.current;
+            if (current) {
+                const existingToolResultIds = new Set(
+                    current.content
+                        .filter((b): b is ToolResultBlock => b.type === 'tool_result')
+                        .map(b => b.toolUseId),
+                );
+                const newResults = resultBlocks.filter(
+                    b => !existingToolResultIds.has(b.toolUseId),
+                );
+                if (newResults.length > 0) {
+                    const updated = {...current, content: [...current.content, ...newResults]};
+                    streamingMessageRef.current = updated;
+                    setStreamingMessage(updated);
                 }
-                return updated;
-            });
+            }
         }
 
         // Extract contextWindow from result event's modelUsage
@@ -725,11 +717,15 @@ export const useChatStream = (): UseChatStreamReturn => {
 
     const clearMessages = useCallback(() => {
         setMessages([]);
+        streamingMessageRef.current = null;
+        setStreamingMessage(null);
         setContextUsage(null);
     }, []);
 
     const restoreMessages = useCallback((msgs: ChatMessage[]) => {
         setMessages(msgs);
+        streamingMessageRef.current = null;
+        setStreamingMessage(null);
     }, []);
 
     const initContextUsage = useCallback((usage: ContextUsage | null) => {
@@ -800,6 +796,7 @@ export const useChatStream = (): UseChatStreamReturn => {
         loadMessages,
         attachSession,
         messages,
+        streamingMessage,
         streaming,
         connected,
         error,