@qoretechnologies/reqraft 0.10.10 → 0.10.13-pr.74.gccefa54

package/src/components/supportTicket/ReferencePicker.stories.tsx

@@ -0,0 +1,296 @@
+import { ReqoreButton, ReqoreUIProvider } from '@qoretechnologies/reqore';
+import { StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
+import { StoryMeta } from '../../types';
+import { InterfaceReferenceTags } from './InterfaceReferenceTags';
+import { IInterfaceReference } from './meta';
+import { ReferencePicker } from './ReferencePicker';
+import { TicketReplyBox } from './TicketReplyBox';
+
+/**
+ * The two-pane reference browser (master-detail: kinds on the left, that kind's
+ * interfaces on the right) with a single search bar that scopes both panes. Rendered
+ * **on top** of the composer and toggled by its "Reference interfaces" action.
+ */
+const meta = {
+  component: ReferencePicker,
+  title: 'Components/ReferencePicker',
+} as StoryMeta<typeof ReferencePicker>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ACCENT = { main: 'custom1' } as const;
+
+const KINDS = [
+  'workflow',
+  'service',
+  'job',
+  'fsm',
+  'connection',
+  'mapper',
+  'class',
+  'value-map',
+  'qog',
+  'ai-collection',
+  'ai-endpoint',
+  'ai-guardrail',
+];
+
+/* Stands in for the host's fetch: in the IDE these come off the customer's live
+ * instance one kind at a time. */
+const CATALOGUE: Record<string, string[]> = {
+  workflow: ['order-sync:1.2', 'invoice-export:2.0', 'partner-recon:1.1'],
+  service: ['notifier', 'audit-logger', 'partner-gateway'],
+  job: ['nightly-recon', 'cleanup-temp', 'sla-report'],
+  fsm: ['onboarding', 'escalation'],
+  connection: ['sftp-partner', 'pgsql-omq', 'salesforce-prod'],
+  mapper: ['csv-to-order', 'order-to-invoice'],
+  class: ['OrderUtils', 'PartnerApi'],
+  'value-map': ['country-codes', 'currency'],
+  qog: ['telegram-intake', 'stripe-billing'],
+  'ai-collection': ['kb-support'],
+  'ai-endpoint': ['gpt-router'],
+  'ai-guardrail': ['pii-filter'],
+};
+
+const darkTheme = (Story: () => JSX.Element) => (
+  <ReqoreUIProvider theme={{ main: '#121212', intents: { custom1: '#762f7e' } }}>
+    <div style={{ padding: 20, background: '#121212' }}>
+      <Story />
+    </div>
+  </ReqoreUIProvider>
+);
+
+/** Drives the picker the way a host does: owns the selected kind, resolves that
+ *  kind's interfaces, and accumulates what gets picked. */
+const Hosted = ({ withComposer }: { withComposer?: boolean }) => {
+  const [kind, setKind] = useState<string>('workflow');
+  const [picked, setPicked] = useState<IInterfaceReference[]>([]);
+  const [open, setOpen] = useState<boolean>(true);
+
+  const picker = (
+    <ReferencePicker
+      kinds={KINDS}
+      kind={kind}
+      onKindChange={setKind}
+      items={CATALOGUE[kind] ?? []}
+      picked={picked}
+      onAdd={(reference) => setPicked((current) => [...current, reference])}
+    />
+  );
+
+  if (!withComposer) {
+    return picker;
+  }
+
+  return (
+    <div style={{ maxWidth: 780 }}>
+      {open ? <div style={{ marginBottom: 10 }}>{picker}</div> : null}
+      <TicketReplyBox
+        onSend={fn()}
+        placeholder='Write a reply…'
+        aboveInput={
+          picked.length ? (
+            <InterfaceReferenceTags size='tiny' customTheme={ACCENT} references={picked} />
+          ) : undefined
+        }
+        footerActions={
+          <ReqoreButton
+            className='references-toggle'
+            icon='LinksLine'
+            minimal
+            flat
+            badge={picked.length || undefined}
+            active={open}
+            customTheme={ACCENT}
+            tooltip={open ? 'Hide references' : 'Reference interfaces'}
+            onClick={() => setOpen((shown) => !shown)}
+          />
+        }
+      />
+    </div>
+  );
+};
+
+/*
+ * Queried by role, not by text: ReqoreButton renders its label in a pair of spans (an
+ * active one and an aria-hidden inactive one) to cross-fade, so getByText matches twice
+ * for every button. The accessible name collapses that pair back to one.
+ */
+const option = (canvas: ReturnType<typeof within>, name: string) =>
+  canvas.getByRole('button', { name });
+const missingOption = (canvas: ReturnType<typeof within>, name: string) =>
+  canvas.queryByRole('button', { name });
+
+/** Picking an interface adds it as a reference — and it stops being offered, so the
+ *  same thing can't be referenced twice. */
+export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Renders the two-pane reference browser and, on picking an interface, adds it as a reference and drops it from the pane so the same thing can't be referenced twice.",
+      },
+    },
+  },
+  decorators: [darkTheme],
+  render: () => <Hosted />,
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    await userEvent.click(await canvas.findByRole('button', { name: 'order-sync:1.2' }));
+    // it moves out of the pane once picked
+    await waitFor(() => expect(missingOption(canvas, 'order-sync:1.2')).not.toBeInTheDocument());
+    // its siblings are untouched
+    await expect(option(canvas, 'invoice-export:2.0')).toBeInTheDocument();
+  },
+};
+
+/** Selecting a kind on the left swaps the right pane to that kind's interfaces. */
+export const SwitchesKind: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Renders the picker and shows that selecting a kind on the left swaps the right pane to that kind's interfaces.",
+      },
+    },
+  },
+  decorators: [darkTheme],
+  render: () => <Hosted />,
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    await expect(option(canvas, 'order-sync:1.2')).toBeInTheDocument();
+    await userEvent.click(option(canvas, 'connection'));
+    await waitFor(() => expect(option(canvas, 'sftp-partner')).toBeInTheDocument());
+    await expect(missingOption(canvas, 'order-sync:1.2')).not.toBeInTheDocument();
+  },
+};
+
+/** One search scopes both panes: the kind list and the selected kind's interfaces. */
+export const SearchScopesBothPanes: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Renders the picker and shows its single search box scoping both panes at once — filtering the selected kind's interfaces and the kind list together.",
+      },
+    },
+  },
+  decorators: [darkTheme],
+  render: () => <Hosted />,
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    const search = canvasElement.querySelector(
+      'input[placeholder*="Search kinds"]'
+    ) as HTMLInputElement;
+
+    await userEvent.type(search, 'sync');
+    // right pane: only the matching interface survives
+    await waitFor(() =>
+      expect(missingOption(canvas, 'invoice-export:2.0')).not.toBeInTheDocument()
+    );
+    await expect(option(canvas, 'order-sync:1.2')).toBeInTheDocument();
+    // left pane: no kind is called "sync", so the kind list empties out
+    await expect(canvas.getByText('No kinds')).toBeInTheDocument();
+
+    // a kind name matches: that kind stays, and every other kind drops away
+    await userEvent.clear(search);
+    await userEvent.type(search, 'connect');
+    await waitFor(() => expect(option(canvas, 'connection')).toBeInTheDocument());
+    await expect(missingOption(canvas, 'workflow')).not.toBeInTheDocument();
+  },
+};
+
+/** The right pane says it's still fetching rather than claiming the kind is empty. */
+export const Loading: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Renders the loading state, where the right pane reports it is still fetching ('Loading workflows…') rather than claiming the kind is empty.",
+      },
+    },
+  },
+  decorators: [darkTheme],
+  render: () => (
+    <ReferencePicker
+      kinds={KINDS}
+      kind='workflow'
+      onKindChange={fn()}
+      items={[]}
+      loading
+      onAdd={fn()}
+    />
+  ),
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('Loading workflows…')).toBeInTheDocument();
+    await expect(canvas.queryByText('No matching workflow')).not.toBeInTheDocument();
+  },
+};
+
+/**
+ * The host's fetch failed. The pane says so and offers a retry — an empty list here
+ * would read as "this instance has no connections", which is a different and much more
+ * alarming claim than "we couldn't ask". The specific failure is the tooltip.
+ */
+export const LoadFailed: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Renders the fetch-failure state, where the pane shows the error and a retry action instead of an empty list that would read as 'this instance has no connections'.",
+      },
+    },
+  },
+  decorators: [darkTheme],
+  render: () => (
+    <ReferencePicker
+      kinds={KINDS}
+      kind='connection'
+      onKindChange={fn()}
+      items={[]}
+      error='Could not reach the Qorus instance'
+      onRetry={fn()}
+      onAdd={fn()}
+    />
+  ),
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    const retry = await canvas.findByRole('button', { name: /Couldn't load connections/ });
+    await expect(retry).toBeInTheDocument();
+    // the failure replaces the list rather than sitting alongside an empty one
+    await expect(canvas.queryByText('No matching connection')).not.toBeInTheDocument();
+  },
+};
+
+/** In place: above the composer, toggled by the composer's own action, with the picked
+ *  references shown as chips over the input. */
+export const AboveTheComposer: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Renders the picker in place above the composer, toggled by the composer's own action, with picked references surfacing as chips over the input that persist when the picker is closed.",
+      },
+    },
+  },
+  decorators: [darkTheme],
+  render: () => <Hosted withComposer />,
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    await userEvent.click(await canvas.findByRole('button', { name: 'order-sync:1.2' }));
+    // the pick leaves the pane and surfaces as a chip on the composer
+    await waitFor(() => expect(missingOption(canvas, 'order-sync:1.2')).not.toBeInTheDocument());
+    await expect(canvas.getAllByText('order-sync:1.2').length).toBeGreaterThan(0);
+
+    const toggle = canvasElement.querySelector('.references-toggle') as HTMLElement;
+    await userEvent.click(toggle);
+    // the picker closes; the chip stays, because the reference is still attached
+    await waitFor(() =>
+      expect(missingOption(canvas, 'invoice-export:2.0')).not.toBeInTheDocument()
+    );
+    await expect(canvas.getAllByText('order-sync:1.2').length).toBeGreaterThan(0);
+  },
+};

