@devaccel-labs/app-comments-toolbar 1.0.0 → 1.3.0

package/src/dictation.ts

@@ -0,0 +1,17 @@
+/**
+ * The toolbar's dictation engine, for a connection's own composers (an inbox's reply box). The
+ * `./dictation` export points at this source for the monorepo only: it is not built into `dist`, so the npm
+ * package does not ship it. `ApiError` is what a `transcribe` callback throws so the engine can tell a retry from a
+ * stop (`rate_limited`, `dictation_unavailable`, 401, 403).
+ */
+export {
+  Dictation,
+  dictationSupported,
+  idleDictation,
+  MAX_TAKE_MS,
+  voiceRecordingSupported,
+  type DictationDeps,
+  type DictationState,
+} from "./runtime/dictation-engine.js";
+export { dictationPrompt, insertDictated } from "./runtime/dictation.js";
+export { ApiError } from "./runtime/client.js";

package/src/embed/controller.ts

@@ -0,0 +1,215 @@
+/**
+ * The script-tag loader's state: one toolbar per page, brought up by the same steps as `<CommentToolbar>`
+ * (`../runtime/boot.ts`), and the three things a single-page app may ask of it afterwards.
+ *
+ * ## Which service the toolbar may come from
+ *
+ * `<CommentToolbar>` imports the toolbar from the service the host's own session route names (`apiUrl`), and
+ * so does this loader: nothing on the page, and no attribute of the tag, can name another one. The loader also
+ * knows where it was itself loaded from. The two are the same service in every ordinary install, so a session
+ * that names another origin than the loader's own is refused: nothing is imported and nothing mounts. The one
+ * way to allow it is for the session route to say so itself, by naming the loader's origin in `loaderOrigin`.
+ *
+ * ## Following the host's sign-in
+ *
+ * While the toolbar is on the page it follows the host's sign-in itself (`ToolbarApp`). While it is not, because
+ * nobody was signed in when the page loaded, this loader asks the session route again at the same moments
+ * (`watchHost`), so a sign-in that loads no page still brings the toolbar. Not after the host's own `unmount()`.
+ */
+import { bootToolbar, type Runtime, type Wait } from "../runtime/boot.js";
+import { watchHost } from "../runtime/host-watch.js";
+import type { RuntimeProps, ToolbarHandle } from "../runtime/runtime.js";
+import type { ScreenRule } from "../runtime/screen.js";
+import type { GetSession, Session } from "../runtime/session-source.js";
+import { sessionFor } from "../runtime/session.js";
+import type { ToolbarPosition, ToolbarTheme } from "../runtime/toolbar.js";
+import type { DebugContextConfig } from "../runtime/debug-context-model.js";
+import { isPosition, isTheme, POSITION_NAMES, THEME_NAMES, type EmbedOptions } from "./options.js";
+
+/** What `window.CommentTool` is. */
+export type CommentToolApi = {
+  /**
+   * Asks the session route again. Mounts the toolbar when comments are now on and it is not on the page,
+   * removes it when they are now off, and has a toolbar that stays ask again too. Resolves once that is done.
+   * Call it after a sign-in or a sign-out that did not reload the page.
+   */
+  refresh(): Promise<void>;
+  /** Removes the toolbar. `refresh()` brings it back. */
+  unmount(): void;
+  /**
+   * `navigate` is the router's client-side navigation, as the component's `navigate` prop (null takes it away
+   * again); `position`, `theme` and `screen` are the component's props of those names (null takes `screen`
+   * away). A wrong value throws a TypeError and changes nothing.
+   */
+  configure(options: {
+    navigate?: ((href: string) => void) | null;
+    position?: ToolbarPosition;
+    theme?: ToolbarTheme;
+    screen?: ScreenRule | null;
+    /** The component's `debugContext` prop: `true`, `false`, or its options. Null, or any other value, turns it off. */
+    debugContext?: DebugContextConfig | null;
+  }): void;
+};
+
+export type EmbedInput = {
+  /** The origin `embed.js` was loaded from. */
+  serviceOrigin: string;
+  options: EmbedOptions;
+  /** The page-wide session source for a path. Default: the one the toolbar itself uses. */
+  sessions?: (path: string) => GetSession;
+  load?: (apiUrl: string) => Promise<Runtime>;
+  /** When the first attempt starts. Default: when the page is idle. */
+  wait?: Wait;
+};
+
+const now: Wait = (task) => {
+  task();
+  return () => {};
+};
+
+function originOf(url: string): string | null {
+  try {
+    return new URL(url).origin;
+  } catch {
+    return null;
+  }
+}
+
+export function createEmbed(input: EmbedInput): CommentToolApi & { start(): void } {
+  const { serviceOrigin, options } = input;
+  const source = (input.sessions ?? sessionFor)(options.sessionPath);
+  let navigate: ((href: string) => void) | null = null;
+  let position = options.position;
+  let theme = options.theme;
+  let screen: ScreenRule | undefined = options.screen;
+  let debugContext: DebugContextConfig | undefined;
+  /** Raised to have a toolbar on the page ask the session route now. */
+  let hostCheck = 0;
+  /** The host took the toolbar off with `unmount()`: only its own `refresh()` brings it back. */
+  let held = false;
+
+  let handle: ToolbarHandle | null = null;
+  let container: HTMLElement | null = null;
+  /** Calls off the attempt under way, or removes the toolbar it mounted. */
+  let stop: (() => void) | null = null;
+  /** Raised by every `refresh()` and `unmount()`: an older `refresh()` that is still waiting gives up. */
+  let generation = 0;
+  let refused: string | null = null;
+
+  const accepts = (session: Session) =>
+    originOf(session.apiUrl) === serviceOrigin ||
+    (session.loaderOrigin !== undefined && originOf(session.loaderOrigin) === serviceOrigin);
+
+  /** The session, or null when comments are off or the session names a service this loader did not come from. */
+  const getSession: GetSession = async (request) => {
+    const session = await source(request);
+    if (!session || accepts(session)) return session;
+    if (refused !== session.apiUrl) {
+      refused = session.apiUrl;
+      console.warn(
+        `[comment-service] The session route names ${session.apiUrl}, but embed.js was loaded from ${serviceOrigin}. The toolbar was not loaded. Load embed.js from the service the session route names.`,
+      );
+    }
+    return null;
+  };
+
+  const props = (): RuntimeProps => ({
+    sessionPath: options.sessionPath,
+    pollMs: options.pollMs,
+    position,
+    theme,
+    navigate: navigate ? (href) => navigate?.(href) : undefined,
+    screen,
+    debugContext,
+    hostCheck,
+    getSession,
+  });
+
+  const mounted = () => handle !== null && container?.isConnected === true;
+
+  const teardown = () => {
+    stop?.();
+    stop = null;
+    handle = null;
+    container = null;
+  };
+
+  const boot = (wait: Wait | undefined, onSettled?: () => void) => {
+    stop = bootToolbar({
+      getSession: () => getSession(),
+      props,
+      onMount: (mounted, element) => {
+        handle = mounted;
+        container = element;
+      },
+      onSettled,
+      wait,
+      load: input.load,
+    });
+  };
+
+  const refresh = async () => {
+    const mine = ++generation;
+    const session = await getSession({ refresh: true }).catch(() => null);
+    if (mine !== generation) return;
+    if (!session) {
+      teardown();
+      return;
+    }
+    // Still on the page: it takes the answer just read, and turns itself back on if it had gone off.
+    if (mounted()) {
+      hostCheck += 1;
+      handle?.update(props());
+      return;
+    }
+    // Not mounted yet, or the host replaced the part of the page it was in. One attempt, replacing any other.
+    teardown();
+    await new Promise<void>((settled) => boot(now, settled));
+  };
+
+  return {
+    start() {
+      boot(input.wait);
+      watchHost(() => {
+        if (!held && !mounted()) void refresh();
+      });
+    },
+    refresh() {
+      held = false;
+      return refresh();
+    },
+    unmount() {
+      held = true;
+      generation += 1;
+      teardown();
+    },
+    configure(next) {
+      if (next.position !== undefined && !isPosition(next.position)) {
+        throw new TypeError(`CommentTool.configure: position must be one of ${POSITION_NAMES}.`);
+      }
+      if (next.theme !== undefined && !isTheme(next.theme)) {
+        throw new TypeError(`CommentTool.configure: theme must be one of ${THEME_NAMES}.`);
+      }
+      if (next.navigate != null && typeof next.navigate !== "function") {
+        throw new TypeError("CommentTool.configure: navigate must be a function.");
+      }
+      const rule = next.screen;
+      if (
+        rule != null &&
+        typeof rule !== "function" &&
+        !(Array.isArray(rule.params) && rule.params.every((name) => typeof name === "string"))
+      ) {
+        throw new TypeError(
+          "CommentTool.configure: screen must be { params: [names] } or a function.",
+        );
+      }
+      if (next.position !== undefined) position = next.position;
+      if (next.theme !== undefined) theme = next.theme;
+      if (next.navigate !== undefined) navigate = next.navigate;
+      if (rule !== undefined) screen = rule ?? undefined;
+      // Not checked here, to keep this loader small: the toolbar treats anything but `true` or an object as off.
+      if (next.debugContext !== undefined) debugContext = next.debugContext ?? undefined;
+      handle?.update(props());
+    },
+  };
+}

