@teaflask/assistant 0.0.0 → 0.3.0

package/src/components/child-transcript.tsx

@@ -0,0 +1,588 @@
+"use client";
+
+// One dispatched subagent's own run, replayed in full and tailed live
+// while it runs — the full panel and the compact roster preview share one
+// driver. Deliberately NOT a second <Transcript/>: that renders the
+// store's parent-thread cells. This panel owns, through
+// useChildReplayStream, one ServingReplayStreamAgent at the child stream
+// URL, the messages recorder, and the parent's row derivation; the
+// stream opens on drill-in only and leases the one child tail slot
+// first, so child and parent streams share a bounded budget.
+
+import { activityTitleOf } from "../core/activity-title.js";
+import { CheckIcon, ChevronLeftIcon, XCircleIcon } from "lucide-react";
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useSyncExternalStore,
+  type ReactNode,
+  type RefObject,
+} from "react";
+
+import { dispatchFailed, dispatchIsRunning } from "../contract/dispatches.js";
+import { subagentIdentityTokenOf } from "../core/agent-identity.js";
+import type { AssistantConversationStore } from "../core/conversation-store.js";
+import { openingBriefOf, withOpeningBrief } from "../core/subagent-brief.js";
+import { newestToolCallViewOf } from "../core/subagent-presence.js";
+import { settledDurationLabelOf } from "../core/subagent-roster.js";
+import {
+  trailingRowIsStreaming,
+  transcriptRowsOf,
+  type TranscriptRow,
+} from "../core/transcript-rows.js";
+import { AgentIdentityMark } from "./agent-identity-mark.js";
+import { MessageList } from "./message-list.js";
+import { TfButton } from "./primitives/button.js";
+import { ShimmerText } from "./streaming-states.js";
+import { useSubagentCurrentWorkPublisher } from "./subagent-current-work.js";
+import { SurfaceBoundary } from "./surface-boundary.js";
+import { SubagentDrillInContext } from "./subagent-drill-in.js";
+import { useAssistantSession } from "./teaflask-assistant-provider.js";
+import { useChildReplayStream } from "./use-child-replay-stream.js";
+import { useChildDispatch } from "./use-thread-dispatches.js";
+
+type ChildStatus = "running" | "failed" | "finished";
+
+export function ChildTranscriptPanel({
+  threadId,
+  childSessionId,
+  variantIndex,
+  opener,
+  onBack,
+}: {
+  threadId: string;
+  childSessionId: string;
+  /** The coworker's deterministic color slot (coworkerIndicesOf) — the host
+   *  passes it so the panel wears the same variant as the row that
+   *  opened it; absent metadata disappears cleanly. */
+  variantIndex?: number;
+  /** The element Back restores focus to, captured by the host INSIDE the
+   *  opening click — before the commit that inerts the conversation box
+   *  blurs it to <body> (the floating-panel ordering; no effect, layout
+   *  or passive, runs early enough to capture it here). */
+  opener: HTMLElement | null;
+  onBack: () => void;
+}) {
+  return (
+    <ChildTranscript
+      mode="panel"
+      threadId={threadId}
+      childSessionId={childSessionId}
+      variantIndex={variantIndex}
+      opener={opener}
+      onBack={onBack}
+    />
+  );
+}
+
+/** A compact read-only scan of the same child stream. It is mounted only
+ * while its roster row is hovered, focused, or tapped, so opening the
+ * roster itself remains a ledger-only operation. */
+export function ChildTranscriptPreview({
+  threadId,
+  childSessionId,
+  variantIndex,
+}: {
+  threadId: string;
+  childSessionId: string;
+  variantIndex?: number;
+}) {
+  return (
+    <ChildTranscript
+      mode="preview"
+      threadId={threadId}
+      childSessionId={childSessionId}
+      variantIndex={variantIndex}
+      opener={null}
+      onBack={() => undefined}
+    />
+  );
+}
+
+/** The preview's deterministic presentation shell, exported for the
+ * package's screenshot fixture. Production fills it with the live child
+ * driver below; the fixture fills it with canned transcript rows. */
+export function ChildTranscriptPreviewFrame({
+  label,
+  status,
+  duration,
+  variantIndex,
+  children,
+}: {
+  label: string;
+  status: ChildStatus;
+  duration?: string | null;
+  variantIndex?: number;
+  children: ReactNode;
+}) {
+  return (
+    <div
+      role="region"
+      aria-label={`Conversation preview: ${label}`}
+      data-tf-glass=""
+      data-tf-child-transcript-preview=""
+      className="tf:flex tf:h-full tf:w-full tf:min-h-0 tf:min-w-0 tf:flex-col tf:overflow-hidden tf:rounded-2xl tf:border tf:bg-tf-background"
+    >
+      <div className="tf:flex tf:items-center tf:gap-2 tf:border-b tf:px-3 tf:py-2.5">
+        {/* The coworker's identity (law 10): the same TeaFlask mark and
+            color its roster row and inline row wear. */}
+        <span className="tf:flex tf:h-6 tf:min-w-6 tf:shrink-0 tf:items-center tf:justify-center tf:px-1">
+          <AgentIdentityMark register="subagent" variantIndex={variantIndex} />
+        </span>
+        <ChildStatusMark status={status} />
+        {status === "running" ? (
+          // The live header's liveness claim is the label's own shimmer
+          // (the one motion register — the same treatment as the inline
+          // coworker row), in the muted live-work ink every moving label
+          // wears. The shimmer root is an atomic inline-grid, so the
+          // ellipsis lives on the blockified span inside.
+          <ShimmerText className="tf:min-w-0 tf:flex-1 tf:grid-cols-1 tf:text-tf-label tf:font-medium tf:text-tf-muted-foreground">
+            <span className="tf:block tf:truncate" title={label}>
+              {activityTitleOf(label)}
+            </span>
+          </ShimmerText>
+        ) : (
+          <span
+            className="tf:min-w-0 tf:flex-1 tf:truncate tf:text-tf-label tf:font-medium"
+            title={label}
+          >
+            {activityTitleOf(label)}
+          </span>
+        )}
+        {status === "running" ? (
+          // The state in visible words, in the slot the settled clock
+          // takes over: the header's shimmering label carries no state
+          // word of its own, and under reduced motion the shimmer
+          // collapses to plain text — this word is what keeps a running
+          // header distinguishable from a settled one there.
+          <ShimmerText className="tf:shrink-0 tf:text-xs tf:text-tf-muted-foreground">
+            Working
+          </ShimmerText>
+        ) : null}
+        {duration != null ? (
+          <span className="tf:shrink-0 tf:text-xs tf:text-tf-muted-foreground">
+            {duration}
+          </span>
+        ) : null}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+function ChildStatusMark({ status }: { status: ChildStatus }) {
+  if (status === "running") {
+    // Liveness is the header label's shimmer plus the visible "Working"
+    // word in the trailing slot (the one motion register — no spinner
+    // beside a shimmering line). The invisible spacer holds the settled
+    // glyph's size-4 slot so the label never shifts when the check
+    // lands. No sr-only twin: the trailing word is visible text.
+    return <span aria-hidden className="tf:size-4 tf:shrink-0" />;
+  }
+  if (status === "failed") {
+    return (
+      <>
+        <XCircleIcon
+          aria-hidden
+          className="tf:size-4 tf:shrink-0 tf:text-tf-destructive"
+        />
+        <span className="tf:sr-only">Failed</span>
+      </>
+    );
+  }
+  return (
+    <>
+      <CheckIcon
+        aria-hidden
+        className="tf:size-4 tf:shrink-0 tf:text-tf-muted-foreground"
+      />
+      <span className="tf:sr-only">Finished</span>
+    </>
+  );
+}
+
+function ChildTranscript({
+  mode,
+  threadId,
+  childSessionId,
+  variantIndex,
+  opener,
+  onBack,
+}: {
+  mode: "panel" | "preview";
+  threadId: string;
+  childSessionId: string;
+  variantIndex?: number;
+  opener: HTMLElement | null;
+  onBack: () => void;
+}) {
+  const { session, store } = useAssistantSession();
+  const { dispatch, refreshLedger } = useChildDispatch(
+    session,
+    threadId,
+    childSessionId,
+  );
+  const running = dispatch !== undefined && dispatchIsRunning(dispatch);
+  const { messages, streamEnd, tailed, slotDenied, anchors, retry } =
+    useChildReplayStream({ session, threadId, childSessionId, refreshLedger });
+  const backRef = usePanelBackFocus(mode, opener);
+  const brief = useOpeningBrief(store, childSessionId);
+
+  const rows = useMemo(
+    () =>
+      transcriptRowsOf(
+        withOpeningBrief(messages, brief, childSessionId),
+        anchors,
+        running,
+      ),
+    [messages, brief, childSessionId, anchors, running],
+  );
+  // The end-state table's render half, all derived from streamEnd + the
+  // ledger row (docs/transcript-surfaces.md): the stream is LIVE only
+  // while it is open at the tail of a running dispatch — never dropped,
+  // never finished. typing and the trailing group's hold-open both key
+  // on this one spelling.
+  const streamLive = running && tailed && streamEnd === "open";
+  const typing = streamLive && !trailingRowIsStreaming(rows);
+  useChildCurrentWorkPublish(childSessionId, rows, streamLive);
+  const duration =
+    dispatch !== undefined
+      ? settledDurationLabelOf(
+          dispatch.created_at,
+          running ? null : dispatch.updated_at,
+        )
+      : null;
+  // The empty-string guard every neighbouring surface keeps: a
+  // whitespace-only task stores '' (question_excerpt_of collapses it),
+  // and ?? alone would blank the header.
+  const label =
+    dispatch !== undefined && dispatch.label !== ""
+      ? dispatch.label
+      : "Delegated task";
+  // The one reason to drill into a FAILED child is to learn why: the
+  // ledger's sentence leads the panel, not just the header glyph — the
+  // dashboard drill-in's outcome line, in this surface's register.
+  const failed = dispatch !== undefined && dispatchFailed(dispatch);
+  // error is nullable on the wire: a failed row with no sentence still
+  // owes the member an explanation (the neighbouring surfaces' fallback).
+  const failureSentence = failed
+    ? (dispatch.error ?? "The subagent failed before it could report back.")
+    : null;
+  // A failed child's stream legitimately ENDS in RUN_ERROR (recorded, or
+  // synthesized by the door's settled fallback) — that is its honest
+  // terminal, not a dropped connection, and a Retry would replay onto
+  // the same ending. The interruption banner speaks only when the ledger
+  // does not already explain the ending — and the error end lands AFTER
+  // the ledger catch-up (the table's judge order), so a child failing
+  // mid-watch reads failed here, never interrupted. A QUIET ending was
+  // judged into "error" or "clean" when it landed, so this reads ONE
+  // latched fact — never the live row, which would un-paint the banner
+  // the moment the child settled.
+  const interrupted = streamEnd === "error" && !failed;
+
+  const status = running ? "running" : failed ? "failed" : "finished";
+
+  const transcript = (
+    <ChildTranscriptBody
+      failureSentence={failureSentence}
+      interrupted={interrupted}
+      onRetry={retry}
+      waitingForSlot={slotDenied && streamEnd === "open"}
+      rows={rows}
+      typing={typing}
+      streamLive={streamLive}
+      running={running}
+      childSessionId={childSessionId}
+    />
+  );
+
+  if (mode === "preview") {
+    return (
+      <ChildTranscriptPreviewFrame
+        label={label}
+        status={status}
+        duration={duration}
+        variantIndex={variantIndex}
+      >
+        {transcript}
+      </ChildTranscriptPreviewFrame>
+    );
+  }
+
+  return (
+    <ChildTranscriptPanelFrame
+      label={label}
+      status={status}
+      duration={duration}
+      variantIndex={variantIndex}
+      backRef={backRef}
+      onBack={onBack}
+    >
+      {transcript}
+    </ChildTranscriptPanelFrame>
+  );
+}
+
+// Opening moves focus here; closing hands it back to the opener the
+// host captured INSIDE the opening click — no effect (layout or
+// passive) runs before the sibling inert commit's focus-fixup blurs a
+// covered opener to <body>, so a capture here would read body and
+// restore nothing. The roster refocuses its trigger before asking for
+// the panel, so its captured opener survives the roster's unmount; a
+// tree row survives under the inert cover. Under StrictMode's
+// mount-cleanup-remount the first cleanup's restore hits the
+// still-inert opener and no-ops; the real close restores once the same
+// commit lifted the cover. A thread switch unmounts the panel too; a
+// disconnected opener is simply skipped. Esc anywhere in the panel is
+// the back gesture.
+function usePanelBackFocus(
+  mode: "panel" | "preview",
+  opener: HTMLElement | null,
+): RefObject<HTMLButtonElement | null> {
+  const backRef = useRef<HTMLButtonElement | null>(null);
+  useEffect(() => {
+    if (mode !== "panel") {
+      return;
+    }
+    backRef.current?.focus();
+    return () => {
+      if (opener?.isConnected) {
+        opener.focus();
+      }
+    };
+    // Fixed for the panel's lifetime: the host keys this panel by child,
+    // so a different drill-in is a fresh mount with a fresh opener.
+  }, [mode, opener]);
+  return backRef;
+}
+
+// The brief is a string snapshot, so parent deltas that leave it
+// unchanged never re-render the panel.
+function useOpeningBrief(
+  store: AssistantConversationStore,
+  childSessionId: string,
+): string | null {
+  const briefNow = () => openingBriefOf(store.messages.get(), childSessionId);
+  return useSyncExternalStore(store.messages.subscribe, briefNow, briefNow);
+}
+
+// The current-work publish (TVC-072): while THIS surface holds the live
+// tail, its newest live call feeds the inline group row's current-work
+// line — the drill-in stream is the seam's only honest writer (no extra
+// streams ever open for it). publishedRef guards the clear: a second
+// surface on the same child that never held the tail (slot-denied, or a
+// settled replay) must not blank the holder's entry.
+function useChildCurrentWorkPublish(
+  childSessionId: string,
+  rows: readonly TranscriptRow[],
+  streamLive: boolean,
+): void {
+  const publishCurrentWork = useSubagentCurrentWorkPublisher();
+  const publishedRef = useRef(false);
+  useEffect(() => {
+    const view = streamLive ? newestToolCallViewOf(rows) : null;
+    if (view !== null) {
+      publishedRef.current = true;
+      publishCurrentWork(childSessionId, view);
+    } else if (publishedRef.current) {
+      publishedRef.current = false;
+      publishCurrentWork(childSessionId, null);
+    }
+  }, [publishCurrentWork, childSessionId, rows, streamLive]);
+  useEffect(
+    () => () => {
+      if (publishedRef.current) {
+        publishCurrentWork(childSessionId, null);
+      }
+    },
+    [publishCurrentWork, childSessionId],
+  );
+}
+
+// The child's transcript proper: the ledger's failure sentence, the
+// interruption banner with Retry, the slot-wait notice, then the rows.
+function ChildTranscriptBody({
+  failureSentence,
+  interrupted,
+  onRetry,
+  waitingForSlot,
+  rows,
+  typing,
+  streamLive,
+  running,
+  childSessionId,
+}: {
+  failureSentence: string | null;
+  interrupted: boolean;
+  onRetry: () => void;
+  waitingForSlot: boolean;
+  rows: readonly TranscriptRow[];
+  typing: boolean;
+  streamLive: boolean;
+  running: boolean;
+  childSessionId: string;
+}) {
+  return (
+    <>
+      {failureSentence !== null ? (
+        <div className="tf:border-b">
+          <p className="tf:mx-auto tf:m-0 tf:w-full tf:max-w-3xl tf:px-4 tf:py-2 tf:text-tf-label tf:text-tf-destructive">
+            {failureSentence}
+          </p>
+        </div>
+      ) : null}
+      {interrupted ? (
+        <div role="alert" className="tf:border-b">
+          <div className="tf:mx-auto tf:flex tf:w-full tf:max-w-3xl tf:items-center tf:gap-2 tf:px-4 tf:py-2 tf:text-tf-label tf:text-tf-destructive">
+            The connection to this subagent was interrupted.
+            <TfButton variant="ghost" onClick={onRetry}>
+              Retry
+            </TfButton>
+          </div>
+        </div>
+      ) : null}
+      {waitingForSlot ? (
+        <p className="tf:mx-auto tf:m-0 tf:w-full tf:max-w-3xl tf:px-4 tf:py-3 tf:text-tf-label tf:text-tf-muted-foreground">
+          Waiting for another subagent view to finish…
+        </p>
+      ) : null}
+      <SubagentDrillInContext.Provider value={null}>
+        {/* live rides the STREAM's liveness: the dispatch row alone
+            would pin the trailing group open with "Working…" over a
+            dropped stream's interruption banner, and briefly over a
+            clean terminal until refreshLedger() catches the row up. */}
+        <SurfaceBoundary surface="child-transcript">
+          <MessageList
+            rows={rows}
+            cards={[]}
+            typing={typing}
+            live={streamLive}
+            // Episode unification keys on the child's TURN terminality,
+            // never on stream liveness: a dropped or untailed stream over
+            // a still-running dispatch — the interruption banner, the
+            // slot-denied wait, a second view without the tail lease —
+            // must not unify the turn mid-flight and present its latest
+            // paragraph as the final response, only to pop it apart when
+            // Retry reopens the stream.
+            turnOpen={running}
+            // The placement holds ride the dispatch's own running fact: a
+            // child thread is one turn by construction — its only user
+            // row is the opening brief — so the next-user-turn decay can
+            // never fire here. While the coworker works, its
+            // view/decision-bearing calls hold open exactly like a live
+            // parent turn; once the dispatch settles, the drill-in is an
+            // inspection surface and every disclosure is native — never a
+            // wall of held-open panes over a finished history.
+            placementHolds={running}
+            // The coworker's own transcript: its
+            // prose wears the child's identity
+            // token, never the primary agent's
+            // (law 10; the token is the same one
+            // the group row and roster wear for
+            // this coworker).
+            identityToken={subagentIdentityTokenOf(childSessionId)}
+          />
+        </SurfaceBoundary>
+      </SubagentDrillInContext.Provider>
+    </>
+  );
+}
+
+// The full panel's frame: a non-modal dialog over the conversation box
+// with the Back row, the coworker's identity and status, and the clock.
+function ChildTranscriptPanelFrame({
+  label,
+  status,
+  duration,
+  variantIndex,
+  backRef,
+  onBack,
+  children,
+}: {
+  label: string;
+  status: ChildStatus;
+  duration: string | null;
+  variantIndex?: number;
+  backRef: RefObject<HTMLButtonElement | null>;
+  onBack: () => void;
+  children: ReactNode;
+}) {
+  return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the keydown is the panel's own Esc-to-back; every control inside is a real button.
+    <div
+      role="dialog"
+      // A non-modal dialog on purpose — NO aria-modal: the panel covers
+      // only the conversation box (whose content the host marks inert),
+      // while the chrome around it — the drawer's header row, the
+      // dashboard shell — stays live and Tab-reachable for everyone.
+      // aria-modal would tell assistive tech to ignore exactly those
+      // controls; role + label still announce the panel.
+      aria-label="Subagent transcript"
+      data-tf-child-transcript=""
+      // Focusable on purpose (the roster card's own posture): a click on
+      // the panel's passive ink — selecting a failure sentence, message
+      // text — moves focus HERE instead of dropping it to body, so the
+      // Esc-to-back below keeps routing through this subtree. "Esc
+      // anywhere in the panel" has to survive a click anywhere in it.
+      tabIndex={-1}
+      className="tf:absolute tf:inset-0 tf:flex tf:min-h-0 tf:min-w-0 tf:flex-col tf:bg-tf-background"
+      onKeyDown={(event) => {
+        if (event.key !== "Escape") {
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        onBack();
+      }}
+    >
+      <div className="tf:border-b">
+        <div className="tf:mx-auto tf:flex tf:w-full tf:max-w-3xl tf:items-center tf:gap-2 tf:px-4 tf:py-2">
+          <TfButton ref={backRef} variant="ghost" onClick={onBack}>
+            <ChevronLeftIcon aria-hidden className="tf:size-4 tf:shrink-0" />
+            Back
+          </TfButton>
+          {/* The coworker's identity beside its status — the same mark
+              and color every other surface wears for this child. */}
+          <span className="tf:flex tf:h-6 tf:min-w-6 tf:shrink-0 tf:items-center tf:justify-center tf:px-1">
+            <AgentIdentityMark
+              register="subagent"
+              variantIndex={variantIndex}
+            />
+          </span>
+          <ChildStatusMark status={status} />
+          {status === "running" ? (
+            // The preview frame's running treatment, verbatim (the two
+            // headers are the same surface at two sizes): shimmering
+            // muted label plus the visible "Working" word in the slot
+            // the settled clock takes over — the words are what survive
+            // the reduced-motion collapse.
+            <>
+              <ShimmerText className="tf:min-w-0 tf:flex-1 tf:grid-cols-1 tf:text-tf-label tf:font-medium tf:text-tf-muted-foreground">
+                <span className="tf:block tf:truncate" title={label}>
+                  {activityTitleOf(label)}
+                </span>
+              </ShimmerText>
+              <ShimmerText className="tf:shrink-0 tf:text-xs tf:text-tf-muted-foreground">
+                Working
+              </ShimmerText>
+            </>
+          ) : (
+            <span
+              className="tf:min-w-0 tf:flex-1 tf:truncate tf:text-tf-label tf:font-medium"
+              title={label}
+            >
+              {activityTitleOf(label)}
+            </span>
+          )}
+          {duration !== null ? (
+            <span className="tf:shrink-0 tf:text-xs tf:text-tf-muted-foreground">
+              {duration}
+            </span>
+          ) : null}
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+}

package/src/components/companion-drawer-body.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useEffect } from "react";
+
+import { useAssistantAppearance } from "./appearance-context.js";
+import { CompanionMark } from "./companion-mark.js";
+import { ConversationView, SetupErrorState } from "./conversation-view.js";
+import { servedSuggestionsForPath } from "./served-suggestions.js";
+import { useAssistantSession } from "./teaflask-assistant-provider.js";
+import { useAssistantConversation } from "./use-assistant-conversation.js";
+import { useCell } from "./use-store-cell.js";
+
+// The drawer's conversation half — the one companion module that
+// reaches the transcript (and through it the chat chassis). Loaded ONLY
+// through the drawer's dynamic import: the minimized companion's static
+// graph must stay transcript-free (the bundle-closure test enforces it),
+// so a page that only ever shows the mark never downloads the chat.
+// Default export because React.lazy wants one.
+
+export default function CompanionDrawerBody() {
+  const core = useAssistantConversation();
+  // The drawer's opening prompts: the host's provider prop when one was
+  // passed (explicit JS intent wins wholesale, even an empty array), the
+  // sets authored on the org's assistant otherwise — the drawer is the
+  // surface a visitor meets first, so it is where the welcome earns its
+  // prompts; the page keeps taking them as its own prop.
+  const { suggestions } = useAssistantAppearance();
+  const { assistantConfig, ensureAssistantConfig } = useAssistantSession();
+  const served = useCell(assistantConfig);
+
+  // Re-adopt the stored thread on every open (the body mounts per open,
+  // palette parity): another surface may have moved the conversation
+  // while the drawer was closed, and expanding must mean "continue
+  // where I am".
+  const resumeStoredThread = core.resumeStoredThread;
+  useEffect(() => {
+    resumeStoredThread();
+  }, [resumeStoredThread]);
+
+  // Only a drawer the host left promptless ever fetches: a passed prop
+  // means the served config could never render, so no one pays for it.
+  useEffect(() => {
+    if (suggestions === null) {
+      ensureAssistantConfig();
+    }
+  }, [suggestions, ensureAssistantConfig]);
+
+  // The pathname is read per render, not subscribed: the empty state
+  // re-renders on every open, which is exactly when the answer matters.
+  const effectiveSuggestions =
+    suggestions ??
+    (served === null
+      ? undefined
+      : servedSuggestionsForPath(served, window.location.pathname));
+
+  if (core.setupError !== null) {
+    return (
+      <div className="tf:flex tf:flex-1 tf:items-center tf:justify-center tf:p-6">
+        <SetupErrorState
+          message={core.setupError.message}
+          code={core.setupError.code}
+        />
+      </div>
+    );
+  }
+  return (
+    <ConversationView
+      core={core}
+      surface="companion"
+      suggestions={effectiveSuggestions}
+      // The mark is decorative — the greeting under it is the content.
+      // The span is the stylesheet's sizing hook: static, deliberately
+      // unpositioned, so nothing ever paints over the header's menu.
+      welcomeMark={
+        <span aria-hidden data-tf-companion-welcome-mark="">
+          <CompanionMark />
+        </span>
+      }
+    />
+  );
+}