gloomberb 0.11.0 → 0.11.2

package/src/renderers/share/layout-view.tsx

@@ -0,0 +1,133 @@
+/** @jsxImportSource react */
+import type { CSSProperties } from "react";
+import type { DockLayoutNode, PaneInstanceConfig } from "../../types/config";
+import type { LayoutMarketplaceEntry } from "../../layout-marketplace/payload";
+
+const PANE_NAMES: Record<string, string> = {
+  "chart-composer": "Chart",
+  "credit-conditions": "Credit Spreads",
+  "earnings-calendar": "Earnings Calendar",
+  "fx-matrix": "FX Cross Rates",
+  "kelly-sizer": "Position Sizer",
+  "market-halts": "Market Halts",
+  "market-heatmap": "Market Heatmap",
+  "news-breaking": "Breaking News",
+  "news-feed": "News Feed",
+  "news-industry": "Sector News",
+  "news-top": "Top News",
+  "options-calculator": "Options Calculator",
+  "portfolio-list": "Portfolio",
+  "prediction-markets": "Prediction Markets",
+  "quick-notes": "Notes",
+  sec: "SEC",
+  "thirteenf-funds": "13F Funds",
+  "ticker-news": "Ticker News",
+  "ticker-research": "Ticker Research",
+  "twitter-feed": "X Feed",
+  "volatility-term-structure": "VIX Term Structure",
+  "world-indices": "World Indices",
+};
+
+export function marketplacePaneName(paneId: string): string {
+  return PANE_NAMES[paneId] ?? paneId
+    .split("-")
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}
+
+function paneSubtitle(pane: PaneInstanceConfig): string | null {
+  if (pane.binding?.kind === "fixed") return pane.binding.symbol;
+  const query = pane.params?.query;
+  return query?.trim() ? query.trim().slice(0, 80) : null;
+}
+
+function PaneCard({ pane }: { pane: PaneInstanceConfig | undefined }) {
+  if (!pane) return <div className="layout-pane missing">Unavailable pane</div>;
+  const subtitle = paneSubtitle(pane);
+  return (
+    <div className="layout-pane">
+      <strong>{pane.title?.trim() || marketplacePaneName(pane.paneId)}</strong>
+      {subtitle ? <span>{subtitle}</span> : null}
+    </div>
+  );
+}
+
+function DockPreview({
+  node,
+  panes,
+}: {
+  node: DockLayoutNode;
+  panes: ReadonlyMap<string, PaneInstanceConfig>;
+}) {
+  if (node.kind === "pane") return <PaneCard pane={panes.get(node.instanceId)} />;
+  const firstStyle = { "--share-ratio": node.ratio } as CSSProperties;
+  const secondStyle = { "--share-ratio": 1 - node.ratio } as CSSProperties;
+  return (
+    <div className={`layout-split ${node.axis}`}>
+      <div className="layout-split-child" style={firstStyle}>
+        <DockPreview node={node.first} panes={panes} />
+      </div>
+      <div className="layout-split-child" style={secondStyle}>
+        <DockPreview node={node.second} panes={panes} />
+      </div>
+    </div>
+  );
+}
+
+function formatDate(value: string): string {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime())
+    ? ""
+    : date.toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
+}
+
+export function LayoutShareView({
+  entry,
+  openLiveUrl,
+}: {
+  entry: LayoutMarketplaceEntry;
+  openLiveUrl: string;
+}) {
+  const panes = new Map(entry.layout.instances.map((pane) => [pane.instanceId, pane]));
+  const docked = new Set<string>();
+  const collect = (node: DockLayoutNode | null) => {
+    if (!node) return;
+    if (node.kind === "pane") {
+      docked.add(node.instanceId);
+      return;
+    }
+    collect(node.first);
+    collect(node.second);
+  };
+  collect(entry.layout.dockRoot);
+  const extra = entry.layout.instances.filter((pane) => !docked.has(pane.instanceId));
+  const author = entry.author.username ? `@${entry.author.username}` : entry.author.displayName;
+  const date = formatDate(entry.publishedAt);
+
+  return (
+    <main className="layout-share wide">
+      <header>
+        <p className="eyebrow">Shared via Gloomberb</p>
+        <h1>{entry.name}</h1>
+        <p className="layout-meta">{[author, date, `${entry.layout.instances.length} panes`].filter(Boolean).join(" · ")}</p>
+      </header>
+
+      <section className="layout-workspace" aria-label={`${entry.name} layout preview`}>
+        {entry.layout.dockRoot
+          ? <DockPreview node={entry.layout.dockRoot} panes={panes} />
+          : <p>No docked panes</p>}
+        {extra.length > 0 ? (
+          <div className="layout-extra-panes">
+            {extra.map((pane) => <PaneCard key={pane.instanceId} pane={pane} />)}
+          </div>
+        ) : null}
+      </section>
+
+      <div className="handoff">
+        <a className="cta" href={openLiveUrl}>Use this layout</a>
+        <p className="descriptor">Opens in Gloomberb as an independent, editable copy.</p>
+      </div>
+    </main>
+  );
+}

