feat(chat): support chat resources, implement chat-based remote discovery via resource messages

frontend/src/components/Message.vue

@@ -32,6 +32,8 @@ function chatEntryClass(msg) {
     return ['note'];
   } else if (msg.type == 'message') {
     return ['message', msg.sender == 'user' ? 'sent' : 'received'];
+  } else if (msg.type == 'resource') {
+    return ['resource', 'resource-' + (msg.subkind || 'generic')];
   } else if (msg.type == 'log') {
     return ['message', 'log'];
   } else {
@@ -39,6 +41,11 @@ function chatEntryClass(msg) {
   }
 }
 
+function resourceLabel(msg) {
+  if (msg.subkind == 'remote') return 'Remote';
+  return msg.subkind || 'Resource';
+}
+
 const format = ref(null);
 const content = ref("");
 
@@ -79,6 +86,11 @@ watch(() => [props.message.format, props.message.content], ([newFormat, newConte
       <div class="content">{{content}}</div>
     </template>
 
+    <template v-if="message.type == 'resource'">
+      <div class="resource-label">{{ resourceLabel(message) }}</div>
+      <div class="content">{{content}}</div>
+    </template>
+
     <template v-if="message.type == 'log'">
       <div class="sender">Log ({{message.sender}})</div>
       <div class="content">{{content}}</div>
@@ -143,4 +155,26 @@ watch(() => [props.message.format, props.message.content], ([newFormat, newConte
   font-family: monospace;
   font-size: 80%;
 }
+
+.resource {
+  align-self: center;
+  width: fit-content;
+  padding: 4px 12px;
+  border-radius: 12px;
+  border: 1px dashed var(--color-border);
+  background-color: var(--color-background-soft);
+  font-size: 85%;
+  display: flex;
+  gap: 0.5em;
+  align-items: baseline;
+}
+
+.resource .resource-label {
+  font-weight: bold;
+  opacity: 60%;
+}
+
+.resource .content {
+  font-family: monospace;
+}
 </style>