From f9370718bc4e0e23f5f91e8e1c427186ad07f49f Mon Sep 17 00:00:00 2001
From: Peter Steinberger <steipete@gmail.com>
Date: Tue, 9 Dec 2025 17:23:00 +0000
Subject: [PATCH] web: show surface + host/ip chips in chat UI

---
 .../Resources/WebChat/components/Messages.js  |  7 ++++-
 .../Resources/WebChat/utils/message-meta.js   | 31 +++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 apps/macos/Sources/Clawdis/Resources/WebChat/utils/message-meta.js

diff --git a/apps/macos/Sources/Clawdis/Resources/WebChat/components/Messages.js b/apps/macos/Sources/Clawdis/Resources/WebChat/components/Messages.js
index 20b3f36fe..ae8f98277 100644
--- a/apps/macos/Sources/Clawdis/Resources/WebChat/components/Messages.js
+++ b/apps/macos/Sources/Clawdis/Resources/WebChat/components/Messages.js
@@ -9,6 +9,7 @@ import { customElement, property } from "lit/decorators.js";
 import { renderTool } from "../tools/index.js";
 import { formatUsage } from "../utils/format.js";
 import { i18n } from "../utils/i18n.js";
+import { formatClock, renderSurfaceChip } from "../utils/message-meta.js";
 import "./ThinkingBlock.js";
 let UserMessage = class UserMessage extends LitElement {
     createRenderRoot() {
@@ -23,6 +24,10 @@ let UserMessage = class UserMessage extends LitElement {
             ? this.message.content
             : this.message.content.find((c) => c.type === "text")?.text || "";
         return html `
+			<div class="px-4 mb-1 flex items-center gap-2 text-[11px] uppercase tracking-[0.08em] text-muted-foreground">
+				${renderSurfaceChip(this.message.surface, this.message.senderHost, this.message.senderIp)}
+				<span class="opacity-70">${formatClock(this.message.timestamp)}</span>
+			</div>
 			<div class="flex justify-start mx-4">
 				<div class="user-message-container py-2 px-4 rounded-xl">
 					<markdown-block .content=${content}></markdown-block>
@@ -272,4 +277,4 @@ AbortedMessage = __decorate([
     customElement("aborted-message")
 ], AbortedMessage);
 export { AbortedMessage };
-//# sourceMappingURL=Messages.js.map
\ No newline at end of file
+//# sourceMappingURL=Messages.js.map
diff --git a/apps/macos/Sources/Clawdis/Resources/WebChat/utils/message-meta.js b/apps/macos/Sources/Clawdis/Resources/WebChat/utils/message-meta.js
new file mode 100644
index 000000000..b621ba271
--- /dev/null
+++ b/apps/macos/Sources/Clawdis/Resources/WebChat/utils/message-meta.js
@@ -0,0 +1,31 @@
+import { html } from "lit";
+import { i18n } from "./i18n.js";
+
+export function formatClock(ts) {
+  if (!ts) return "";
+  try {
+    const d = new Date(ts);
+    return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  } catch {
+    return "";
+  }
+}
+
+const palette = {
+  whatsapp: { label: "WhatsApp", class: "bg-emerald-600" },
+  telegram: { label: "Telegram", class: "bg-sky-600" },
+  webchat: { label: "WebChat", class: "bg-indigo-500" },
+  computer: { label: "Computer", class: "bg-slate-600" },
+};
+
+export function renderSurfaceChip(surface, senderHost, senderIp) {
+  const key = (surface || "computer").toLowerCase();
+  const meta = palette[key] ?? { label: surface || i18n("Unknown"), class: "bg-slate-500" };
+  const hostPart = senderHost ? ` • ${senderHost}` : "";
+  const ipPart = senderIp ? ` (${senderIp})` : "";
+
+  return html`<span class="inline-flex items-center gap-1 px-2 py-[2px] rounded-full text-[10px] font-semibold text-white ${meta.class}">
+      ${meta.label}${hostPart}${ipPart}
+    </span>`;
+}
+