package/src/embed/index.ts

@@ -0,0 +1,68 @@
+/**
+ * `/v1/toolbar/embed.js`: the toolbar's loader for a host that installs nothing.
+ *
+ *   <script src="https://<service>/v1/toolbar/embed.js" async></script>
+ *
+ * It does what `<CommentToolbar>` does, in the same order: keep an invite or thread link from the address,
+ * wait for the page to be idle, ask the host's session route with the page's cookies, and only when comments
+ * are on import the toolbar from the service and mount it. `scripts/build-toolbar.mjs` builds this file next
+ * to the runtime, so the service serves both and a deploy of the service updates both.
+ *
+ * A classic script, on purpose: it reads its own `<script>` tag (`document.currentScript`) for the service's
+ * origin and for its options, which a module script cannot do.
+ */
+import { captureHandoff } from "../runtime/handoff.js";
+import { createEmbed, type CommentToolApi } from "./controller.js";
+import { readOptions } from "./options.js";
+
+const GLOBAL = "CommentTool";
+/** Dispatched on `document` once `window.CommentTool` exists, for code that ran before this script loaded. */
+const READY_EVENT = "comment-tool:ready";
+
+/** What the global is when the tag was refused: the host's calls still work, and do nothing. */
+const inert: CommentToolApi = {
+  refresh: () => Promise.resolve(),
+  unmount() {},
+  configure() {},
+};
+
+function install(): void {
+  const page = window as unknown as Record<string, Partial<CommentToolApi> | undefined>;
+  // A second tag, or the same tag run again by a router: the first one's toolbar is the page's toolbar.
+  if (typeof page[GLOBAL]?.refresh === "function") return;
+
+  const script = document.currentScript;
+  if (!(script instanceof HTMLScriptElement) || !script.src) {
+    console.error(
+      '[comment-service] embed.js must be loaded by its own <script src="…/v1/toolbar/embed.js"> tag, not as a module and not inline. The toolbar was not loaded.',
+    );
+    return;
+  }
+
+  const read = readOptions(script.dataset, window.location.href);
+  let api: CommentToolApi = inert;
+  let start: (() => void) | null = null;
+  if (read.ok) {
+    captureHandoff();
+    const embed = createEmbed({
+      serviceOrigin: new URL(script.src).origin,
+      options: read.options,
+    });
+    api = { refresh: embed.refresh, unmount: embed.unmount, configure: embed.configure };
+    start = embed.start;
+  } else {
+    console.error(`[comment-service] embed.js: ${read.problem} The toolbar was not loaded.`);
+  }
+
+  page[GLOBAL] = api;
+  document.dispatchEvent(new Event(READY_EVENT));
+  if (!start) return;
+  // The toolbar mounts at the end of <body>, so the page's own markup comes first, as it does for a component.
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", start, { once: true });
+  } else {
+    start();
+  }
+}
+
+install();

