@firedrill-tools/linkedin 0.1.1

package/firedrill/tools/linkedin/app/site/post.js

@@ -0,0 +1,131 @@
+// Feed post card: actor line, commentary, article/reshare frames, social counts and the action bar.
+import { el, call, relativeTime, avatar, iconButton } from "./ui.js";
+import { icon } from "./icons.js";
+import { reactionBadge } from "./reactions.js";
+import { renderLittleText } from "./text.js";
+import { session, isViewer, hrefForUrn, parseEntityUrn, rememberActor } from "./store.js";
+import { showMenu, notSimulated } from "./overlay.js";
+import { toggleComments } from "./comments.js";
+import { openReactionsModal } from "./reactors.js";
+
+const VISIBILITY = { PUBLIC: ["globe", "Anyone on or off LinkedIn"], CONNECTIONS: ["people", "Connections only"], LOGGED_IN: ["lock", "Members only"] };
+
+function hostname(source) {
+  const match = /^[a-z]+:\/\/([^/?#:]+)/i.exec(String(source ?? ""));
+  return match ? match[1] : String(source ?? "");
+}
+
+function actorLine(actor, post, { compact = false } = {}) {
+  const isOrg = actor.kind === "organization";
+  const href = hrefForUrn(actor.urn);
+  const nameLine = el("span", { class: "post-actor__name-line" }, [
+    el("a", { class: "post-actor__name", text: actor.name, attrs: { href } }),
+    isViewer(actor.urn) ? el("span", { class: "post-actor__degree", text: " • You" }) : null,
+  ]);
+  const [visIcon, visLabel] = VISIBILITY[post.visibility] ?? VISIBILITY.PUBLIC;
+  const time = el("span", { class: "post-actor__time" }, [
+    el("span", { text: relativeTime(post.publishedAt ?? post.createdAt) }),
+    post.lifecycleStateInfo?.isEditedByAuthor ? el("span", { text: " • Edited" }) : null,
+    el("span", { text: " • " }),
+    el("span", { class: "post-actor__vis", title: visLabel, attrs: { role: "img", "aria-label": visLabel } }, icon(visIcon)),
+  ]);
+  return el("div", { class: `post-actor${compact ? " post-actor--compact" : ""}` }, [
+    el("a", { class: "post-actor__avatar", attrs: { href, "aria-label": actor.name, tabindex: "-1" } }, avatar(actor.name, actor.urn, compact ? 32 : 48, isOrg)),
+    el("div", { class: "post-actor__meta" }, [
+      nameLine,
+      actor.headline ? el("span", { class: "post-actor__headline", text: isOrg ? actor.headline : actor.headline }) : isOrg ? el("span", { class: "post-actor__headline", text: "Company page" }) : null,
+      time,
+    ]),
+  ]);
+}
+
+function commentary(text) {
+  const box = el("div", { class: "post-text" });
+  const inner = renderLittleText(el("span", { class: "post-text__inner", attrs: { dir: "ltr" } }), text);
+  box.append(inner);
+  const more = el("button", { class: "post-text__more", text: "…more", attrs: { type: "button" }, on: { click: () => { box.classList.add("post-text--expanded"); more.remove(); } } });
+  box.append(more);
+  requestAnimationFrame(() => { if (inner.scrollHeight <= inner.clientHeight + 2) more.remove(); });
+  return box;
+}
+
+function articleCard(article) {
+  return el("a", { class: "post-article", attrs: { href: "#/feed", "data-not-simulated": "Opening external links" } }, [
+    el("div", { class: "post-article__art", attrs: { "aria-hidden": "true" } }, icon("article")),
+    el("div", { class: "post-article__meta" }, [
+      el("span", { class: "post-article__title", text: article.title }),
+      el("span", { class: "post-article__source", text: hostname(article.source) }),
+    ]),
+  ]);
+}
+
+export function canManage(authorUrn) {
+  if (isViewer(authorUrn)) return true;
+  const parsed = parseEntityUrn(authorUrn);
+  return parsed?.kind === "organization" && (session.viewer?.pages ?? []).some((p) => p.organizationUrn === authorUrn && p.roles.some((r) => r === "ADMINISTRATOR" || r === "CONTENT_ADMINISTRATOR"));
+}
+
+/** Build a post card. ctx: { onReload(): Promise } */
+export function renderPostCard(entry, ctx) {
+  const { post, actor } = entry;
+  rememberActor(actor);
+  if (entry.reshareOf) rememberActor(entry.reshareOf.actor);
+  const state = { social: entry.social, viewerReaction: entry.viewerReaction };
+  const card = el("article", { class: "card feed-post", attrs: { "data-urn": post.id, "aria-label": `Post by ${actor.name}` } });
+
+  const menuButton = iconButton("ellipsis", `Open control menu for post by ${actor.name}`, () => showMenu(menuButton, postMenu(entry, ctx)), "feed-post__menu");
+  menuButton.setAttribute("aria-haspopup", "menu");
+  const hide = iconButton("close", `Hide post by ${actor.name}`, () => notSimulated("Hiding posts from your feed"), "feed-post__hide");
+  card.append(el("div", { class: "feed-post__controls" }, [menuButton, hide]));
+  card.append(actorLine(actor, post));
+  if (post.commentary) card.append(commentary(post.commentary));
+  if (post.content?.article) card.append(articleCard(post.content.article));
+  if (entry.reshareOf) {
+    const inner = el("div", { class: "post-reshare" }, [actorLine(entry.reshareOf.actor, entry.reshareOf.post, { compact: true })]);
+    if (entry.reshareOf.post.commentary) inner.append(commentary(entry.reshareOf.post.commentary));
+    if (entry.reshareOf.post.content?.article) inner.append(articleCard(entry.reshareOf.post.content.article));
+    card.append(inner);
+  } else if (post.reshareContext) {
+    card.append(el("div", { class: "post-reshare post-reshare--gone", text: "This content isn't available" }));
+  }
+
+  const counts = el("div", { class: "social-counts" });
+  const actions = el("div", { class: "social-actions" });
+  card.append(counts, actions);
+  const commentsHost = el("div", { class: "comments-host" });
+  card.append(commentsHost);
+
+  const paint = () => renderCounts(counts, entry, state, commentsHost);
+  paint();
+  renderActions(actions, entry, state, { paint, commentsHost, ctx });
+  card.refreshSocial = async () => {
+    try {
+      const meta = await call("social_metadata.get", { entity: post.id });
+      state.social = { ...state.social, reactionSummaries: meta.reactionSummaries, commentSummary: meta.commentSummary, commentsState: meta.commentsState };
+      paint();
+    } catch { /* counts stay as last read */ }
+  };
+  return card;
+}
+
+function renderCounts(host, entry, state, commentsHost) {
+  host.replaceChildren();
+  const summaries = Object.values(state.social.reactionSummaries ?? {}).sort((a, b) => b.count - a.count);
+  const total = summaries.reduce((sum, s) => sum + s.count, 0);
+  const comments = state.social.commentSummary?.count ?? 0;
+  const reposts = state.social.repostCount ?? 0;
+  if (total === 0 && comments === 0 && reposts === 0) { host.hidden = true; return; }
+  host.hidden = false;
+  if (total > 0) {
+    const badges = el("span", { class: "social-counts__badges" }, summaries.slice(0, 3).map((s) => reactionBadge(s.reactionType, 16)));
+    host.append(el("button", { class: "social-counts__reactions", attrs: { type: "button", "aria-label": `${total} reactions` }, on: { click: () => openReactionsModal(entry.post, state.social.reactionSummaries) } }, [badges, el("span", { text: String(total) })]));
+  }
+  const right = el("span", { class: "social-counts__right" });
+  if (comments > 0) right.append(el("button", { class: "social-counts__link", text: `${comments} comment${comments === 1 ? "" : "s"}`, attrs: { type: "button" }, on: { click: () => toggleComments(commentsHost, entry, { onChanged: () => commentsHost.closest(".feed-post")?.refreshSocial?.() }) } }));
+  if (comments > 0 && reposts > 0) right.append(el("span", { class: "social-counts__dot", text: "•", attrs: { "aria-hidden": "true" } }));
+  if (reposts > 0) right.append(el("span", { class: "social-counts__link social-counts__link--static", text: `${reposts} repost${reposts === 1 ? "" : "s"}` }));
+  host.append(right);
+}
+
+import { renderActions } from "./post-actions.js";
+import { postMenu } from "./post-menu.js";

package/firedrill/tools/linkedin/app/site/profile.js

@@ -0,0 +1,139 @@
+// Profile (/in/{id}): top card, contact info, and the Activity card with posts and drafts (own profile).
+import { el, call, describe, avatar, newKey, toast, busy, relativeTime } from "./ui.js";
+import { icon } from "./icons.js";
+import { session, rememberPerson } from "./store.js";
+import { littleTextToPlain } from "./text.js";
+import { openModal, confirmDialog } from "./overlay.js";
+import { openComposer } from "./composer.js";
+import { footer } from "./feed.js";
+
+const PAGE = 5;
+
+export function renderProfile(main, personId) {
+  const self = session.viewer.personUrn === `urn:li:person:${personId}`;
+  const top = el("section", { class: "card profile-top", attrs: { "aria-busy": "true" } }, el("div", { class: "profile-top__loading" }, el("span", { class: "spinner", attrs: { "aria-label": "Loading profile" } })));
+  const activity = el("section", { class: "card profile-activity" });
+  main.replaceChildren(el("div", { class: "profile-layout" }, [el("div", { class: "profile-main" }, [top, activity]), el("aside", { class: "profile-aside" }, [
+    el("div", { class: "card aside-card" }, [el("h2", { class: "aside-card__title", text: "Profile language" }), el("p", { class: "muted", text: "English" })]),
+    el("div", { class: "card aside-card" }, [el("h2", { class: "aside-card__title", text: "Public profile & URL" }), el("p", { class: "muted", text: "Custom profile URLs aren't simulated." })]),
+    footer(),
+  ])]));
+
+  const load = async () => {
+    try {
+      const person = self ? await call("profile.me") : await call("people.get", { personId });
+      rememberPerson(person);
+      paintTop(top, person, self);
+      if (self) paintActivity(activity, person, load); else paintOther(activity, person);
+    } catch (error) {
+      top.removeAttribute("aria-busy");
+      top.replaceChildren(el("div", { class: "state-card", attrs: { role: "alert" } }, [
+        el("h1", { class: "state-card__title", text: error.code === "NOT_FOUND" ? "This profile is not available" : "Couldn't load this profile" }),
+        el("p", { class: "state-card__text", text: describe(error) }),
+        el("a", { class: "btn btn--secondary", text: "Go to your feed", attrs: { href: "#/feed" } }),
+      ]));
+      activity.hidden = true;
+    }
+  };
+  void load();
+  return { refresh: load };
+}
+
+function paintTop(top, person, self) {
+  const name = `${person.localizedFirstName} ${person.localizedLastName}`.trim();
+  top.removeAttribute("aria-busy");
+  const actions = self
+    ? [el("button", { class: "btn btn--primary btn--sm", text: "Open to", attrs: { type: "button", "data-not-simulated": "Open to work" } }), el("button", { class: "btn btn--secondary btn--sm", text: "Add profile section", attrs: { type: "button", "data-not-simulated": "Profile sections" } }), el("button", { class: "btn btn--muted btn--sm", text: "Resources", attrs: { type: "button", "data-not-simulated": "Profile resources" } })]
+    : [el("button", { class: "btn btn--primary btn--sm", attrs: { type: "button", "data-not-simulated": "Messaging" } }, [icon("send"), el("span", { text: "Message" })]), el("button", { class: "btn btn--muted btn--sm", text: "More", attrs: { type: "button", "data-not-simulated": "Profile actions" } })];
+  const contact = el("button", { class: "profile-top__contact", text: "Contact info", attrs: { type: "button" }, on: { click: () => showContact(name, person, self) } });
+  top.replaceChildren(
+    el("div", { class: "profile-top__cover", attrs: { "aria-hidden": "true" } }),
+    el("div", { class: "profile-top__body" }, [
+      el("div", { class: "profile-top__avatar" }, avatar(name, `urn:li:person:${person.id}`, 152)),
+      self ? el("button", { class: "icon-btn profile-top__edit", title: "Edit intro", attrs: { type: "button", "aria-label": "Edit intro", "data-not-simulated": "Editing your profile intro" } }, icon("pencil")) : null,
+      el("h1", { class: "profile-top__name", text: name }),
+      person.localizedHeadline ? el("p", { class: "profile-top__headline", text: person.localizedHeadline }) : null,
+      el("p", { class: "profile-top__meta" }, [contact]),
+      el("p", { class: "profile-top__connections" }, self
+        ? el("a", { text: `${session.viewer.connectionCount} connection${session.viewer.connectionCount === 1 ? "" : "s"}`, attrs: { href: "#/mynetwork" } })
+        : el("span", { class: "muted", text: "1st degree connection" })),
+      el("div", { class: "profile-top__actions" }, actions),
+    ]),
+  );
+}
+
+async function showContact(name, person, self) {
+  const modal = openModal({ title: name });
+  modal.body.append(el("h3", { class: "contact__title", text: "Contact Info" }), el("div", { class: "contact__row" }, [icon("nav-home"), el("div", {}, [el("div", { class: "t-bold", text: "Your Profile" }), el("span", { class: "muted", text: `linkedin.com/in/${person.vanityName}` })])]));
+  if (!self) return;
+  try {
+    const info = await call("profile.userinfo");
+    if (info.email) modal.body.append(el("div", { class: "contact__row" }, [icon("nav-messaging"), el("div", {}, [el("div", { class: "t-bold", text: "Email" }), el("span", { class: "muted", text: info.email })])]));
+    else modal.body.append(el("p", { class: "muted", text: "No e-mail address is shared with this app." }));
+  } catch (error) {
+    modal.body.append(el("p", { class: "comments__error", attrs: { role: "alert" }, text: describe(error) }));
+  }
+}
+
+function paintOther(activity, person) {
+  activity.hidden = false;
+  activity.replaceChildren(el("div", { class: "section-head" }, el("h2", { class: "section-head__title", text: "Activity" })), el("p", { class: "profile-activity__empty", text: `${person.localizedFirstName}'s posts appear in your feed when they share them with you.` }));
+}
+
+function paintActivity(activity, person, reload) {
+  const personUrn = `urn:li:person:${person.id}`;
+  let tab = "PUBLISHED";
+  const list = el("div", { class: "activity-list" });
+  const more = el("div", { class: "activity-more" });
+  const tabButtons = [["PUBLISHED", "Posts"], ["DRAFT", "Drafts"]].map(([key, label]) => el("button", { class: "chip", text: label, attrs: { type: "button", "aria-pressed": String(key === tab) }, on: { click: () => { tab = key; tabButtons.forEach((b) => b.setAttribute("aria-pressed", String(b.textContent === label))); void load(true); } } }));
+  let start = 0;
+  let collected = 0;
+
+  const load = async (reset) => {
+    if (reset) { start = 0; collected = 0; list.replaceChildren(el("span", { class: "spinner", attrs: { "aria-label": "Loading activity" } })); }
+    more.replaceChildren();
+    try {
+      // Drafts and posts share one author listing; page until a screenful of the chosen state or the end.
+      let shown = 0;
+      let done = false;
+      if (reset) list.replaceChildren();
+      while (shown < PAGE && !done) {
+        const page = await call("posts.list_by_author", { author: personUrn, viewContext: "AUTHOR", sortBy: "LAST_MODIFIED", start, count: 10 });
+        start += page.elements.length;
+        done = page.elements.length === 0 || !page.paging.links.some((l) => l.rel === "next");
+        for (const post of page.elements.filter((p) => p.lifecycleState === tab)) { list.append(activityRow(post, reload)); shown += 1; collected += 1; }
+      }
+      if (collected === 0) list.append(el("p", { class: "profile-activity__empty", text: tab === "DRAFT" ? "You have no drafts." : "You haven't posted yet. Posts you share will be displayed here." }));
+      if (!done) more.append(el("button", { class: "btn btn--tertiary", text: tab === "DRAFT" ? "Show more drafts" : "Show more posts", attrs: { type: "button" }, on: { click: (e) => busy(e.currentTarget, () => load(false)) } }));
+    } catch (error) {
+      if (reset) list.replaceChildren();
+      list.append(el("p", { class: "comments__error", attrs: { role: "alert" }, text: describe(error) }));
+    }
+  };
+
+  activity.hidden = false;
+  activity.replaceChildren(
+    el("div", { class: "section-head" }, [el("div", {}, [el("h2", { class: "section-head__title", text: "Activity" }), el("a", { class: "section-head__sub", text: `${session.viewer.connectionCount} connections`, attrs: { href: "#/mynetwork" } })]), el("button", { class: "btn btn--secondary btn--sm", text: "Create a post", attrs: { type: "button" }, on: { click: () => openComposer({ onDone: () => load(true) }) } })]),
+    el("div", { class: "chips", attrs: { role: "group", "aria-label": "Activity type" } }, tabButtons),
+    list, more,
+  );
+  void load(true);
+}
+
+function activityRow(post, reload) {
+  const draft = post.lifecycleState === "DRAFT";
+  const row = el("article", { class: "activity-row" }, [
+    el("p", { class: "activity-row__meta" }, [el("span", { text: `${session.viewer.name} ${draft ? "saved a draft" : "posted this"} • ${relativeTime(post.lastModifiedAt)}` }), draft ? el("span", { class: "badge badge--draft", text: "Draft" }) : null]),
+    el("p", { class: "activity-row__text", text: littleTextToPlain(post.commentary) || (post.content?.article?.title ?? "") }),
+  ]);
+  if (draft) {
+    const publish = el("button", { class: "btn btn--primary btn--sm", text: "Publish", attrs: { type: "button" } });
+    publish.addEventListener("click", () => busy(publish, async () => {
+      if (!(await confirmDialog({ title: "Publish draft?", message: "This draft will be posted and shown to your network.", confirmLabel: "Publish" }))) return;
+      try { await call("posts.update", { postUrn: post.id, lifecycleState: "PUBLISHED" }, newKey()); toast("Post successful."); await reload(); }
+      catch (error) { toast(describe(error), { error: true }); }
+    }));
+    row.append(el("div", { class: "activity-row__actions" }, publish));
+  }
+  return row;
+}

package/firedrill/tools/linkedin/app/site/reactions.js

@@ -0,0 +1,46 @@
+// The six reaction types with their product labels, colours and badge glyphs (original simple paths).
+const NS = "http://www.w3.org/2000/svg";
+
+export const REACTIONS = [
+  { type: "LIKE", label: "Like", colour: "#378fe9", verb: "Like",
+    d: "M11.6 7.1H9.3l.4-2.3c.1-.7-.3-1.4-1-1.5h-.3L6 6.6V12h4.6c.5 0 .9-.3 1-.8l.7-3c.1-.6-.3-1.1-.7-1.1zM4 6.6H3.3v5.4H5V6.6z" },
+  { type: "PRAISE", label: "Celebrate", colour: "#6dae4f", verb: "Celebrate",
+    d: "M6.3 3.5l.6 1.8M9.7 3.5l-.6 1.8M8 2.8v1.9M4.6 7.4l2.8-1.6 1.1 1.2 1.9-.8 1.8 2.8-1.2 3.3H7.2L4.3 9.4c-.4-.4-.3-1.1.3-2z" },
+  { type: "APPRECIATION", label: "Support", colour: "#a872e8", verb: "Support",
+    d: "M8 4.9c.6-1.1 2.6-1.2 2.9.3.2 1-.8 2-2.9 3.3-2.1-1.3-3.1-2.3-2.9-3.3.3-1.5 2.3-1.4 2.9-.3zM3.2 9.2l1.8-.5 2.4 1h2.2c.5 0 .7.6.3.9l-.6.2h-2l3.4.1 1.8-1.2c.4-.2.8.3.5.6l-2.4 2.2H6.2L3.2 12z" },
+  { type: "EMPATHY", label: "Love", colour: "#df704d", verb: "Love",
+    d: "M8 12.5S3 9.6 3 6.3C3 4.9 4.1 3.8 5.4 3.8c1.1 0 2 .6 2.6 1.5.6-.9 1.5-1.5 2.6-1.5 1.3 0 2.4 1.1 2.4 2.5 0 3.3-5 6.2-5 6.2z" },
+  { type: "INTEREST", label: "Insightful", colour: "#f5bb5c", verb: "Insightful",
+    d: "M8 2.8a3.6 3.6 0 00-2.2 6.4c.4.3.6.8.6 1.3v.4h3.2v-.4c0-.5.2-1 .6-1.3A3.6 3.6 0 008 2.8zM6.4 11.7h3.2v.8c0 .4-.4.8-.8.8H7.2c-.4 0-.8-.4-.8-.8z" },
+  { type: "ENTERTAINMENT", label: "Funny", colour: "#44bfd3", verb: "Funny",
+    d: "M8 2.9a5.1 5.1 0 100 10.2A5.1 5.1 0 008 2.9zM6.1 5.6a.8.8 0 110 1.6.8.8 0 010-1.6zm3.8 0a.8.8 0 110 1.6.8.8 0 010-1.6zM4.9 8.6h6.2A3.2 3.2 0 018 11.4a3.2 3.2 0 01-3.1-2.8z" },
+];
+export const REACTION_BY_TYPE = new Map(REACTIONS.map((r) => [r.type, r]));
+
+/** A coloured circular badge (size px) for a reaction type. */
+export function reactionBadge(type, size = 16) {
+  const reaction = REACTION_BY_TYPE.get(type) ?? REACTIONS[0];
+  const svg = document.createElementNS(NS, "svg");
+  svg.setAttribute("viewBox", "0 0 16 16");
+  svg.setAttribute("width", String(size));
+  svg.setAttribute("height", String(size));
+  svg.setAttribute("class", `reaction-badge reaction-badge--${reaction.type.toLowerCase()}`);
+  svg.setAttribute("role", "img");
+  svg.setAttribute("aria-label", reaction.label);
+  const circle = document.createElementNS(NS, "circle");
+  circle.setAttribute("cx", "8");
+  circle.setAttribute("cy", "8");
+  circle.setAttribute("r", "8");
+  circle.setAttribute("fill", reaction.colour);
+  const path = document.createElementNS(NS, "path");
+  path.setAttribute("d", reaction.d);
+  if (reaction.type === "PRAISE") {
+    path.setAttribute("fill", "#fff");
+    path.setAttribute("stroke", "#fff");
+    path.setAttribute("stroke-width", "0.9");
+    path.setAttribute("stroke-linecap", "round");
+    path.setAttribute("stroke-linejoin", "round");
+  } else path.setAttribute("fill", reaction.type === "INTEREST" ? "#6b3e00" : "#fff");
+  svg.append(circle, path);
+  return svg;
+}

package/firedrill/tools/linkedin/app/site/reactors.js

@@ -0,0 +1,71 @@
+// Reactions modal: All / per-type tabs with counts; rows page through reactions.list (newest first).
+import { el, call, describe, avatar } from "./ui.js";
+import { REACTIONS, reactionBadge } from "./reactions.js";
+import { openModal } from "./overlay.js";
+import { resolveEntity, hrefForUrn } from "./store.js";
+
+const PAGE = 20;
+
+export function openReactionsModal(post, summaries = {}) {
+  const modal = openModal({ title: "Reactions", className: "modal--reactors" });
+  const total = Object.values(summaries).reduce((sum, s) => sum + s.count, 0);
+  const tabs = el("div", { class: "reactors__tabs", attrs: { role: "tablist" } });
+  const list = el("ul", { class: "reactors__list", attrs: { role: "tabpanel" } });
+  const status = el("div", { class: "reactors__status", attrs: { role: "status" } });
+  modal.body.append(tabs, list, status);
+
+  const rows = []; // every loaded reaction, newest first
+  let nextStart = 0;
+  let done = false;
+  let filter = null;
+
+  const addTab = (type, label, count) => {
+    const tab = el("button", { class: "reactors__tab", attrs: { type: "button", role: "tab", "aria-selected": String(type === filter), "aria-label": `${label} ${count}` } }, [
+      type ? reactionBadge(type, 16) : null, el("span", { text: type ? String(count) : `All ${count}` }),
+    ]);
+    tab.addEventListener("click", () => { filter = type; for (const t of tabs.children) t.setAttribute("aria-selected", String(t === tab)); void paint(); });
+    tabs.append(tab);
+  };
+  addTab(null, "All", total);
+  for (const reaction of REACTIONS) if (summaries[reaction.type]) addTab(reaction.type, reaction.label, summaries[reaction.type].count);
+
+  const loadPage = async () => {
+    const page = await call("reactions.list", { entity: post.id, sort: "REVERSE_CHRONOLOGICAL", start: nextStart, count: PAGE });
+    rows.push(...page.elements);
+    nextStart += page.elements.length;
+    done = page.elements.length === 0 || !page.paging.links.some((link) => link.rel === "next");
+  };
+
+  let painting = 0;
+  const paint = async () => {
+    const token = ++painting;
+    status.replaceChildren(el("span", { class: "spinner", attrs: { "aria-label": "Loading reactions" } }));
+    try {
+      // A per-type tab keeps paging until it has a screenful of matches or the list ends, so nothing is hidden.
+      const visible = () => rows.filter((r) => !filter || r.reactionType === filter);
+      if (rows.length === 0 && !done) await loadPage();
+      while (filter && !done && visible().length < PAGE) await loadPage();
+      if (token !== painting) return;
+      list.replaceChildren();
+      for (const reaction of visible()) list.append(await renderRow(reaction));
+      if (token !== painting) return;
+      status.replaceChildren();
+      if (visible().length === 0) status.append(el("p", { class: "muted", text: "No reactions yet." }));
+      if (!done) status.append(el("button", { class: "btn btn--tertiary btn--sm", text: "Show more results", attrs: { type: "button" }, on: { click: async () => { await loadPage(); await paint(); } } }));
+    } catch (error) {
+      status.replaceChildren(el("p", { class: "comments__error", attrs: { role: "alert" }, text: describe(error) }));
+    }
+  };
+  void paint();
+}
+
+async function renderRow(reaction) {
+  const who = await resolveEntity(reaction.created.actor);
+  return el("li", { class: "reactors__row" }, [
+    el("a", { class: "reactors__avatar", attrs: { href: hrefForUrn(reaction.created.actor), "aria-label": who.name } }, [avatar(who.name, reaction.created.actor, 48, who.kind === "organization"), reactionBadge(reaction.reactionType, 16)]),
+    el("div", { class: "reactors__meta" }, [
+      el("a", { class: "reactors__name", text: who.name, attrs: { href: hrefForUrn(reaction.created.actor) } }),
+      el("div", { class: "reactors__sub", text: who.headline ?? "" }),
+    ]),
+  ]);
+}

package/firedrill/tools/linkedin/app/site/shell.js

@@ -0,0 +1,107 @@
+// Global navigation: active item, the Me menu and the search typeahead (connections + exact company page).
+import { $, $$, el, call, avatar } from "./ui.js";
+import { session, rememberOrganization } from "./store.js";
+import { notSimulated } from "./overlay.js";
+
+export function setActiveNav(key) {
+  for (const item of $$("[data-nav]")) {
+    if (item.dataset.nav === key) item.setAttribute("aria-current", "page");
+    else item.removeAttribute("aria-current");
+  }
+}
+
+export function paintMe() {
+  const v = session.viewer;
+  const holder = $("#me-avatar");
+  const fresh = avatar(v.name, v.personUrn, 24);
+  fresh.id = "me-avatar";
+  holder.replaceWith(fresh);
+}
+
+function closeMe() {
+  $("#me-menu").hidden = true;
+  $("#me-button").setAttribute("aria-expanded", "false");
+}
+
+function openMe() {
+  const v = session.viewer;
+  const menu = $("#me-menu");
+  const personId = v.personUrn.split(":").pop();
+  menu.replaceChildren(
+    el("div", { class: "me-menu__head" }, [avatar(v.name, v.personUrn, 56), el("div", {}, [el("div", { class: "me-menu__name", text: v.name }), v.headline ? el("div", { class: "me-menu__headline", text: v.headline }) : null])]),
+    el("div", { class: "me-menu__view" }, el("a", { class: "btn btn--secondary btn--sm", text: "View Profile", attrs: { href: `#/in/${encodeURIComponent(personId)}`, role: "menuitem" }, on: { click: closeMe } })),
+    el("div", { class: "me-menu__section" }, [
+      el("div", { class: "me-menu__title", text: "Account" }),
+      ...["Try Premium for $0", "Settings & Privacy", "Help", "Language"].map((label) => el("button", { class: "me-menu__link", text: label, attrs: { type: "button", role: "menuitem" }, on: { click: () => { closeMe(); notSimulated(label); } } })),
+    ]),
+    el("div", { class: "me-menu__section" }, [
+      el("div", { class: "me-menu__title", text: "Manage" }),
+      el("button", { class: "me-menu__link", text: "Posts & Activity", attrs: { type: "button", role: "menuitem" }, on: { click: () => { closeMe(); location.hash = `#/in/${encodeURIComponent(personId)}`; } } }),
+      ...v.pages.map((p) => el("a", { class: "me-menu__link", text: `Company: ${p.name}`, attrs: { href: `#/company/${encodeURIComponent(p.vanityName)}`, role: "menuitem" }, on: { click: closeMe } })),
+      el("button", { class: "me-menu__link", text: "Job Posting Account", attrs: { type: "button", role: "menuitem" }, on: { click: () => { closeMe(); notSimulated("Job posting"); } } }),
+    ]),
+    el("div", { class: "me-menu__section" }, el("button", { class: "me-menu__link", text: "Sign Out", title: "Signing out is not simulated", attrs: { type: "button", role: "menuitem", disabled: true } })),
+  );
+  menu.hidden = false;
+  $("#me-button").setAttribute("aria-expanded", "true");
+  menu.querySelector("a, button:not([disabled])")?.focus();
+}
+
+export function initShell() {
+  $("#me-button").addEventListener("click", () => ($("#me-menu").hidden ? openMe() : closeMe()));
+  document.addEventListener("mousedown", (event) => {
+    if (!$("#me-menu").hidden && !event.target.closest(".nav-me")) closeMe();
+    if (!event.target.closest(".search")) hideTypeahead();
+  });
+  document.addEventListener("keydown", (event) => { if (event.key === "Escape") { closeMe(); hideTypeahead(); } });
+  const input = $("#search-input");
+  let timer;
+  input.addEventListener("input", () => { clearTimeout(timer); timer = setTimeout(() => void search(input.value), 180); });
+  input.addEventListener("focus", () => { if (input.value.trim()) void search(input.value); });
+  input.addEventListener("keydown", (event) => {
+    const items = $$(".typeahead__item", $("#search-results"));
+    if (!items.length || !["ArrowDown", "ArrowUp", "Enter"].includes(event.key)) return;
+    event.preventDefault();
+    let index = items.findIndex((i) => i.getAttribute("aria-selected") === "true");
+    if (event.key === "Enter") { (items[index] ?? items[0]).click(); return; }
+    index = event.key === "ArrowDown" ? (index + 1) % items.length : (index - 1 + items.length) % items.length;
+    items.forEach((item, i) => item.setAttribute("aria-selected", String(i === index)));
+  });
+}
+
+function hideTypeahead() {
+  $("#search-results").hidden = true;
+  $("#search-input").setAttribute("aria-expanded", "false");
+}
+
+let searchToken = 0;
+async function search(raw) {
+  const query = raw.trim();
+  const box = $("#search-results");
+  if (!query) { hideTypeahead(); return; }
+  const token = ++searchToken;
+  const vanity = query.toLowerCase().replace(/\s+/g, "-");
+  const [people, companies] = await Promise.all([
+    call("connections.list", { query, start: 0, count: 6 }).catch(() => null),
+    /^[a-z0-9-]{1,100}$/.test(vanity) ? call("organizations.find_by_vanity_name", { vanityName: vanity }).catch(() => null) : Promise.resolve(null),
+  ]);
+  if (token !== searchToken) return;
+  const go = (href) => () => { hideTypeahead(); $("#search-input").value = ""; location.hash = href; };
+  box.replaceChildren();
+  const orgs = companies?.elements ?? [];
+  const members = people?.elements ?? [];
+  if (members.length) box.append(el("div", { class: "typeahead__heading", text: "Your connections" }));
+  for (const { person } of members) {
+    const name = `${person.localizedFirstName} ${person.localizedLastName}`;
+    box.append(el("button", { class: "typeahead__item", attrs: { type: "button", role: "option", "aria-selected": "false" }, on: { click: go(`#/in/${encodeURIComponent(person.id)}`) } }, [avatar(name, `urn:li:person:${person.id}`, 32), el("span", { class: "typeahead__text" }, [el("span", { class: "typeahead__name", text: name }), el("span", { class: "typeahead__sub", text: ` • 1st${person.localizedHeadline ? ` • ${person.localizedHeadline}` : ""}` })])]));
+  }
+  if (orgs.length) box.append(el("div", { class: "typeahead__heading", text: "Companies" }));
+  for (const org of orgs) {
+    rememberOrganization(org);
+    box.append(el("button", { class: "typeahead__item", attrs: { type: "button", role: "option", "aria-selected": "false" }, on: { click: go(`#/company/${encodeURIComponent(org.vanityName)}`) } }, [avatar(org.localizedName, `urn:li:organization:${org.id}`, 32, true), el("span", { class: "typeahead__text" }, [el("span", { class: "typeahead__name", text: org.localizedName }), el("span", { class: "typeahead__sub", text: " • Company" })])]));
+  }
+  if (!members.length && !orgs.length) box.append(el("p", { class: "typeahead__empty", text: people === null ? "Search is unavailable right now." : `No results for "${query.slice(0, 80)}"` }));
+  box.append(el("button", { class: "typeahead__footer", text: "See all results", attrs: { type: "button", "data-not-simulated": "Full search results" } }));
+  box.hidden = false;
+  $("#search-input").setAttribute("aria-expanded", "true");
+}

package/firedrill/tools/linkedin/app/site/store.js

@@ -0,0 +1,62 @@
+// Session facts (viewer from feed.list) and name lookups for person/organization URNs, cached per revision.
+import { call } from "./ui.js";
+
+export const session = { viewer: null, revision: null, feedPaging: null };
+const people = new Map(); // personId -> {name, headline, vanityName}
+const orgs = new Map(); // orgId -> {name, vanityName}
+const pending = new Map();
+
+export function resetCaches() { people.clear(); orgs.clear(); pending.clear(); }
+
+export function parseEntityUrn(urn) {
+  const match = /^urn:li:(person|organization):([A-Za-z0-9_-]{1,64})$/.exec(String(urn ?? ""));
+  return match ? { kind: match[1], id: match[2] } : null;
+}
+
+export function rememberActor(actor) {
+  const parsed = parseEntityUrn(actor?.urn);
+  if (!parsed) return;
+  const record = { name: actor.name, headline: actor.headline ?? null, vanityName: actor.vanityName };
+  (parsed.kind === "person" ? people : orgs).set(parsed.id, record);
+}
+export function rememberOrganization(org) {
+  if (org && org.id !== undefined) orgs.set(String(org.id), { name: org.localizedName ?? "", vanityName: org.vanityName ?? "" });
+}
+export function rememberPerson(person) {
+  if (person?.id) people.set(person.id, { name: `${person.localizedFirstName} ${person.localizedLastName}`.trim(), headline: person.localizedHeadline ?? null, vanityName: person.vanityName });
+}
+
+export function isViewer(urn) { return Boolean(session.viewer) && urn === session.viewer.personUrn; }
+/** Pages the viewer can act as (post/comment/react for). */
+export function actingPages() {
+  const allowed = new Set(["ADMINISTRATOR", "CONTENT_ADMINISTRATOR", "DIRECT_SPONSORED_CONTENT_POSTER"]);
+  return (session.viewer?.pages ?? []).filter((p) => p.roles.some((r) => allowed.has(r)));
+}
+
+export function hrefForUrn(urn) {
+  const parsed = parseEntityUrn(urn);
+  if (!parsed) return "#/feed";
+  if (parsed.kind === "person") return `#/in/${encodeURIComponent(parsed.id)}`;
+  const org = orgs.get(parsed.id);
+  return org?.vanityName ? `#/company/${encodeURIComponent(org.vanityName)}` : "#/feed";
+}
+
+/** Resolve display facts for a URN; unknown members use people.get, unknown organizations fall back to a label. */
+export async function resolveEntity(urn) {
+  const parsed = parseEntityUrn(urn);
+  if (!parsed) return { name: "LinkedIn Member", headline: null, kind: "person", id: "" };
+  const cache = parsed.kind === "person" ? people : orgs;
+  if (cache.has(parsed.id)) return { ...cache.get(parsed.id), kind: parsed.kind, id: parsed.id };
+  const pendingKey = urn;
+  if (!pending.has(pendingKey)) {
+    const lookup = parsed.kind === "person"
+      ? call("people.get", { personId: parsed.id }).then(rememberPerson)
+      : call("organizations.get", { organizationId: parsed.id }).then(rememberOrganization);
+    pending.set(pendingKey, lookup.catch(() => undefined));
+  }
+  await pending.get(pendingKey);
+  const found = cache.get(parsed.id);
+  return found
+    ? { ...found, kind: parsed.kind, id: parsed.id }
+    : { name: parsed.kind === "person" ? "LinkedIn Member" : "Organization", headline: null, kind: parsed.kind, id: parsed.id };
+}

package/firedrill/tools/linkedin/app/site/text.js

@@ -0,0 +1,80 @@
+// Little-text rendering (hashtag templates, @[Name](urn) mentions, backslash escapes) into safe DOM nodes.
+import { el } from "./ui.js";
+import { hrefForUrn } from "./store.js";
+
+const RESERVED = new Set(["\\", "|", "{", "}", "@", "[", "]", "(", ")", "<", ">", "#", "*", "_", "~"]);
+
+/** Escape plain user text for the posts commentary field. `#word` stays unescaped so the service templates hashtags. */
+export function escapeLittleText(text) {
+  let out = "";
+  const chars = [...String(text)];
+  for (let i = 0; i < chars.length; i += 1) {
+    const char = chars[i];
+    const next = chars[i + 1] ?? "";
+    const hashtag = char === "#" && /[\p{L}\p{N}_]/u.test(next) && !/[\p{L}\p{N}_]/u.test(chars[i - 1] ?? "");
+    out += RESERVED.has(char) && !hashtag ? `\\${char}` : char;
+  }
+  return out;
+}
+
+/** Parse little text into segments: {kind:"text"|"hashtag"|"mention", text, urn?}. Linear single pass. */
+export function parseLittleText(source) {
+  const chars = [...String(source ?? "")];
+  const segments = [];
+  let buffer = "";
+  const flush = () => { if (buffer) segments.push({ kind: "text", text: buffer }); buffer = ""; };
+  for (let i = 0; i < chars.length; i += 1) {
+    const char = chars[i];
+    if (char === "\\" && i + 1 < chars.length) { buffer += chars[i + 1]; i += 1; continue; }
+    if (char === "{" && chars.slice(i + 1, i + 12).join("") === "hashtag|\\#|") {
+      const end = chars.indexOf("}", i + 12);
+      if (end > i + 12) { flush(); segments.push({ kind: "hashtag", text: chars.slice(i + 12, end).join("") }); i = end; continue; }
+    }
+    if (char === "@" && chars[i + 1] === "[") {
+      const close = chars.indexOf("]", i + 2);
+      if (close > i + 1 && chars[close + 1] === "(") {
+        const paren = chars.indexOf(")", close + 2);
+        const urn = paren > close ? chars.slice(close + 2, paren).join("") : "";
+        if (urn.startsWith("urn:li:")) {
+          flush();
+          segments.push({ kind: "mention", text: chars.slice(i + 2, close).join("").replace(/\\(.)/gu, "$1"), urn });
+          i = paren;
+          continue;
+        }
+      }
+    }
+    buffer += char;
+  }
+  flush();
+  return segments;
+}
+
+/** Plain text form (for counting and edit boxes). */
+export function littleTextToPlain(source) {
+  return parseLittleText(source).map((s) => (s.kind === "hashtag" ? `#${s.text}` : s.text)).join("");
+}
+
+/** Render commentary into a container. */
+export function renderLittleText(container, source) {
+  for (const segment of parseLittleText(source)) {
+    if (segment.kind === "text") container.append(document.createTextNode(segment.text));
+    else if (segment.kind === "hashtag") container.append(el("a", { class: "hashtag", text: `#${segment.text}`, attrs: { href: "#/feed", "data-not-simulated": "Hashtag feeds" } }));
+    else container.append(el("a", { class: "mention", text: segment.text, attrs: { href: hrefForUrn(segment.urn) } }));
+  }
+  return container;
+}
+
+/** Render comment text with {start,length,value} mention attributes (offsets in UTF-16 units). */
+export function renderAttributedText(container, text, attributes = []) {
+  const ranges = [...attributes].filter((a) => a && Number.isInteger(a.start) && Number.isInteger(a.length)).sort((a, b) => a.start - b.start);
+  let cursor = 0;
+  for (const range of ranges) {
+    if (range.start < cursor || range.start + range.length > text.length) continue;
+    container.append(document.createTextNode(text.slice(cursor, range.start)));
+    const urn = range.value?.person?.person ?? range.value?.organization?.organization;
+    container.append(el("a", { class: "mention", text: text.slice(range.start, range.start + range.length), attrs: { href: urn ? hrefForUrn(urn) : "#/feed" } }));
+    cursor = range.start + range.length;
+  }
+  container.append(document.createTextNode(text.slice(cursor)));
+  return container;
+}