+
+ `;
+ break;
+
+ case "no-document":
+ this.shadow.innerHTML = `
+ ${styleTag}
+
+
+ Loading comments...
+
+
+
+ `;
+ break;
+
+ case "no-comments-enabled":
+ this.shadow.innerHTML = `
+ ${styleTag}
+
+ No document found. Add a
+ <link rel="site.standard.document" href="at://..."> tag to your page.
+
+
+ `;
+ break;
+
+ case "empty":
+ this.shadow.innerHTML = `
+ ${styleTag}
+
+ Comments are not enabled for this post.
+
+
+
+ `;
+ break;
+
+ case "error":
+ this.shadow.innerHTML = `
+ ${styleTag}
+
+
+ Comments
+ +
+ No comments yet. Be the first to reply on Bluesky!
+
+
+
+ `;
+ break;
+
+ case "loaded": {
+ const replies = this.state.thread.replies?.filter(isThreadViewPost) ?? [];
+ const commentsHtml = replies.map((reply) => this.renderComment(reply)).join("");
+ const commentCount = this.countComments(replies);
+
+ this.shadow.innerHTML = `
+ ${styleTag}
+
+ Failed to load comments: ${this.escapeHtml(this.state.message)}
+
+
+
+ `;
+ break;
+ }
+ }
+ }
+
+ private renderComment(thread: ThreadViewPost): string {
+ const { post } = thread;
+ const author = post.author;
+ const displayName = author.displayName || author.handle;
+ const avatarHtml = author.avatar
+ ? `
+
+ ${commentCount} Comment${commentCount !== 1 ? "s" : ""}
+ +
+ ${commentsHtml}
+
+ ${getInitials(displayName)}
`;
+
+ const profileUrl = `https://bsky.app/profile/${author.did}`;
+ const textHtml = renderTextWithFacets(post.record.text, post.record.facets);
+ const timeAgo = formatRelativeTime(post.record.createdAt);
+
+ // Render nested replies
+ const nestedReplies = thread.replies?.filter(isThreadViewPost) ?? [];
+ const repliesHtml =
+ nestedReplies.length > 0
+ ? `${nestedReplies.map((r) => this.renderComment(r)).join("")}
`
+ : "";
+
+ return `
+
+
+ `;
+ }
+
+ private countComments(replies: ThreadViewPost[]): number {
+ let count = 0;
+ for (const reply of replies) {
+ count += 1;
+ const nested = reply.replies?.filter(isThreadViewPost) ?? [];
+ count += this.countComments(nested);
+ }
+ return count;
+ }
+
+ private escapeHtml(text: string): string {
+ const div = document.createElement("div");
+ div.textContent = text;
+ return div.innerHTML;
+ }
+}
diff --git a/packages/ui/src/components/sequoia-comments/styles.ts b/packages/ui/src/components/sequoia-comments/styles.ts
new file mode 100644
index 0000000..dd7098b
--- /dev/null
+++ b/packages/ui/src/components/sequoia-comments/styles.ts
@@ -0,0 +1,218 @@
+export const styles = `
+:host {
+ display: block;
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ color: var(--sequoia-fg-color, #1f2937);
+ line-height: 1.5;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+.sequoia-comments-container {
+ max-width: 100%;
+}
+
+.sequoia-loading,
+.sequoia-error,
+.sequoia-empty,
+.sequoia-warning {
+ padding: 1rem;
+ border-radius: var(--sequoia-border-radius, 8px);
+ text-align: center;
+}
+
+.sequoia-loading {
+ background: var(--sequoia-bg-color, #ffffff);
+ border: 1px solid var(--sequoia-border-color, #e5e7eb);
+ color: var(--sequoia-secondary-color, #6b7280);
+}
+
+.sequoia-loading-spinner {
+ display: inline-block;
+ width: 1.25rem;
+ height: 1.25rem;
+ border: 2px solid var(--sequoia-border-color, #e5e7eb);
+ border-top-color: var(--sequoia-accent-color, #2563eb);
+ border-radius: 50%;
+ animation: sequoia-spin 0.8s linear infinite;
+ margin-right: 0.5rem;
+ vertical-align: middle;
+}
+
+@keyframes sequoia-spin {
+ to { transform: rotate(360deg); }
+}
+
+.sequoia-error {
+ background: #fef2f2;
+ border: 1px solid #fecaca;
+ color: #dc2626;
+}
+
+.sequoia-warning {
+ background: #fffbeb;
+ border: 1px solid #fde68a;
+ color: #d97706;
+}
+
+.sequoia-empty {
+ background: var(--sequoia-bg-color, #ffffff);
+ border: 1px solid var(--sequoia-border-color, #e5e7eb);
+ color: var(--sequoia-secondary-color, #6b7280);
+}
+
+.sequoia-comments-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 1rem;
+ padding-bottom: 0.75rem;
+ border-bottom: 1px solid var(--sequoia-border-color, #e5e7eb);
+}
+
+.sequoia-comments-title {
+ font-size: 1.125rem;
+ font-weight: 600;
+ margin: 0;
+}
+
+.sequoia-reply-button {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.375rem;
+ padding: 0.5rem 1rem;
+ background: var(--sequoia-accent-color, #2563eb);
+ color: #ffffff;
+ border: none;
+ border-radius: var(--sequoia-border-radius, 8px);
+ font-size: 0.875rem;
+ font-weight: 500;
+ cursor: pointer;
+ text-decoration: none;
+ transition: background-color 0.15s ease;
+}
+
+.sequoia-reply-button:hover {
+ background: color-mix(in srgb, var(--sequoia-accent-color, #2563eb) 85%, black);
+}
+
+.sequoia-reply-button svg {
+ width: 1rem;
+ height: 1rem;
+}
+
+.sequoia-comments-list {
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+}
+
+.sequoia-comment {
+ padding: 1rem;
+ background: var(--sequoia-bg-color, #ffffff);
+ border: 1px solid var(--sequoia-border-color, #e5e7eb);
+ border-radius: var(--sequoia-border-radius, 8px);
+ margin-bottom: 0.75rem;
+}
+
+.sequoia-comment-header {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ margin-bottom: 0.5rem;
+}
+
+.sequoia-comment-avatar {
+ width: 2.5rem;
+ height: 2.5rem;
+ border-radius: 50%;
+ background: var(--sequoia-border-color, #e5e7eb);
+ object-fit: cover;
+ flex-shrink: 0;
+}
+
+.sequoia-comment-avatar-placeholder {
+ width: 2.5rem;
+ height: 2.5rem;
+ border-radius: 50%;
+ background: var(--sequoia-border-color, #e5e7eb);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ color: var(--sequoia-secondary-color, #6b7280);
+ font-weight: 600;
+ font-size: 1rem;
+}
+
+.sequoia-comment-meta {
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+}
+
+.sequoia-comment-author {
+ font-weight: 600;
+ color: var(--sequoia-fg-color, #1f2937);
+ text-decoration: none;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.sequoia-comment-author:hover {
+ color: var(--sequoia-accent-color, #2563eb);
+}
+
+.sequoia-comment-handle {
+ font-size: 0.875rem;
+ color: var(--sequoia-secondary-color, #6b7280);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.sequoia-comment-time {
+ font-size: 0.75rem;
+ color: var(--sequoia-secondary-color, #6b7280);
+ margin-left: auto;
+ flex-shrink: 0;
+}
+
+.sequoia-comment-text {
+ margin: 0;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+
+.sequoia-comment-text a {
+ color: var(--sequoia-accent-color, #2563eb);
+ text-decoration: none;
+}
+
+.sequoia-comment-text a:hover {
+ text-decoration: underline;
+}
+
+.sequoia-comment-replies {
+ margin-top: 0.75rem;
+ margin-left: 1.5rem;
+ padding-left: 1rem;
+ border-left: 2px solid var(--sequoia-border-color, #e5e7eb);
+}
+
+.sequoia-comment-replies .sequoia-comment {
+ margin-bottom: 0.5rem;
+}
+
+.sequoia-comment-replies .sequoia-comment:last-child {
+ margin-bottom: 0;
+}
+
+.sequoia-bsky-logo {
+ width: 1rem;
+ height: 1rem;
+}
+`;
diff --git a/packages/ui/src/components/sequoia-comments/utils.ts b/packages/ui/src/components/sequoia-comments/utils.ts
new file mode 100644
index 0000000..7aae3e4
--- /dev/null
+++ b/packages/ui/src/components/sequoia-comments/utils.ts
@@ -0,0 +1,127 @@
+/**
+ * Format a relative time string (e.g., "2 hours ago")
+ */
+export function formatRelativeTime(dateString: string): string {
+ const date = new Date(dateString);
+ const now = new Date();
+ const diffMs = now.getTime() - date.getTime();
+ const diffSeconds = Math.floor(diffMs / 1000);
+ const diffMinutes = Math.floor(diffSeconds / 60);
+ const diffHours = Math.floor(diffMinutes / 60);
+ const diffDays = Math.floor(diffHours / 24);
+ const diffWeeks = Math.floor(diffDays / 7);
+ const diffMonths = Math.floor(diffDays / 30);
+ const diffYears = Math.floor(diffDays / 365);
+
+ if (diffSeconds < 60) {
+ return "just now";
+ }
+ if (diffMinutes < 60) {
+ return `${diffMinutes}m ago`;
+ }
+ if (diffHours < 24) {
+ return `${diffHours}h ago`;
+ }
+ if (diffDays < 7) {
+ return `${diffDays}d ago`;
+ }
+ if (diffWeeks < 4) {
+ return `${diffWeeks}w ago`;
+ }
+ if (diffMonths < 12) {
+ return `${diffMonths}mo ago`;
+ }
+ return `${diffYears}y ago`;
+}
+
+/**
+ * Escape HTML special characters
+ */
+export function escapeHtml(text: string): string {
+ const div = document.createElement("div");
+ div.textContent = text;
+ return div.innerHTML;
+}
+
+/**
+ * Convert post text with facets to HTML
+ */
+export function renderTextWithFacets(
+ text: string,
+ facets?: Array<{
+ index: { byteStart: number; byteEnd: number };
+ features: Array<
+ | { $type: "app.bsky.richtext.facet#link"; uri: string }
+ | { $type: "app.bsky.richtext.facet#mention"; did: string }
+ | { $type: "app.bsky.richtext.facet#tag"; tag: string }
+ >;
+ }>,
+): string {
+ if (!facets || facets.length === 0) {
+ return escapeHtml(text);
+ }
+
+ // Convert text to bytes for proper indexing
+ const encoder = new TextEncoder();
+ const decoder = new TextDecoder();
+ const textBytes = encoder.encode(text);
+
+ // Sort facets by start index
+ const sortedFacets = [...facets].sort(
+ (a, b) => a.index.byteStart - b.index.byteStart,
+ );
+
+ let result = "";
+ let lastEnd = 0;
+
+ for (const facet of sortedFacets) {
+ const { byteStart, byteEnd } = facet.index;
+
+ // Add text before this facet
+ if (byteStart > lastEnd) {
+ const beforeBytes = textBytes.slice(lastEnd, byteStart);
+ result += escapeHtml(decoder.decode(beforeBytes));
+ }
+
+ // Get the facet text
+ const facetBytes = textBytes.slice(byteStart, byteEnd);
+ const facetText = decoder.decode(facetBytes);
+
+ // Find the first renderable feature
+ const feature = facet.features[0];
+ if (feature) {
+ if (feature.$type === "app.bsky.richtext.facet#link") {
+ result += `${escapeHtml(facetText)}`;
+ } else if (feature.$type === "app.bsky.richtext.facet#mention") {
+ result += `${escapeHtml(facetText)}`;
+ } else if (feature.$type === "app.bsky.richtext.facet#tag") {
+ result += `${escapeHtml(facetText)}`;
+ } else {
+ result += escapeHtml(facetText);
+ }
+ } else {
+ result += escapeHtml(facetText);
+ }
+
+ lastEnd = byteEnd;
+ }
+
+ // Add remaining text
+ if (lastEnd < textBytes.length) {
+ const remainingBytes = textBytes.slice(lastEnd);
+ result += escapeHtml(decoder.decode(remainingBytes));
+ }
+
+ return result;
+}
+
+/**
+ * Get initials from a name for avatar placeholder
+ */
+export function getInitials(name: string): string {
+ const parts = name.trim().split(/\s+/);
+ if (parts.length >= 2) {
+ return (parts[0]![0]! + parts[1]![0]!).toUpperCase();
+ }
+ return name.substring(0, 2).toUpperCase();
+}
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
new file mode 100644
index 0000000..8a7a485
--- /dev/null
+++ b/packages/ui/src/index.ts
@@ -0,0 +1,26 @@
+// Components
+export { SequoiaComments } from "./components/sequoia-comments";
+
+// AT Protocol client utilities
+export {
+ parseAtUri,
+ resolvePDS,
+ getRecord,
+ getDocument,
+ getPostThread,
+ buildBskyAppUrl,
+} from "./lib/atproto-client";
+
+// Types
+export type {
+ StrongRef,
+ ProfileViewBasic,
+ PostRecord,
+ PostView,
+ ThreadViewPost,
+ BlockedPost,
+ NotFoundPost,
+ DocumentRecord,
+} from "./types/bluesky";
+
+export { isThreadViewPost } from "./types/bluesky";
diff --git a/packages/ui/src/lib/atproto-client.ts b/packages/ui/src/lib/atproto-client.ts
new file mode 100644
index 0000000..7297ed0
--- /dev/null
+++ b/packages/ui/src/lib/atproto-client.ts
@@ -0,0 +1,144 @@
+import type {
+ DIDDocument,
+ DocumentRecord,
+ GetPostThreadResponse,
+ GetRecordResponse,
+ ThreadViewPost,
+} from "../types/bluesky";
+
+/**
+ * Parse an AT URI into its components
+ * Format: at://did/collection/rkey
+ */
+export function parseAtUri(
+ atUri: string,
+): { did: string; collection: string; rkey: string } | null {
+ const match = atUri.match(/^at:\/\/([^/]+)\/([^/]+)\/(.+)$/);
+ if (!match) return null;
+ return {
+ did: match[1]!,
+ collection: match[2]!,
+ rkey: match[3]!,
+ };
+}
+
+/**
+ * Resolve a DID to its PDS URL
+ * Supports did:plc and did:web methods
+ */
+export async function resolvePDS(did: string): Promise
+ ${avatarHtml}
+
+ ${timeAgo}
+
+ ${textHtml}
+ ${repliesHtml} +Blog Post Title
+This is a test page for the sequoia-comments web component.
+The component will look for a <link rel="site.standard.document"> tag in the document head to find the AT Protocol document, then fetch and display Bluesky replies as comments.