package/src/embed/options.ts

@@ -0,0 +1,100 @@
+/**
+ * What a host may set on the loader's `<script>` tag, and with `CommentTool.configure`. The same four things
+ * `<CommentToolbar>` takes as props. There the compiler refuses a wrong value; a `data-` attribute is only
+ * text, so the loader checks it and loads nothing when one is wrong.
+ */
+import type { ToolbarPosition, ToolbarTheme } from "../runtime/toolbar.js";
+
+export const DEFAULT_SESSION_PATH = "/api/comment-service/session";
+
+// Keyed by the component's own types: a position or theme added there fails to compile here until it is listed.
+const POSITIONS: Record<ToolbarPosition, true> = {
+  "bottom-left": true,
+  "bottom-center": true,
+  "bottom-right": true,
+};
+const THEMES: Record<ToolbarTheme, true> = { light: true, dark: true, system: true };
+
+export type EmbedOptions = {
+  sessionPath: string;
+  position?: ToolbarPosition;
+  theme?: ToolbarTheme;
+  pollMs?: number;
+  /** `data-screen-params`: the query parameters that select a screen of the app. */
+  screen?: { params: string[] };
+};
+
+export type ReadOptions = { ok: true; options: EmbedOptions } | { ok: false; problem: string };
+
+export function isPosition(value: unknown): value is ToolbarPosition {
+  return typeof value === "string" && Object.hasOwn(POSITIONS, value);
+}
+
+export function isTheme(value: unknown): value is ToolbarTheme {
+  return typeof value === "string" && Object.hasOwn(THEMES, value);
+}
+
+const oneOf = (names: Record<string, true>) => Object.keys(names).join(", ");
+export const POSITION_NAMES = oneOf(POSITIONS);
+export const THEME_NAMES = oneOf(THEMES);
+
+/** True for a path on the page's own origin: the session request must carry the page's cookies, nobody else's. */
+function ownPath(value: string, pageUrl: string): boolean {
+  if (!value.startsWith("/")) return false;
+  try {
+    return new URL(value, pageUrl).origin === new URL(pageUrl).origin;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Reads `data-session-path`, `data-position`, `data-theme`, `data-poll-ms` and `data-screen-params` (as
+ * `dataset` names them). An
+ * attribute that is absent takes the component's default; one that is present and wrong is a refusal that names
+ * it. Other `data-` attributes are the host's own and are not read.
+ */
+export function readOptions(
+  data: Readonly<Record<string, string | undefined>>,
+  pageUrl: string,
+): ReadOptions {
+  const refuse = (attribute: string, rule: string, value: string): ReadOptions => ({
+    ok: false,
+    problem: `${attribute} must be ${rule}. It is ${JSON.stringify(value)}.`,
+  });
+  const options: EmbedOptions = { sessionPath: DEFAULT_SESSION_PATH };
+
+  const sessionPath = data["sessionPath"];
+  if (sessionPath !== undefined) {
+    if (!ownPath(sessionPath, pageUrl)) {
+      return refuse("data-session-path", "a path on this page's own origin", sessionPath);
+    }
+    options.sessionPath = sessionPath;
+  }
+  const position = data["position"];
+  if (position !== undefined) {
+    if (!isPosition(position)) return refuse("data-position", `one of ${POSITION_NAMES}`, position);
+    options.position = position;
+  }
+  const theme = data["theme"];
+  if (theme !== undefined) {
+    if (!isTheme(theme)) return refuse("data-theme", `one of ${THEME_NAMES}`, theme);
+    options.theme = theme;
+  }
+  const pollMs = data["pollMs"];
+  if (pollMs !== undefined) {
+    if (!/^[1-9]\d{0,8}$/.test(pollMs)) {
+      return refuse("data-poll-ms", "a whole number of milliseconds above zero", pollMs);
+    }
+    options.pollMs = Number(pollMs);
+  }
+  const screenParams = data["screenParams"];
+  if (screenParams !== undefined) {
+    const params = screenParams.split(/[\s,]+/).filter(Boolean);
+    if (!params.length) {
+      return refuse("data-screen-params", "query parameter names", screenParams);
+    }
+    options.screen = { params };
+  }
+  return { ok: true, options };
+}

package/src/help/index.ts

@@ -0,0 +1,38 @@
+/**
+ * `/v1/toolbar/help.js`: the "Need help?" pill, for a host page to show every signed-in person.
+ *
+ *   <script src="https://<service>/v1/toolbar/help.js" async
+ *     onload="CommentToolHelp.mount(CommentToolHelp.supportRequestsAt('/api/support'))"></script>
+ *
+ * A classic script, like `embed.js` and `capture.js`. It defines `window.CommentToolHelp` and is only the
+ * pill: the panel (`help-panel.js`) and the capture script (`capture.js`) come from beside this file the
+ * first time the pill is hovered, focused or opened. It asks no session route, reads no stored sign-in and
+ * calls nothing but what the host's two hooks call.
+ */
+import { createHelp } from "./pill.js";
+import type { CommentToolHelpApi } from "./types.js";
+
+const GLOBAL = "CommentToolHelp";
+const FILE = "/v1/toolbar/help.js";
+/** Dispatched on `document` once `window.CommentToolHelp` exists, for code that does not wait on the tag. */
+const READY_EVENT = "comment-tool-help:ready";
+
+/** The folder this script was served from: its siblings are fetched from there. */
+function base(): string {
+  const current = document.currentScript;
+  const tag =
+    current instanceof HTMLScriptElement && current.src
+      ? current
+      : document.querySelector<HTMLScriptElement>(`script[src*="${FILE}"]`);
+  return tag?.src ? new URL(".", tag.src).href : new URL("/v1/toolbar/", window.location.href).href;
+}
+
+function install(): void {
+  const page = window as unknown as Record<string, Partial<CommentToolHelpApi> | undefined>;
+  // A second tag: the first one's object stays, with the pill it has mounted.
+  if (typeof page[GLOBAL]?.mount === "function") return;
+  page[GLOBAL] = createHelp({ base: base() });
+  document.dispatchEvent(new Event(READY_EVENT));
+}
+
+install();

package/src/help/panel-index.ts

@@ -0,0 +1,17 @@
+/**
+ * `/v1/toolbar/help-panel.js`: the panel of the "Need help?" pill. `help.js` adds this script the first time
+ * the pill is reached for and then calls `window.CommentToolHelpPanel.create`. A host never loads it itself,
+ * and what it defines is the pill's to call, not a host's.
+ */
+import { createPanel } from "./panel.js";
+import type { HelpPanelApi } from "./pill.js";
+
+const GLOBAL = "CommentToolHelpPanel";
+
+function install(): void {
+  const page = window as unknown as Record<string, Partial<HelpPanelApi> | undefined>;
+  if (typeof page[GLOBAL]?.create === "function") return;
+  page[GLOBAL] = { create: createPanel };
+}
+
+install();

package/src/help/panel-styles.ts

@@ -0,0 +1,123 @@
+/**
+ * The panel's CSS, on the reset and the colours of `./pill-styles.ts`. A card anchored above the pill; a sheet
+ * along the bottom of the window when the window is narrow.
+ */
+import { HELP_Z_INDEX } from "./pill-styles.js";
+
+export const HELP_PANEL_CSS = `
+.cth .cth-panel {
+  position: fixed; z-index: ${HELP_Z_INDEX + 1};
+  bottom: calc(var(--cth-edge) + 52px + env(safe-area-inset-bottom, 0px) + var(--cth-lift, 0px));
+  display: flex; flex-direction: column; width: 380px; max-width: calc(100vw - 2 * var(--cth-edge));
+  max-height: min(620px, calc(100vh - var(--cth-edge) - 76px - var(--cth-lift, 0px)));
+  border-radius: 18px; background: var(--cth-card); color: var(--cth-ink); overflow: hidden;
+  box-shadow: 0 0 0 1px var(--cth-ring), var(--cth-shadow);
+}
+.cth[data-position="bottom-right"] .cth-panel { right: calc(var(--cth-edge) + env(safe-area-inset-right, 0px)); }
+.cth[data-position="bottom-left"] .cth-panel { left: calc(var(--cth-edge) + env(safe-area-inset-left, 0px)); }
+.cth .cth-panel:focus { outline: none; }
+.cth .cth-content { display: contents; }
+.cth .cth-head { display: flex; align-items: center; gap: 8px; padding: 14px 12px 10px 18px; }
+.cth .cth-title { display: block; flex: 1; min-width: 0; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
+.cth .cth-x {
+  display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px;
+  border-radius: 50%; color: var(--cth-muted); cursor: pointer;
+}
+.cth .cth-x:hover { background: var(--cth-fill); color: var(--cth-ink); }
+.cth .cth-icon { display: block; flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
+.cth .cth-tabs { display: flex; flex: none; margin: 0 18px 10px; padding: 3px; border-radius: 10px; background: var(--cth-track); }
+.cth .cth-tab {
+  display: block; flex: 1; padding: 6px 8px; border-radius: 8px; color: var(--cth-muted);
+  font-size: 12.5px; font-weight: 600; text-align: center; cursor: pointer;
+}
+.cth .cth-tab[aria-selected="true"] { background: var(--cth-raised); color: var(--cth-ink); box-shadow: 0 1px 2px rgba(20, 20, 30, 0.14); }
+.cth .cth-body {
+  display: flex; flex: 1; flex-direction: column; gap: 10px; min-height: 0; padding: 2px 18px 16px;
+  overflow-y: auto; overscroll-behavior: contain;
+}
+.cth .cth-form { display: flex; flex-direction: column; gap: 10px; }
+.cth .cth-q { display: block; font-size: 13px; font-weight: 600; }
+.cth .cth-text {
+  display: block; width: 100%; min-height: 104px; max-height: 220px; padding: 10px 12px; border-radius: 12px;
+  background: var(--cth-field); box-shadow: inset 0 0 0 1px var(--cth-line); font-size: 14px; line-height: 1.45;
+  white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; resize: vertical; cursor: text;
+}
+.cth .cth-text::placeholder { color: var(--cth-muted); }
+.cth .cth-text:focus { outline: none; box-shadow: inset 0 0 0 2px var(--cth-accent); }
+.cth .cth-text[readonly] { opacity: 0.7; }
+.cth .cth-count { display: block; margin-top: -4px; color: var(--cth-muted); font-size: 12px; text-align: right; }
+.cth .cth-tools { display: flex; flex-direction: column; gap: 6px; }
+.cth .cth-tool {
+  display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 10px; background: var(--cth-fill);
+  font-size: 13px; font-weight: 550; cursor: pointer;
+}
+.cth .cth-tool:hover { background: var(--cth-fill-2); }
+.cth .cth-tool-more { display: block; margin-left: auto; color: var(--cth-muted); font-size: 12px; font-weight: 400; }
+.cth :is(.cth-tool, .cth-send, .cth-plain)[disabled] { opacity: 0.5; cursor: default; }
+.cth .cth-chip {
+  display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 11px; border-radius: 10px;
+  box-shadow: inset 0 0 0 1px var(--cth-line); font-size: 12.5px;
+}
+.cth .cth-chip-text { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cth .cth-chip-what { font-weight: 600; }
+.cth .cth-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
+.cth .cth-thumb {
+  position: relative; display: block; width: 104px; height: 68px; border-radius: 10px; overflow: hidden;
+  background: var(--cth-fill); box-shadow: 0 0 0 1px var(--cth-line);
+}
+.cth .cth-thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
+.cth .cth-thumb-x {
+  position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; justify-content: center;
+  width: 22px; height: 22px; border-radius: 50%; background: rgba(20, 20, 22, 0.74); color: #ffffff; cursor: pointer;
+}
+.cth .cth-thumb-x .cth-icon, .cth .cth-chip .cth-icon { width: 12px; height: 12px; stroke-width: 2; }
+.cth .cth-alert { display: block; color: var(--cth-danger); font-size: 12.5px; font-weight: 550; }
+.cth .cth-hint { display: block; color: var(--cth-muted); font-size: 12.5px; }
+.cth .cth-foot { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
+.cth .cth-plain { display: inline-block; color: var(--cth-link); font-size: 13px; font-weight: 550; cursor: pointer; }
+.cth .cth-plain:hover { text-decoration: underline; }
+.cth .cth-send {
+  display: inline-flex; align-items: center; justify-content: center; min-width: 84px; height: 36px; margin-left: auto;
+  padding: 0 16px; border-radius: 999px; background: var(--cth-accent); color: var(--cth-accent-ink);
+  font-size: 13px; font-weight: 650; cursor: pointer;
+}
+.cth .cth-sent { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 6px 0 2px; }
+.cth .cth-sent-mark {
+  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
+  background: var(--cth-ok); color: #ffffff;
+}
+.cth .cth-sent-mark .cth-icon { stroke-width: 2.2; }
+.cth .cth-sent-title { display: block; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
+.cth .cth-sent-actions { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
+.cth .cth-list { display: flex; flex-direction: column; }
+.cth .cth-row { display: block; border-top: 1px solid var(--cth-line); }
+.cth .cth-row:first-child { border-top: 0; }
+.cth .cth-row-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 10px 4px; border-radius: 8px; }
+.cth a.cth-row-main { cursor: pointer; }
+.cth a.cth-row-main:hover { background: var(--cth-fill); }
+.cth .cth-row-summary { display: block; grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
+.cth .cth-row-meta { display: block; grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cth-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
+.cth .cth-row-note { display: block; grid-column: 1 / -1; margin-top: 4px; color: var(--cth-muted); font-size: 12px; line-height: 1.4; }
+.cth .cth-status {
+  display: inline-block; grid-column: 2; grid-row: 1 / span 2; padding: 3px 9px; border-radius: 999px;
+  background: var(--cth-received-bg); color: var(--cth-received-ink); font-size: 11.5px; font-weight: 650; white-space: nowrap;
+}
+.cth .cth-status[data-status="in_progress"] { background: var(--cth-progress-bg); color: var(--cth-progress-ink); }
+.cth .cth-status[data-status="resolved"] { background: var(--cth-resolved-bg); color: var(--cth-resolved-ink); }
+.cth .cth-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 0 14px; color: var(--cth-muted); font-size: 13px; text-align: center; }
+.cth .cth-live { position: absolute; display: block; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+@media (max-width: 480px) {
+  .cth .cth-panel, .cth[data-position] .cth-panel {
+    left: 0; right: 0; bottom: var(--cth-sheet-lift, 0px); width: auto; max-width: none;
+    max-height: calc(100vh - 48px - var(--cth-sheet-lift, 0px)); max-height: calc(100dvh - 48px - var(--cth-sheet-lift, 0px));
+    padding-bottom: env(safe-area-inset-bottom, 0px); border-radius: 18px 18px 0 0;
+  }
+  .cth .cth-text { font-size: 16px; }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .cth .cth-panel { animation: cth-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); transform-origin: bottom right; }
+  .cth[data-position="bottom-left"] .cth-panel { transform-origin: bottom left; }
+  .cth :is(.cth-tool, .cth-tab, .cth-x, .cth-send) { transition: background-color 0.16s ease, color 0.16s ease, opacity 0.16s ease; }
+  @keyframes cth-in { from { opacity: 0; transform: translateY(4px) scale(0.98); } }
+}
+`;