package/src/components/supportTicket/ReferencePicker.tsx

@@ -0,0 +1,237 @@
+import { ReqoreInput, ReqoreMenu, ReqoreMenuItem, ReqoreSpinner } from '@qoretechnologies/reqore';
+import { IReqoreIconName } from '@qoretechnologies/reqore/dist/types/icons';
+import { ReactNode, useMemo, useState } from 'react';
+import styled from 'styled-components';
+import { thinScrollbar } from '../../helpers/scrollbar';
+import { defaultInterfaceIcon, IInterfaceReference } from './meta';
+
+/*
+ * The two-pane interface browser: kinds down the left, the selected kind's interfaces
+ * on the right, and one search field that scopes both. Sits above a ticket composer,
+ * toggled by the composer's "Reference interfaces" action.
+ *
+ * The host owns the data. Which kinds exist and what lives under one are questions only
+ * the surrounding app can answer — the IDE lists them off the customer's live instance,
+ * a story hands over fixtures — so this component takes `kinds` and the selected kind's
+ * `items` and does the rest: selection, search, and turning a click into a reference.
+ */
+
+/** How many interfaces the right pane shows before it scrolls. */
+const PANE_MAX_HEIGHT = 180;
+const KIND_PANE_WIDTH = 150;
+
+/*
+ * A scroll pane with the thin, unobtrusive scrollbar the Qonsole surfaces use
+ * (transparent track, translucent rounded thumb) rather than the raw browser one.
+ * webkit-only, like those surfaces: setting `scrollbar-width` as well would let
+ * Chromium override this custom 6px with its own, wider, "thin".
+ */
+const Pane = styled.div<{ $right?: boolean }>`
+  ${({ $right }) =>
+    $right
+      ? 'flex: 1; min-width: 0;'
+      : `width: ${KIND_PANE_WIDTH}px; flex: none; border-right: 1px solid rgba(123, 104, 238, 0.25);`}
+  max-height: ${PANE_MAX_HEIGHT}px;
+  overflow-y: auto;
+  padding: 4px;
+
+  ${thinScrollbar}
+`;
+
+const Frame = styled.div`
+  border: 1px solid rgba(123, 104, 238, 0.25);
+  border-radius: 8px;
+  overflow: hidden;
+`;
+
+const Panes = styled.div`
+  display: flex;
+`;
+
+/*
+ * An underline search field. The input itself is borderless (`flat transparent`) and
+ * this wrapper carries the single bottom border, so the search reads as a line rather
+ * than a full grey box — including on focus, where Reqore's default is a 2px outline
+ * around the whole control. Suppressing that outline and brightening the underline
+ * instead keeps a focus cue without the box. The selector is scoped under this wrapper,
+ * so it outranks Reqore's without `!important`.
+ */
+const Search = styled.div<{ $accent: string }>`
+  padding: 6px 4px 4px;
+  border-bottom: 1px solid ${({ $accent }) => `${$accent}80`};
+  transition: border-color 0.15s ease-out;
+
+  .reqore-control-wrapper:focus-within {
+    outline: none;
+  }
+  &:focus-within {
+    border-bottom-color: ${({ $accent }) => $accent};
+  }
+`;
+
+const Note = styled.div`
+  opacity: 0.4;
+  padding: 8px 6px;
+  font-size: 12px;
+`;
+
+const DEFAULT_ACCENT = '#762f7e';
+
+export interface IReferencePickerProps {
+  /** the interface kinds listed down the left pane */
+  kinds: string[];
+  /** the kind whose interfaces `items` holds */
+  kind: string;
+  onKindChange: (kind: string) => void;
+  /**
+   * The selected kind's interfaces, by name. Fetching is the host's job — it knows
+   * where they come from and how to cache them.
+   */
+  items: string[];
+  /** `items` is still being fetched, so the right pane shows a spinner rather than
+   *  claiming the kind is empty */
+  loading?: boolean;
+  /**
+   * The host's fetch for this kind failed. Shown in place of the list, because an
+   * empty pane would otherwise read as "this instance has no workflows" — which is a
+   * different and much more alarming statement than "we couldn't ask".
+   */
+  error?: string;
+  /** Retry the failed fetch. The error state is pressable when given. */
+  onRetry?: () => void;
+  /** Already-picked references. Anything of the current kind that is already picked is
+   *  dropped from the right pane, so a reference can't be added twice. */
+  picked?: IInterfaceReference[];
+  onAdd: (reference: IInterfaceReference) => void;
+  /** the whole picker is inert (e.g. a reply is in flight) */
+  disabled?: boolean;
+  /** Per-kind icon. Consumers with their own icon vocabulary (the IDE) pass one; the
+   *  built-in per-kind default is used when omitted. */
+  resolveInterfaceIcon?: (kind: string) => IReqoreIconName;
+  /** the underline / selected-kind colour. Defaults to the support surfaces' violet. */
+  accent?: string;
+  /** shown above the panes — the composer's picked-reference chips, typically */
+  header?: ReactNode;
+}
+
+export const ReferencePicker = ({
+  kinds,
+  kind,
+  onKindChange,
+  items,
+  loading,
+  error,
+  onRetry,
+  picked,
+  onAdd,
+  disabled,
+  resolveInterfaceIcon = defaultInterfaceIcon,
+  accent = DEFAULT_ACCENT,
+  header,
+}: IReferencePickerProps) => {
+  const [query, setQuery] = useState<string>('');
+  const needle = query.trim().toLowerCase();
+
+  const visibleKinds = useMemo(
+    () => (needle ? kinds.filter((k) => k.toLowerCase().includes(needle)) : kinds),
+    [kinds, needle]
+  );
+
+  /*
+   * The right pane drops what's already been picked and then applies the search. When
+   * the KIND itself matches the search ("workflow"), its interfaces all stay — you
+   * searched for the kind, so you want to see what's in it.
+   */
+  const visibleItems = useMemo(() => {
+    const already = new Set(
+      (picked ?? [])
+        .filter((reference) => reference.interface_kind === kind)
+        .map((reference) => reference.interface_name)
+    );
+    const kindMatches = kind.toLowerCase().includes(needle);
+    return items.filter(
+      (name) =>
+        !already.has(name) && (!needle || kindMatches || name.toLowerCase().includes(needle))
+    );
+  }, [items, picked, kind, needle]);
+
+  return (
+    <Frame>
+      {header}
+      <Search $accent={accent}>
+        <ReqoreInput
+          value={query}
+          onChange={(event) => setQuery((event.target as HTMLInputElement).value)}
+          placeholder='Search kinds and interfaces…'
+          icon='SearchLine'
+          minimal
+          flat
+          transparent
+          fluid
+          disabled={disabled}
+          onClearClick={query ? () => setQuery('') : undefined}
+        />
+      </Search>
+      <Panes>
+        {/* Both panes are `ReqoreMenu`s of `ReqoreMenuItem`s — a vertical selectable
+            list is exactly what Menu is, so the selection (`selected`), the left-icon +
+            right-icon, and the item chrome come from reqore rather than hand-styled
+            buttons. The Pane wrapper still owns the scroll (fixed/flex width +
+            thinScrollbar); the menus render transparent inside it. */}
+        <Pane>
+          {visibleKinds.length ? (
+            <ReqoreMenu transparent flat padded={false} width='100%' size='small'>
+              {visibleKinds.map((option) => (
+                <ReqoreMenuItem
+                  key={option}
+                  icon={resolveInterfaceIcon(option)}
+                  label={option}
+                  selected={option === kind}
+                  disabled={disabled}
+                  onClick={() => onKindChange(option)}
+                />
+              ))}
+            </ReqoreMenu>
+          ) : (
+            <Note>No kinds</Note>
+          )}
+        </Pane>
+        <Pane $right>
+          {error ? (
+            <ReqoreMenu transparent flat padded={false} width='100%' size='small'>
+              <ReqoreMenuItem
+                icon='ErrorWarningLine'
+                rightIcon={onRetry ? 'RefreshLine' : undefined}
+                intent='danger'
+                label={`Couldn't load ${kind}s`}
+                /* the specific failure is the tooltip — the pane states the outcome */
+                tooltip={error}
+                onClick={onRetry}
+              />
+            </ReqoreMenu>
+          ) : loading ? (
+            <ReqoreSpinner iconColor='info' size='small' centered>
+              Loading {kind}s…
+            </ReqoreSpinner>
+          ) : visibleItems.length ? (
+            <ReqoreMenu transparent flat padded={false} width='100%' size='small'>
+              {visibleItems.map((name) => (
+                <ReqoreMenuItem
+                  key={name}
+                  icon={resolveInterfaceIcon(kind)}
+                  rightIcon='AddLine'
+                  label={name}
+                  disabled={disabled}
+                  tooltip={`Reference ${kind} ${name}`}
+                  onClick={() => onAdd({ interface_kind: kind, interface_name: name })}
+                />
+              ))}
+            </ReqoreMenu>
+          ) : (
+            <Note>No matching {kind}</Note>
+          )}
+        </Pane>
+      </Panes>
+    </Frame>
+  );
+};

