feat(chat): improve log message display

backend/src/agent.py

@@ -131,6 +131,24 @@ class Agent:
                 chat_id=message.chat_id,
                 thread_id=message.thread_id,
                 content=stream,
+                kind="log",
+                subkind="reasoning",
+            )
+            run.emit_event('chat-message', {
+                'messageId': new_message['id'],
+                'chatId': message.chat_id,
+                'threadId': message.thread_id,
+            })
+
+        async def on_toolcall_event(stream):
+            print("[agent] run output " + repr(stream))
+            new_message = await self.app.send_chat_message(
+                sender=self.id,
+                chat_id=message.chat_id,
+                thread_id=message.thread_id,
+                content=stream,
+                kind="log",
+                subkind="reasoning",
             )
             run.emit_event('chat-message', {
                 'messageId': new_message['id'],
@@ -139,6 +157,8 @@ class Agent:
             })
 
         await run.on_async('reasoning', on_reasoning_event)
+        await run.on_async('output', on_output_event)
+        await run.on_async('tool-call', on_toolcall_event)
 
         await self.run(run)
         return run

backend/src/app_mixins/chat.py

@@ -72,11 +72,14 @@ class ChatMixin:
         messages = await query.order_by("-id").all()
         messages.reverse()
 
+        # TODO: Stop repetition.
+        # There's db.Message and chat.Message, also should be combined somehow, or wrap db always.
         return [{
             "id": message.id,
             "time": message.time,
             "sender": message.sender,
             "kind": message.kind,
+            "subkind": message.subkind,
             "content": message.content,
             "threadId": message.thread_id,
         } for message in messages]

frontend/src/components/Message.vue

@@ -92,7 +92,7 @@ watch(() => [props.message.format, props.message.content], ([newFormat, newConte
     </template>
 
     <template v-if="message.type == 'log'">
-      <div class="sender">Log ({{message.sender}})</div>
+      <div class="log-sender">{{message.sender}}<span v-if="message.subkind"> [{{message.subkind}}]</span></div>
       <div class="content">{{content}}</div>
     </template>
 
@@ -155,6 +155,11 @@ watch(() => [props.message.format, props.message.content], ([newFormat, newConte
   font-family: monospace;
   font-size: 80%;
 }
+.message.log .log-sender {
+  font-family: monospace;
+  font-weight: bold;
+  font-size: 80%;
+}
 
 .resource {
   align-self: center;