feat(ui,api,telegram): shared conversation panel for obsidian and /admin/panel, bind materializes a window, inbox survives link previews

ui/src/lib/panel/markdown.svelte

@@ -1,14 +1,64 @@
 <script lang="ts">
   import { cn } from "$lib/utils";
-  import { renderMarkdown } from "./markdown";
+  import { usePanelHost } from "./host";
+  import { linkOf, renderMarkdown } from "./markdown";
 
   let { text, class: className = "" }: { text: string; class?: string } =
     $props();
 
-  const html = $derived(renderMarkdown(text));
+  const host = usePanelHost();
+  const html = $derived(host.markdown ? "" : renderMarkdown(text));
+
+  // Links inside rendered markdown are the only interactive things here:
+  // real anchors, reached by pointer or by Enter on the focused link. The
+  // handlers ride on the container so re-rendered HTML keeps them.
+  function follow(event: MouseEvent | KeyboardEvent) {
+    if (event instanceof KeyboardEvent && event.key !== "Enter") {
+      return;
+    }
+    const link = linkOf(event);
+    if (!link) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    host.openLink(link.target, link.kind);
+  }
+
+  function links(node: HTMLElement) {
+    node.addEventListener("click", follow);
+    node.addEventListener("keydown", follow);
+    return {
+      destroy() {
+        node.removeEventListener("click", follow);
+        node.removeEventListener("keydown", follow);
+      },
+    };
+  }
+
+  function render(node: HTMLElement, value: string) {
+    let dispose = host.markdown?.(node, value);
+    return {
+      destroy() {
+        dispose?.();
+      },
+      update(next: string) {
+        dispose?.();
+        dispose = host.markdown?.(node, next);
+      },
+    };
+  }
 </script>
 
-<div class={cn("prose prose-sm max-w-none", className)}>
-  <!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitized in renderMarkdown -->
-  {@html html}
-</div>
+{#if host.markdown}
+  <div
+    class={cn("beaver-md markdown-rendered", className)}
+    use:links
+    use:render={text}
+  ></div>
+{:else}
+  <div class={cn("prose prose-sm max-w-none", className)} use:links>
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitized in renderMarkdown -->
+    {@html html}
+  </div>
+{/if}