package/src/components/supportTicket/TicketConversation.stories.tsx

@@ -0,0 +1,122 @@
+import { ReqoreUIProvider } from '@qoretechnologies/reqore';
+import { StoryObj } from '@storybook/react-vite';
+import { expect, fn } from 'storybook/test';
+import { ReactNode } from 'react';
+import { StoryMeta } from '../../types';
+import { ITicketThreadMessage, TicketThread } from '../ticketThread/TicketThread';
+import { InterfaceReferenceTags } from './InterfaceReferenceTags';
+import { TicketReplyBox } from './TicketReplyBox';
+
+/**
+ * The full ticket surface — the shared `<TicketThread>` conversation above the
+ * `<TicketReplyBox>` composer, the way a ticket detail (customer) or the staff
+ * drawer stacks them. Shown under the Qorus theme so the `custom1` accent renders.
+ */
+const meta = {
+  component: TicketReplyBox,
+  title: 'Components/TicketConversation',
+  args: { onSend: fn() },
+} as StoryMeta<typeof TicketReplyBox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const CUSTOMER: ITicketThreadMessage = {
+  message_id: 'm1',
+  author_type: 'customer',
+  author_id: 'ops@acme.io',
+  body: 'Since upgrading to 3.2 our nightly SFTP transfer to the partner endpoint times out after about 30 seconds. It ran fine on 3.1 with the same connection config.',
+  created: '2026-07-16T09:12:00Z',
+  referenced_interfaces: [{ interface_kind: 'connection', interface_name: 'sftp-partner' }],
+};
+const STAFF: ITicketThreadMessage = {
+  message_id: 'm2',
+  author_type: 'staff',
+  author_id: 'nick',
+  body: "Thanks for the detailed report — we've reproduced the timeout and a fix is in review. In the meantime, can you confirm the datasource pool size configured for the sftp-partner connection?",
+  created: '2026-07-16T10:03:00Z',
+};
+const INTERNAL: ITicketThreadMessage = {
+  message_id: 'm3',
+  author_type: 'staff',
+  author_id: 'nick',
+  internal: true,
+  body: 'Root cause: the connection-pool default silently dropped from 4 to 1 in the 3.2 migration. Patch is in review against develop.',
+  created: '2026-07-16T10:05:00Z',
+};
+
+const themed = (node: ReactNode) => (
+  <ReqoreUIProvider theme={{ main: '#121212', intents: { custom1: '#762f7e' } }}>
+    <div style={{ padding: 20, background: '#121212', maxWidth: 780 }}>{node}</div>
+  </ReqoreUIProvider>
+);
+
+const refs = (
+  <InterfaceReferenceTags
+    size='tiny'
+    customTheme={{ main: 'custom1' }}
+    references={[{ interface_kind: 'connection', interface_name: 'sftp-partner' }]}
+  />
+);
+
+/**
+ * Staff view — the thread with `viewerRole='staff'` (internal notes show, amber)
+ * above the staff composer with the split send.
+ */
+export const StaffConversation: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Renders the staff view — the thread with viewerRole='staff' (internal notes visible, amber) stacked above the staff composer with its split send.",
+      },
+    },
+  },
+  render: () =>
+    themed(
+      <>
+        <TicketThread viewerRole='staff' messages={[CUSTOMER, STAFF, INTERNAL]} />
+        <div style={{ marginTop: 16 }}>
+          <TicketReplyBox allowInternalNote onSend={fn()} aboveInput={refs} />
+        </div>
+      </>
+    ),
+  async play({ canvasElement }) {
+    await expect(canvasElement.textContent).toContain('reproduced the timeout');
+    // the internal note is visible to staff
+    await expect(canvasElement.textContent).toContain('Root cause');
+    // the composer (rich editor) renders below the thread
+    await expect(canvasElement.querySelector('[contenteditable="true"]')).not.toBeNull();
+  },
+};
+
+/**
+ * Customer view — the same thread as the customer sees it (`viewerRole='customer'`,
+ * staff shown as "Qorus Support", no internal notes) above their reply composer.
+ */
+export const CustomerConversation: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Renders the customer view — the same thread with viewerRole='customer' (staff shown as 'Qorus Support', no internal notes) stacked above the customer's reply composer.",
+      },
+    },
+  },
+  render: () =>
+    themed(
+      <>
+        <TicketThread viewerRole='customer' messages={[CUSTOMER, STAFF]} />
+        <div style={{ marginTop: 16 }}>
+          <TicketReplyBox onSend={fn()} aboveInput={refs} />
+        </div>
+      </>
+    ),
+  async play({ canvasElement }) {
+    await expect(canvasElement.textContent).toContain('reproduced the timeout');
+    // the internal note is not in the customer's messages
+    await expect(canvasElement.textContent).not.toContain('Root cause');
+    // the composer (rich editor) renders below the thread
+    await expect(canvasElement.querySelector('[contenteditable="true"]')).not.toBeNull();
+  },
+};