package/src/renderers/share/main.tsx

@@ -0,0 +1,102 @@
+/** @jsxImportSource react */
+import "./styles.css";
+import { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import {
+  getPublicMarketplaceLayout,
+  openLiveMarketplaceLayoutUrl,
+  parseMarketplaceLayoutId,
+} from "../../layout-marketplace/api";
+import type { LayoutMarketplaceEntry } from "../../layout-marketplace/payload";
+import {
+  deleteShare,
+  getShare,
+  openLiveShareUrl,
+  parseShareId,
+  type ShareRecord,
+} from "../../shares/api";
+import { LayoutShareView } from "./layout-view";
+import { ShareView } from "./view";
+
+function LayoutApp({ id }: { id: string }) {
+  const [state, setState] = useState<{
+    entry?: LayoutMarketplaceEntry;
+    error?: string;
+  }>({});
+  useEffect(() => {
+    const controller = new AbortController();
+    getPublicMarketplaceLayout(
+      id,
+      (url, init) => fetch(url, { ...init, signal: controller.signal }),
+    )
+      .then((entry) => setState(entry
+        ? { entry }
+        : { error: "This shared layout is unavailable." }))
+      .catch(() => {
+        if (!controller.signal.aborted) setState({ error: "This shared layout could not be loaded." });
+      });
+    return () => controller.abort();
+  }, [id]);
+
+  return state.entry
+    ? <LayoutShareView entry={state.entry} openLiveUrl={openLiveMarketplaceLayoutUrl(id)} />
+    : <main><h1>Gloomberb</h1><p>{state.error ?? "Loading shared layout..."}</p></main>;
+}
+
+function ContentShareApp({ id }: { id: string }) {
+  const [state, setState] = useState<{
+    share?: ShareRecord;
+    error?: string;
+    deleting?: boolean;
+    deleted?: boolean;
+  }>({});
+  useEffect(() => {
+    const controller = new AbortController();
+    getShare(id, (url, init) => fetch(url, { ...init, signal: controller.signal }))
+      .then((share) => setState(share ? { share } : { error: "This share is unavailable or has expired." }))
+      .catch(() => { if (!controller.signal.aborted) setState({ error: "This share could not be loaded." }); });
+    return () => controller.abort();
+  }, [id]);
+  const remove = async () => {
+    if (!state.share?.ownedByViewer || state.deleting) return;
+    setState((current) => ({ ...current, deleting: true, error: undefined }));
+    try {
+      await deleteShare(id);
+      setState({ deleted: true });
+    } catch (error) {
+      setState((current) => ({
+        ...current,
+        deleting: false,
+        error: error instanceof Error ? error.message : "Could not delete share.",
+      }));
+    }
+  };
+  if (state.deleted) return <main><h1>Share deleted</h1><p>This link is no longer available.</p></main>;
+  if (state.share) {
+    return (
+      <ShareView
+        share={state.share}
+        openLiveUrl={openLiveShareUrl(id)}
+        deleting={state.deleting === true}
+        deleteError={state.error}
+        onDelete={state.share.ownedByViewer ? remove : undefined}
+      />
+    );
+  }
+  return <main><h1>Gloomberb</h1><p>{state.error ?? "Loading shared view..."}</p></main>;
+}
+
+function SocialShareApp() {
+  const pathname = window.location.pathname;
+  const layoutId = parseMarketplaceLayoutId(pathname);
+  if (layoutId) return <LayoutApp id={layoutId} />;
+  if (pathname.startsWith("/l/")) return <main><h1>Gloomberb</h1><p>Invalid layout link.</p></main>;
+  const shareId = parseShareId(pathname);
+  return shareId
+    ? <ContentShareApp id={shareId} />
+    : <main><h1>Gloomberb</h1><p>Invalid share link.</p></main>;
+}
+
+const root = document.getElementById("root");
+if (!root) throw new Error("Missing root element");
+createRoot(root).render(<SocialShareApp />);

package/src/renderers/share/styles.css

@@ -0,0 +1,54 @@
+html { color-scheme: dark; background: #272a34; color: #f2f2f2; font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+body { margin: 0; }
+main { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: 64px 0; }
+main.wide { width: min(1180px, calc(100% - 40px)); }
+h1 { margin: 0 0 28px; color: #f1b94a; font-size: 24px; }
+a { display: inline-block; margin-top: 24px; color: #f1b94a; }
+.article-text { white-space: pre-wrap; overflow-wrap: anywhere; }
+.table-wrap { overflow: auto; border: 1px solid #4a4e5c; }
+table { width: 100%; border-collapse: collapse; }
+th, td { padding: 8px 10px; border-bottom: 1px solid #3a3e49; text-align: left; white-space: nowrap; }
+th { color: #f1b94a; background: #30333d; }
+.chart { width: 100%; height: auto; border: 1px solid #4a4e5c; background: #20232b; }
+.series { fill: none; stroke: #f1b94a; stroke-width: 2; vector-effect: non-scaling-stroke; }
+.series-1 { stroke: #62b8f6; } .series-2 { stroke: #7fd18a; } .series-3 { stroke: #ef7f7f; } .series-4 { stroke: #b697ef; } .series-5 { stroke: #e29b63; }
+.legend { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 0; list-style: none; color: #b8bbc5; }
+.owner-actions { display: flex; align-items: center; gap: 12px; margin-top: 32px; }
+.owner-actions button { border: 1px solid #6d7180; border-radius: 4px; padding: 6px 10px; background: transparent; color: #f2f2f2; font: inherit; cursor: pointer; }
+.owner-actions button:disabled { cursor: default; opacity: 0.55; }
+.owner-actions [role="alert"] { color: #ef7f7f; }
+:focus-visible { outline: 2px solid #f1b94a; outline-offset: 2px; }
+.eyebrow { margin: 0 0 10px; color: #b8bbc5; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
+main.pane h1 { margin-bottom: 14px; overflow-wrap: anywhere; }
+.pane-description { margin: 0; max-width: 62ch; color: #d5d7de; overflow-wrap: anywhere; }
+.pane-facts { margin: 28px 0 0; border: 1px solid #4a4e5c; background: #20232b; }
+.pane-facts > div { display: flex; gap: 16px; padding: 8px 12px; border-bottom: 1px solid #3a3e49; }
+.pane-facts > div:last-child { border-bottom: none; }
+.pane-facts dt { flex: 0 0 clamp(110px, 26%, 200px); color: #b8bbc5; }
+.pane-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
+.handoff { margin-top: 32px; }
+.cta { margin: 0; border: 1px solid #f1b94a; border-radius: 4px; padding: 10px 16px; color: #f1b94a; text-decoration: none; }
+.cta:hover { background: #f1b94a; color: #20232b; }
+.descriptor { margin: 14px 0 0; max-width: 58ch; color: #b8bbc5; }
+.layout-share h1 { margin-bottom: 10px; overflow-wrap: anywhere; }
+.layout-meta { margin: 0; color: #b8bbc5; }
+.layout-workspace { position: relative; display: flex; height: 440px; margin-top: 28px; padding: 10px; border: 1px solid #4a4e5c; background: #181b22; overflow: hidden; }
+.layout-split { display: flex; flex: 1 1 0; min-width: 0; min-height: 0; gap: 8px; }
+.layout-split.horizontal { flex-direction: row; }
+.layout-split.vertical { flex-direction: column; }
+.layout-split-child { display: flex; flex-grow: var(--share-ratio); flex-basis: 0; min-width: 0; min-height: 0; }
+.layout-pane { display: flex; flex: 1 1 0; min-width: 0; min-height: 42px; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 12px; border: 1px solid #3a4759; background: #20232b; overflow: hidden; }
+.layout-pane strong { color: #f1b94a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.layout-pane span { color: #b8bbc5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.layout-pane.missing { color: #b8bbc5; }
+.layout-extra-panes { position: absolute; right: 20px; bottom: 20px; display: grid; width: min(360px, 42%); gap: 8px; padding: 8px; border: 1px solid #52657d; background: #181b22; }
+@media (max-width: 640px) {
+  main { padding: 40px 0; }
+  .pane-facts > div { flex-direction: column; gap: 2px; }
+  .pane-facts dt { flex: none; }
+  .cta { display: block; text-align: center; }
+  .layout-workspace { height: 360px; padding: 6px; }
+  .layout-split { gap: 4px; }
+  .layout-pane { padding: 7px; font-size: 12px; }
+  .layout-extra-panes { right: 10px; bottom: 10px; width: 52%; }
+}

package/src/renderers/share/view.test.tsx

@@ -0,0 +1,100 @@
+import { expect, test } from "bun:test";
+import { renderToStaticMarkup } from "react-dom/server";
+import { ShareView } from "./view";
+
+test("share rendering escapes content and protects external links", () => {
+  const html = renderToStaticMarkup(<ShareView share={{
+    kind: "article",
+    data: {
+      title: "<img src=x onerror=alert(1)>",
+      text: "<script>alert(1)</script>",
+      sourceUrl: "https://example.com/story",
+    },
+    createdAt: "2026-08-21T00:00:00Z",
+    expiresAt: "2026-09-20T00:00:00Z",
+    ownedByViewer: true,
+  }} onDelete={() => {}} />);
+  expect(html).not.toContain("<script>");
+  expect(html).toContain("&lt;script&gt;");
+  expect(html).toContain('target="_blank"');
+  expect(html).toContain('rel="noopener noreferrer"');
+  expect(html).toContain("Delete share");
+});
+
+test("portable pane share renders sanitized pane configuration", () => {
+  const html = renderToStaticMarkup(<ShareView
+    share={{
+      kind: "pane",
+      data: {
+        version: 2,
+        title: "Fed Markets",
+        description: "Prediction markets filtered to the Fed.",
+        layout: {
+          schemaVersion: 2,
+          sourceConfigVersion: 13,
+          layout: {
+            dockRoot: null,
+            instances: [{
+              instanceId: "p1",
+              paneId: "prediction-markets",
+              binding: { kind: "none" },
+              params: { query: "fed", scope: "polymarket" },
+            }],
+            floating: [{ instanceId: "p1", x: 0, y: 0, width: 100, height: 30 }],
+            detached: [],
+          },
+          paneState: {},
+        },
+      },
+      createdAt: "2026-08-25T00:00:00Z",
+      expiresAt: "2026-09-24T00:00:00Z",
+      ownedByViewer: false,
+    }}
+    openLiveUrl="https://api.gloom.sh/shares/abc/open"
+  />);
+  expect(html).toContain("Fed Markets");
+  expect(html).toContain("Prediction Markets");
+  expect(html).toContain("Query");
+  expect(html).toContain("fed");
+  expect(html).toContain("polymarket");
+  expect(html).toContain("Explore this pane live");
+  expect(html).not.toContain("p1");
+});
+
+test("pane share renders the handoff copy, tracked CTA and printable facts only", () => {
+  const html = renderToStaticMarkup(<ShareView
+    share={{
+      kind: "pane",
+      data: {
+        version: 1,
+        templateId: "watchlist",
+        title: "Momentum <script>alert(1)</script>",
+        description: "Movers I watch daily.",
+        data: {
+          symbols: ["AAPL", "MSFT"],
+          lookbackDays: 90,
+          blank: "   ",
+          nestedConfig: { hidden: true },
+        },
+      },
+      createdAt: "2026-08-25T00:00:00Z",
+      expiresAt: "2026-09-24T00:00:00Z",
+      ownedByViewer: true,
+    }}
+    openLiveUrl="https://api.gloom.sh/shares/abc/open"
+    onDelete={() => {}}
+  />);
+  expect(html).toContain("Shared via Gloomberb");
+  expect(html).toContain("A free, open-source finance terminal for market data, charts, and research.");
+  expect(html).toContain('href="https://api.gloom.sh/shares/abc/open"');
+  expect(html).toContain("Explore this pane live");
+  expect(html).toContain("Movers I watch daily.");
+  expect(html).toContain("Symbols");
+  expect(html).toContain("AAPL, MSFT");
+  expect(html).toContain("Lookback Days");
+  expect(html).not.toContain("[object Object]");
+  expect(html).not.toContain("Nested Config");
+  expect(html).not.toContain("Blank");
+  expect(html).not.toContain("<script>");
+  expect(html).toContain("Delete share");
+});

package/src/renderers/share/view.tsx

@@ -0,0 +1,150 @@
+/** @jsxImportSource react */
+import type { ShareRecord } from "../../shares/api";
+
+const FACT_LIMIT = 8;
+const FACT_MAX_LENGTH = 120;
+
+function factValue(value: unknown): string | null {
+  if (typeof value === "string") return value.trim() ? value.trim().slice(0, FACT_MAX_LENGTH) : null;
+  if (typeof value === "number") return Number.isFinite(value) ? String(value) : null;
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (Array.isArray(value)) {
+    const items = value.filter((item) => typeof item === "string" || typeof item === "number");
+    return items.length ? items.join(", ").slice(0, FACT_MAX_LENGTH) : null;
+  }
+  return null;
+}
+
+function factLabel(key: string): string {
+  const spaced = key.replace(/[_-]+/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").trim();
+  return spaced ? spaced.charAt(0).toUpperCase() + spaced.slice(1) : key;
+}
+
+function paneFacts(data: Record<string, unknown>): Array<{ key: string; label: string; value: string }> {
+  const facts: Array<{ key: string; label: string; value: string }> = [];
+  for (const [key, raw] of Object.entries(data)) {
+    const value = factValue(raw);
+    if (value !== null) facts.push({ key, label: factLabel(key), value });
+    if (facts.length === FACT_LIMIT) break;
+  }
+  return facts;
+}
+
+function SourceLink({ url }: { url?: string }) {
+  return url ? <a href={url} target="_blank" rel="noopener noreferrer">View source</a> : null;
+}
+
+function OwnerActions({
+  deleting,
+  error,
+  onDelete,
+}: {
+  deleting: boolean;
+  error?: string;
+  onDelete?: () => void;
+}) {
+  if (!onDelete) return null;
+  return (
+    <div className="owner-actions">
+      <button type="button" disabled={deleting} onClick={onDelete}>
+        {deleting ? "Deleting..." : "Delete share"}
+      </button>
+      {error ? <span role="alert">{error}</span> : null}
+    </div>
+  );
+}
+
+export function ShareView({
+  share,
+  openLiveUrl,
+  deleting = false,
+  deleteError,
+  onDelete,
+}: {
+  share: ShareRecord;
+  /** Platform-tracked `/shares/:id/open` URL. */
+  openLiveUrl?: string;
+  deleting?: boolean;
+  deleteError?: string;
+  onDelete?: () => void;
+}) {
+  const ownerActions = (
+    <OwnerActions deleting={deleting} error={deleteError} onDelete={onDelete} />
+  );
+  if (share.kind === "pane") {
+    const instance = share.data.version === 2
+      ? share.data.layout.layout.instances[0]
+      : null;
+    const facts = share.data.version === 1
+      ? paneFacts(share.data.data)
+      : paneFacts({
+          paneType: instance
+            ? factLabel(instance.paneId).replace(/\b\w/g, (character) => character.toUpperCase())
+            : undefined,
+          ...(instance?.binding?.kind === "fixed" ? { symbol: instance.binding.symbol } : {}),
+          ...(instance?.params ?? {}),
+          ...(instance?.settings ?? {}),
+        });
+    return (
+      <main className="pane">
+        <header>
+          <p className="eyebrow">Shared via Gloomberb</p>
+          <h1>{share.data.title}</h1>
+          {share.data.description ? <p className="pane-description">{share.data.description}</p> : null}
+        </header>
+        {facts.length ? (
+          <dl className="pane-facts">
+            {facts.map((fact) => (
+              <div key={fact.key}>
+                <dt>{fact.label}</dt>
+                <dd>{fact.value}</dd>
+              </div>
+            ))}
+          </dl>
+        ) : null}
+        <div className="handoff">
+          {openLiveUrl ? <a className="cta" href={openLiveUrl}>Explore this pane live</a> : null}
+          <p className="descriptor">A free, open-source finance terminal for market data, charts, and research.</p>
+        </div>
+        {ownerActions}
+      </main>
+    );
+  }
+  if (share.kind === "article") {
+    return <main><h1>{share.data.title}</h1><p className="article-text">{share.data.text}</p><SourceLink url={share.data.sourceUrl} />{ownerActions}</main>;
+  }
+  if (share.kind === "table") {
+    return (
+      <main className="wide">
+        <h1>{share.data.title}</h1>
+        <div className="table-wrap"><table><thead><tr>{share.data.columns.map((column) => <th key={column.key}>{column.label}</th>)}</tr></thead>
+          <tbody>{share.data.rows.map((row, index) => <tr key={index}>{share.data.columns.map((column) => <td key={column.key}>{String(row[column.key] ?? "")}</td>)}</tr>)}</tbody>
+        </table></div>
+        <SourceLink url={share.data.sourceUrl} />
+        {ownerActions}
+      </main>
+    );
+  }
+  const values = share.data.series.flatMap((series) => series.points.map((point) => point.y));
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const span = max - min || 1;
+  return (
+    <main className="wide">
+      <h1>{share.data.title}</h1>
+      <svg className="chart" viewBox="0 0 1000 420" role="img" aria-label={share.data.title}>
+        {share.data.series.map((series, seriesIndex) => {
+          const points = series.points.map((point, index) => {
+            const x = series.points.length <= 1 ? 500 : 20 + (index / (series.points.length - 1)) * 960;
+            const y = 400 - ((point.y - min) / span) * 380;
+            return `${x},${y}`;
+          }).join(" ");
+          return <polyline key={series.name} points={points} className={`series series-${seriesIndex % 6}`} />;
+        })}
+      </svg>
+      <ul className="legend">{share.data.series.map((series) => <li key={series.name}>{series.name}</li>)}</ul>
+      <SourceLink url={share.data.sourceUrl} />
+      {ownerActions}
+    </main>
+  );
+}

package/src/shares/api.test.ts

@@ -0,0 +1,105 @@
+import { describe, expect, test } from "bun:test";
+import { createShare, deleteShare, getShare, openLiveShareUrl, publicShareUrl, SHARE_API_ORIGIN } from "./api";
+import { parseSharePayload } from "./payload";
+
+const article = { kind: "article", data: { title: "AAPL", text: "Research", sourceUrl: "https://example.com/a" } } as const;
+const portablePane = {
+  kind: "pane",
+  data: {
+    version: 2,
+    title: "AAPL Price",
+    layout: {
+      schemaVersion: 2,
+      sourceConfigVersion: 13,
+      layout: {
+        dockRoot: null,
+        instances: [{ instanceId: "p1", paneId: "graph-price", binding: { kind: "fixed", symbol: "AAPL" } }],
+        floating: [{ instanceId: "p1", x: 0, y: 0, width: 100, height: 30 }],
+        detached: [],
+      },
+      paneState: {},
+    },
+  },
+} as const;
+const shareId = "0123456789abcdef0123456789abcdef";
+
+describe("share API client", () => {
+  test("validates strict payloads and http(s)-only source URLs", () => {
+    expect(parseSharePayload(article)).toEqual(article);
+    expect(parseSharePayload({ ...article, data: { ...article.data, sourceUrl: "javascript:alert(1)" } })).toBeNull();
+    expect(parseSharePayload({ kind: "table", data: { title: "x", columns: [], rows: [] } })).toBeNull();
+    expect(parseSharePayload({
+      kind: "pane",
+      data: { version: 1, templateId: "graph-price-pane", title: "AAPL Price", data: { symbol: "AAPL" } },
+    })?.kind).toBe("pane");
+    expect(parseSharePayload({
+      kind: "pane",
+      data: { version: 1, templateId: "../private", title: "Private", data: {} },
+    })).toBeNull();
+    expect(parseSharePayload(portablePane)).toEqual(portablePane);
+    expect(parseSharePayload({
+      ...portablePane,
+      data: {
+        ...portablePane.data,
+        layout: {
+          ...portablePane.data.layout,
+          layout: {
+            ...portablePane.data.layout.layout,
+            instances: [],
+            floating: [],
+          },
+        },
+      },
+    })).toBeNull();
+  });
+
+  test("creates and deletes through api.gloom.sh with credentials", async () => {
+    const calls: Array<[string, RequestInit | undefined]> = [];
+    const fetchImpl = (async (url: string | URL | Request, init?: RequestInit) => {
+      calls.push([String(url), init]);
+      return init?.method === "DELETE"
+        ? new Response(null, { status: 204 })
+        : Response.json({ id: shareId, expiresAt: "2026-09-20T00:00:00.000Z" });
+    }) as typeof fetch;
+    const created = await createShare(article, fetchImpl);
+    await deleteShare(created.id, fetchImpl);
+    expect(calls[0]).toEqual([`${SHARE_API_ORIGIN}/shares`, expect.objectContaining({ method: "POST", credentials: "include" })]);
+    expect(calls[1]).toEqual([`${SHARE_API_ORIGIN}/shares/${shareId}`, expect.objectContaining({ method: "DELETE", credentials: "include" })]);
+  });
+
+  test("explains when a Cloud account still needs email verification", async () => {
+    const fetchImpl = (async () => Response.json(
+      { error: "Email verification required" },
+      { status: 403 },
+    )) as typeof fetch;
+    await expect(createShare(article, fetchImpl)).rejects.toThrow(
+      "Verify your Gloom Cloud email to share.",
+    );
+  });
+
+  test("loads public shares with optional owner credentials and builds current-origin URLs", async () => {
+    let init: RequestInit | undefined;
+    const urls: string[] = [];
+    const fetchImpl = (async (url: string | URL | Request, options?: RequestInit) => {
+      urls.push(String(url));
+      init = options;
+      return Response.json({
+        ...article,
+        createdAt: "2026-08-21T00:00:00Z",
+        expiresAt: "2026-09-20T00:00:00Z",
+        ownedByViewer: true,
+      });
+    }) as typeof fetch;
+    const share = await getShare(shareId, fetchImpl);
+    await getShare(shareId, fetchImpl, { trackView: false });
+    expect(share?.kind).toBe("article");
+    expect(share?.ownedByViewer).toBe(true);
+    expect(init?.credentials).toBe("include");
+    expect(urls).toEqual([
+      `${SHARE_API_ORIGIN}/shares/${shareId}`,
+      `${SHARE_API_ORIGIN}/shares/${shareId}?purpose=open`,
+    ]);
+    expect(publicShareUrl(shareId)).toBe(`https://term.gloom.sh/s/${shareId}`);
+    expect(openLiveShareUrl(shareId)).toBe(`https://term.gloom.sh/api/shares/${shareId}/open`);
+  });
+});