@qoretechnologies/reqraft 0.10.65 → 0.10.66-pr.145.g2d1b4c8

package/src/components/form/fields/allowed-values/AllowedValues.tsx

@@ -8,7 +8,7 @@
 // - `ConnectionManagement` per-item actions — dropped (actions omitted).
 // - `Select` → reqraft `SelectFormField` (`items` instead of `defaultItems`,
 //   single-arg `onChange`; `type`/`closeCollectionOnUnMount` not forwarded).
-import { ReqoreCheckbox, ReqoreControlGroup, ReqoreSpan } from '@qoretechnologies/reqore';
+import { ReqoreCheckbox, ReqoreControlGroup } from '@qoretechnologies/reqore';
 import { IReqoreButtonProps } from '@qoretechnologies/reqore/dist/components/Button';
 import { IQorusAllowedValue, TQorusType } from '@qoretechnologies/ts-toolkit';
 import { size as count, isEqual } from 'lodash';
@@ -20,6 +20,7 @@ import {
 } from '../select/SelectCollection';
 import { ISelectFormFieldItem, SelectFormField as Select } from '../select/Select';
 import { useAllowedValueAvailability } from '../../engine/OptionFieldMessages';
+import { ChoiceGroupHeading, useSelectedChoiceIntent } from '../ChoiceGroupHeading';
 import type { IReqraftAllowedValue } from '../Field';
 
 export interface IFieldAllowedValuesProps extends Pick<
@@ -97,13 +98,15 @@ export const FieldAllowedValuesCheckGroup = memo(
      */
     label?: string;
   }) => {
+    const selectedChoiceIntent = useSelectedChoiceIntent();
+
     return (
       <ReqoreControlGroup vertical size={rest.size || 'small'} gapSize='tiny'>
-        <ReqoreSpan effect={{ opacity: 0.6, uppercase: true, weight: 'bold' }} size='tiny'>
+        <ChoiceGroupHeading>
           {label ? `${label}:`
           : multiSelect ? 'Select one or more:'
           : 'Select one:'}
-        </ReqoreSpan>
+        </ChoiceGroupHeading>
         {items?.map((item) => {
           const unavailable = getSelectItemUnavailability(item);
 
@@ -134,7 +137,7 @@ export const FieldAllowedValuesCheckGroup = memo(
                  which keeps the pointer events the tooltip is read through.
                  It does not withhold `onClick` — the handler below does. */
               readOnly={rest.readOnly || !!unavailable}
-              intent={item.value === value ? 'info' : undefined}
+              intent={selectedChoiceIntent(item.value === value)}
               // `isEqual`, and only once there is a value to match. The single
               // -select branch compared JSON.stringify(value) with
               // JSON.stringify(item.value), and JSON.stringify(undefined) is

package/src/components/form/fields/radio-group/RadioGroup.tsx

@@ -1,6 +1,7 @@
 import { ReqoreRadioGroup } from '@qoretechnologies/reqore';
 import { IReqoreRadioGroupProps } from '@qoretechnologies/reqore/dist/components/RadioGroup';
 import { useMemo } from 'react';
+import { useIsCalmForm } from '../../engine/formAppearance';
 
 export interface IRadioGroupFormFieldProps
   extends Omit<IReqoreRadioGroupProps, 'onChange' | 'onSelectClick' | 'selected'> {
@@ -16,20 +17,25 @@ export const RadioGroupFormField = ({
   value,
   ...rest
 }: IRadioGroupFormFieldProps) => {
+  const calm = useIsCalmForm();
   const items: IReqoreRadioGroupProps['items'] = useMemo(
     () =>
       _items.map((item) => ({
         margin: 'right',
-        labelEffect: {
-          spaced: 1,
-          weight: 'bold',
-          uppercase: true,
-          textSize: 'small',
-        },
+        // Calm: an option's name as written — a choice is read, not shouted.
+        labelEffect:
+          calm ?
+            { textSize: 'small' }
+          : {
+              spaced: 1,
+              weight: 'bold',
+              uppercase: true,
+              textSize: 'small',
+            },
         ...item,
         disabled: disabled || item.disabled,
       })),
-    [_items]
+    [_items, calm]
   );
 
   return (

package/src/components/form/index.tsx

@@ -24,6 +24,7 @@ export * from './fields/string/String';
 export * from './fields/template/ExampleValueModal';
 export * from './fields/template/TemplateField';
 export * from './engine/FormEngine';
+export * from './engine/formAppearance';
 export * from './engine/FormFieldsSkeleton';
 export * from './engine/optionActions';
 export * from './engine/rendererTypes';

package/src/components/supportTicket/InterfaceReferenceTags.tsx

@@ -31,8 +31,9 @@ export interface IInterfaceReferenceTagsProps {
    */
   onRemove?: (reference: IInterfaceReference) => void;
   size?: TSizes;
-  /** Chip styling — pass `intent`/`customTheme` (e.g. `{ main: 'custom1' }`) to tint
-   *  the reference chips to a surface's accent (the Qonsole/helpdesk composer does). */
+  /** Chip styling. Left out, a reference is a quiet tag with its kind's icon, as the
+   *  support surfaces draw it; tint it only where the colour has a job (Qonsole's purple
+   *  is Qonsole's alone — instruction-files decision 002). */
   intent?: ComponentProps<typeof ReqoreTag>['intent'];
   customTheme?: ComponentProps<typeof ReqoreTag>['customTheme'];
   /** Resolve a per-reference image — e.g. a qog's trigger-app logo, the way the

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

@@ -29,8 +29,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const ACCENT = { main: 'custom1' } as const;
-
 /* The kind ids a host passes — wire values, not labels. `qog` is the customer-facing
  * kind for what the instance still lists as `fsm`; hosts map that at the fetch
  * boundary, so `fsm` never reaches the picker. */
@@ -143,7 +141,6 @@ const Hosted = ({
                their own remove — and read a size up from the thread's, where they're
                a record rather than a control. */
             <InterfaceReferenceTags
-              customTheme={ACCENT}
               references={picked}
               onRemove={(reference) =>
                 setPicked((current) =>
@@ -167,7 +164,6 @@ const Hosted = ({
             flat
             badge={picked.length || undefined}
             active={open}
-            customTheme={ACCENT}
             tooltip={open ? 'Hide references' : 'Reference interfaces'}
             onClick={() => setOpen((shown) => !shown)}
           />

package/src/components/supportTicket/ReferencePicker.tsx

@@ -4,8 +4,11 @@ import {
   ReqoreMenuItem,
   ReqoreModal,
   ReqoreSpinner,
+  useReqoreTheme,
 } from '@qoretechnologies/reqore';
 import { TReqoreBadge } from '@qoretechnologies/reqore/dist/components/Button';
+import { getReadableColor } from '@qoretechnologies/reqore/dist/helpers/colors';
+import { rgba } from 'polished';
 import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { thinScrollbar } from '../../helpers/scrollbar';
@@ -128,21 +131,22 @@ const Panes = styled.div`
  * instead keeps a focus cue without the box. The selector is scoped under this wrapper,
  * so it outranks Reqore's without `!important`.
  *
- * `$active` (the field has a query) holds the underline at full accent, so a filtered
- * list is legible as filtered at a glance — the same signal `intent='info'` carries on
- * a plain filter control, spoken in this surface's own accent.
+ * The line is the theme's neutral hairline, a step brighter on focus. Only `$active` (the
+ * field has a query) colours it, in `$accent` — blue by default, the same signal
+ * `intent='info'` carries on a plain filter control: blue says a filter is narrowing the
+ * list, and nothing else (instruction-files decision 001). It is never the product's
+ * purple, which a support surface does not wear (decision 002).
  */
-const Search = styled.div<{ $accent: string; $active?: boolean }>`
+const Search = styled.div<{ $accent: string; $line: string; $focus: string; $active?: boolean }>`
   padding: 6px 4px 4px;
-  border-bottom: 1px solid
-    ${({ $accent, $active }) => ($active ? $accent : `${$accent}80`)};
+  border-bottom: 1px solid ${({ $accent, $line, $active }) => ($active ? $accent : $line)};
   transition: border-color 0.15s ease-out;
 
   .reqore-control-wrapper:focus-within {
     outline: none;
   }
   &:focus-within {
-    border-bottom-color: ${({ $accent }) => $accent};
+    border-bottom-color: ${({ $accent, $focus, $active }) => ($active ? $accent : $focus)};
   }
 `;
 
@@ -152,8 +156,6 @@ const Note = styled.div`
   font-size: 12px;
 `;
 
-const DEFAULT_ACCENT = '#762f7e';
-
 /*
  * How a picked row reads: `info`, tinted rather than filled.
  *
@@ -241,7 +243,8 @@ export interface IReferencePickerProps {
    * vocabulary.
    */
   resolveKindLabel?: (kind: string) => string;
-  /** the underline / selected-kind colour. Defaults to the support surfaces' violet. */
+  /** the search underline's colour while the list is filtered. Defaults to the theme's
+   *  `info` blue — the colour that says a filter is narrowing a list. */
   accent?: string;
   /** shown above the panes — the composer's picked-reference chips, typically */
   header?: ReactNode;
@@ -303,13 +306,15 @@ export const ReferencePicker = ({
   disabled,
   resolveInterfaceIcon = defaultInterfaceIcon,
   resolveKindLabel = defaultInterfaceKindLabel,
-  accent = DEFAULT_ACCENT,
+  accent,
   header,
   onClose,
   title = 'Reference interfaces',
   layout = 'auto',
   presentation = 'auto',
 }: IReferencePickerProps) => {
+  const theme = useReqoreTheme();
+  const readable = getReadableColor(theme);
   const [query, setQuery] = useState<string>('');
   const needle = query.trim().toLowerCase();
 
@@ -510,7 +515,12 @@ export const ReferencePicker = ({
   const body = (
     <Frame ref={frameRef} $bare={asModal}>
       {header}
-      <Search $accent={accent} $active={!!needle}>
+      <Search
+        $accent={accent ?? theme.intents?.info ?? readable}
+        $line={rgba(readable, 0.2)}
+        $focus={rgba(readable, 0.5)}
+        $active={!!needle}
+      >
         <ReqoreInput
           value={query}
           onChange={(event) => setQuery((event.target as HTMLInputElement).value)}

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

@@ -53,7 +53,6 @@ const themed = (node: ReactNode) => (
 
 const refs = (
   <InterfaceReferenceTags
-    customTheme={{ main: 'custom1' }}
     references={[{ interface_kind: 'connection', interface_name: 'sftp-partner' }]}
   />
 );

package/src/components/supportTicket/TicketHeader.tsx

@@ -201,7 +201,8 @@ export const TicketHeader = ({
        and the strip would no longer line up with them. */
     rowPadding='tiny'
     labelWidth={LABEL_WIDTH}
-    uppercaseLabels
+    /* The labels' case is the theme's (`theme.uppercaseLabels`): an app that sets its
+       labels in sentence case gets "Opened by", not "OPENED BY". */
     flat
     transparent
     padded={false}

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

@@ -16,6 +16,19 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+/**
+ * The reply is sent with the white primary, never the Qonsole purple: a ticket reply is not a
+ * hand-off to Qonsole (instruction-files decision 002). Read from the drawn button, so a theme
+ * or a default that brings the purple back fails here.
+ */
+const expectWhiteSend = async (canvasElement: HTMLElement) => {
+  const send = within(canvasElement).getByText('Send reply').closest('button')!;
+  await waitFor(() => {
+    const [r, g, b] = getComputedStyle(send).backgroundColor.match(/\d+/g)!.map(Number);
+    expect(Math.min(r, g, b)).toBeGreaterThan(200);
+  });
+};
+
 /**
  * The customer composer, plain-editor variant (used here for a deterministic
  * type→send test): an attach button (no extra menu → a plain button, not a
@@ -27,7 +40,7 @@ export const Default: Story = {
     docs: {
       description: {
         story:
-          "Renders the customer composer's plain-editor variant — an attach button and Send, no internal-note toggle; typing a reply enables Send, which calls onSend with the body and internal: false.",
+          "Renders the customer composer's plain-editor variant — an attach button and Send, no internal-note toggle; typing a reply enables Send — the white primary, not the Qonsole purple — which calls onSend with the body and internal: false.",
       },
     },
   },
@@ -39,6 +52,7 @@ export const Default: Story = {
     await expect(canvas.queryByText('Internal note')).not.toBeInTheDocument();
 
     await userEvent.type(textarea!, 'Here is my reply');
+    await expectWhiteSend(canvasElement);
     await userEvent.click(canvas.getByText('Send reply'));
     await waitFor(() =>
       expect(args.onSend).toHaveBeenCalledWith(
@@ -59,7 +73,7 @@ export const StaffWithInternalNote: Story = {
     docs: {
       description: {
         story:
-          "Renders the staff composer with a split send button — the primary action posts a public reply, while the caret opens 'Add internal note', which sends with internal: true.",
+          "Renders the staff composer with a split send button — the primary action (white, not the Qonsole purple) posts a public reply, while the caret opens 'Add internal note', which sends with internal: true.",
       },
     },
   },
@@ -72,6 +86,7 @@ export const StaffWithInternalNote: Story = {
 
     const textarea = canvasElement.querySelector('textarea');
     await userEvent.type(textarea!, 'internal context');
+    await expectWhiteSend(canvasElement);
 
     // "Add internal note" lives behind the split-send caret
     const caret = canvasElement.querySelector('.ticket-send-more');
@@ -122,8 +137,7 @@ export const RichHelpdeskReply: Story = {
       },
     },
   },
-  // Rendered under the Qorus theme (as in qorus-ide / admin-portal) so the
-  // `custom1` accent shows as the Qorus purple — a bare reqore theme greys it out.
+  // Rendered under the Qorus theme, as in qorus-ide / admin-portal.
   decorators: [
     (Story) => (
       <ReqoreUIProvider theme={{ main: '#121212', intents: { custom1: '#762f7e' } }}>
@@ -141,23 +155,15 @@ export const RichHelpdeskReply: Story = {
       { label: 'Take screenshot', icon: 'CameraAiLine', onClick: fn() },
       { label: 'Capture area', icon: 'CropLine', onClick: fn() },
     ],
-    // the reference toggle, styled to the same custom1 accent as the send
+    // the reference toggle: a quiet icon button, like the attach button beside it
     footerActions: (
-      <ReqoreButton
-        icon='LinksLine'
-        minimal
-        flat
-        badge={1}
-        customTheme={{ main: 'custom1' }}
-        tooltip='Reference interfaces'
-      />
+      <ReqoreButton icon='LinksLine' minimal flat badge={1} tooltip='Reference interfaces' />
     ),
-    // references on top of the editor (inside the bar), tinted to the accent — no
-    // "References" label, the chips read as the referenced interfaces on their own
+    // references on top of the editor (inside the bar), as quiet tags with the kind's
+    // icon — no "References" label, the chips read as the referenced interfaces on their own
     aboveInput: (
       <InterfaceReferenceTags
         references={[{ interface_kind: 'connection', interface_name: 'sftp-partner' }]}
-        customTheme={{ main: 'custom1' }}
       />
     ),
   },
@@ -176,7 +182,7 @@ export const RichHelpdeskReply: Story = {
 
 /**
  * Every referenceable interface kind on one message, so the per-kind icons +
- * accent chip styling can be reviewed together: workflow, service, job, fsm,
+ * chip styling can be reviewed together: workflow, service, job, fsm,
  * connection, mapper, class, value-map, qog, ai-collection, ai-endpoint,
  * ai-guardrail. (`qog` has no built-in icon → the generic fallback.)
  */
@@ -185,7 +191,7 @@ export const AllReferenceTypes: Story = {
     docs: {
       description: {
         story:
-          'Renders a reply carrying every referenceable interface kind at once, so the per-kind icons and accent chip styling can be reviewed together (qog falls back to the generic glyph).',
+          'Renders a reply carrying every referenceable interface kind at once, so the per-kind icons and chip styling can be reviewed together (qog falls back to the generic glyph).',
       },
     },
   },
@@ -202,7 +208,6 @@ export const AllReferenceTypes: Story = {
     defaultText: 'This one references every interface kind.',
     aboveInput: (
       <InterfaceReferenceTags
-        customTheme={{ main: 'custom1' }}
         references={[
           { interface_kind: 'workflow', interface_name: 'order-sync:1.2' },
           { interface_kind: 'service', interface_name: 'notifier' },
@@ -267,7 +272,6 @@ export const QogTriggerAppLogo: Story = {
     defaultText: 'These qogs are referenced by their trigger apps.',
     aboveInput: (
       <InterfaceReferenceTags
-        customTheme={{ main: 'custom1' }}
         references={[
           // resolved live from trigger_app (the customer/IDE path)
           { interface_kind: 'qog', interface_name: 'telegram-intake', trigger_app: 'Telegram' },
@@ -337,7 +341,6 @@ export const WithScreenshotAndReferences: Story = {
     defaultFiles: [screenshotFile()],
     aboveInput: (
       <InterfaceReferenceTags
-        customTheme={{ main: 'custom1' }}
         references={[
           { interface_kind: 'connection', interface_name: 'sftp-partner' },
           { interface_kind: 'qog', interface_name: 'telegram-intake', logo: appLogo('#2AABEE', 'T') },

package/src/components/supportTicket/TicketReplyBox.tsx

@@ -1,9 +1,29 @@
 import type { TReqoreDropdownItems } from '@qoretechnologies/reqore/dist/components/Dropdown/list';
 import { ReactNode } from 'react';
-import { Composer, IComposerSendAction, TComposerEditor } from '../composer/Composer';
+import {
+  Composer,
+  IComposerProps,
+  IComposerSendAction,
+  TComposerEditor,
+} from '../composer/Composer';
 import { fileToAttachment as defaultFileToAttachment } from './fileToAttachment';
 import { IAttachmentUpload } from './meta';
 
+/**
+ * A ticket reply is not a hand-off to Qonsole, so it does not wear Qonsole's look: no purple
+ * bar, no purple send (instruction-files decision 002 — a purple button means "this hands the
+ * work to Qonsole / AI" and nothing else). The bar keeps the composer's shape with the theme's
+ * own neutral edge (its `main`, a step lighter — how Reqore draws its dividers), and sending
+ * the reply is the surface's one primary action: white.
+ */
+const REPLY_BOX_EFFECT: IComposerProps['effect'] = {
+  gradient: { direction: 'to bottom right', colors: 'main:lighten:3' },
+};
+const REPLY_SEND_STYLE: Pick<IComposerSendAction, 'intent' | 'minimal'> = {
+  intent: 'white',
+  minimal: false,
+};
+
 /**
  * The `items` shape ReqoreDropdown accepts. Named, not derived: `ReqoreDropdown`
  * is a generic component, and `ComponentProps` of a generic resolves to `{}`
@@ -96,16 +116,15 @@ export const TicketReplyBox = ({
         : 'Send reply';
 
   // Staff surface splits the send button; customer surface is a single "Send reply".
-  // Both use the Qonsole-style minimal `custom1` accent (the Composer default); the
-  // internal note stays amber (`warning`) so it can't be mistaken for a public reply.
+  // Both send the reply as the white primary (`REPLY_SEND_STYLE`); the internal note
+  // stays amber (`warning`) so it can't be mistaken for a public reply.
   const sendActions: IComposerSendAction[] | undefined = allowInternalNote
     ? [
         {
           id: 'reply',
           label: labelFor(false),
           icon: 'SendPlane2Line',
-          minimal: true,
-          customTheme: { main: 'custom1' },
+          ...REPLY_SEND_STYLE,
         },
         {
           id: 'internal',
@@ -139,7 +158,10 @@ export const TicketReplyBox = ({
       disabledReason={disabledReason}
       onSend={handleSend}
       sendLabel={labelFor(false)}
+      sendIntent={REPLY_SEND_STYLE.intent}
+      sendMinimal={REPLY_SEND_STYLE.minimal}
       sendActions={sendActions}
+      effect={REPLY_BOX_EFFECT}
       sendMenuClassName='ticket-send-more'
       attachMenuItems={attachMenuItems}
       footerActions={footerActions}

package/src/components/ticketThread/TicketThread.stories.tsx

@@ -159,6 +159,30 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+/**
+ * How coloured a message's card is: the saturation (0–1) of its border, the one place
+ * ReqoreBubble draws its tint. A neutral card is near 0; amber or purple is well above.
+ */
+const cardSaturation = (messageId: string): number => {
+  const bubble = document.getElementById(`ticket-message-${messageId}`);
+  if (!bubble) throw new Error(`message ${messageId} not rendered`);
+  const bordered = [bubble, ...Array.from(bubble.querySelectorAll<HTMLElement>('*'))].find((el) => {
+    const style = getComputedStyle(el);
+    return parseFloat(style.borderTopWidth) > 0 && style.borderTopStyle !== 'none';
+  });
+  if (!bordered) throw new Error(`message ${messageId} has no card border`);
+  const [r, g, b] = getComputedStyle(bordered).borderTopColor.match(/[\d.]+/g)!.map(Number);
+  const max = Math.max(r, g, b);
+  return max === 0 ? 0 : (max - Math.min(r, g, b)) / max;
+};
+
+/** Neither side of a conversation is tinted (no purple, no blue); only an internal note is. */
+const expectNeutralCards = async (ids: string[]) => {
+  for (const id of ids) {
+    await expect(cardSaturation(id)).toBeLessThan(0.2);
+  }
+};
+
 /**
  * The customer viewpoint: the customer's own messages sit on the right under
  * "You", staff appear under a masked "Qorus Support" label, and internal notes
@@ -170,7 +194,7 @@ export const CustomerView: Story = {
     docs: {
       description: {
         story:
-          "Renders the thread from the customer's viewpoint: the customer's own messages sit on the right under 'You', staff appear under the masked 'Qorus Support' label, internal notes are filtered out, and clicking an attachment chip calls onDownloadAttachment with its id and filename.",
+          "Renders the thread from the customer's viewpoint: the customer's own messages sit on the right under 'You', staff appear under the masked 'Qorus Support' label, both as neutral cards (the side and the label say who spoke), internal notes are filtered out, and clicking an attachment chip calls onDownloadAttachment with its id and filename.",
       },
     },
   },
@@ -186,6 +210,8 @@ export const CustomerView: Story = {
     await expect(canvas.getByText('Qorus Support')).toBeInTheDocument();
     // internal notes are filtered out for the customer
     await expect(canvas.queryByText('Internal note')).not.toBeInTheDocument();
+    // the side, the avatar and the label say who spoke; no card is tinted for it
+    await expectNeutralCards(['m1', 'm2']);
 
     await userEvent.click(canvas.getAllByText('deploy-trace.log')[0]);
     await waitFor(() =>
@@ -306,7 +332,7 @@ export const StaffView: Story = {
     docs: {
       description: {
         story:
-          "Renders the thread from the staff viewpoint: staff messages sit on the right, the customer on the left, and staff-only internal notes render amber and bordered under an 'Internal note' label.",
+          "Renders the thread from the staff viewpoint: staff messages sit on the right, the customer on the left, both as neutral cards, and staff-only internal notes render amber and bordered under an 'Internal note' label.",
       },
     },
   },
@@ -320,6 +346,9 @@ export const StaffView: Story = {
     await expect(canvas.getByText('Internal note')).toBeInTheDocument();
     await expect(canvas.getByText(/Support · nick/)).toBeInTheDocument();
     await expect(canvas.getByText(/Customer · acme/)).toBeInTheDocument();
+    // both sides are neutral cards; the internal note alone is amber
+    await expectNeutralCards(['m1', 'm2']);
+    await expect(cardSaturation('m3')).toBeGreaterThan(0.3);
     // the reference chip renders with the built-in default icon (no resolver passed)
     await expect(canvas.getByText('nightly-deploy:1.2')).toBeInTheDocument();
   },

package/src/components/ticketThread/TicketThread.tsx

@@ -13,7 +13,7 @@ import {
 import { getReadableColor } from '@qoretechnologies/reqore/dist/helpers/colors';
 import { IReqoreIconName } from '@qoretechnologies/reqore/dist/types/icons';
 import { rgba } from 'polished';
-import { ComponentProps, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import styled from 'styled-components';
 import { formatBytes, isImage } from '../../helpers/common';
@@ -32,12 +32,11 @@ import {
  * the Qonsole `support-ticket` renderer. Presentational — data in, callbacks out
  * — so each consumer keeps its own fetch/websocket wiring.
  *
- * Rendered as a comment feed: an avatar beside a bordered, accent-tinted card per
+ * Rendered as a comment feed: an avatar beside a bordered, neutral card per
  * message, each hugging its own side. Built on Reqore's `ReqoreBubble` (which
- * supplies the avatar, the bold author label, the alignment and the tint), so the
- * accent follows whatever the host app themes `custom1` to rather than a colour
- * baked in here. Interface references render via the shared
- * `InterfaceReferenceTags`; the status/priority/category vocabularies live in
+ * supplies the avatar, the bold author label and the alignment). Interface
+ * references render via the shared `InterfaceReferenceTags`, as quiet tags with
+ * the kind's icon; the status/priority/category vocabularies live in
  * `../supportTicket/meta`.
  *
  * Runs of consecutive messages are wrapped in a `ReqoreBubbleGroup`, which prints
@@ -114,10 +113,11 @@ const AUTHOR_META: Record<TTicketMessageAuthor, IAuthorMeta> = {
   system: { icon: 'InformationLine' },
 };
 
-// Both sides share one accent: the side, the avatar and the author label already
-// carry who is speaking, which frees colour to mean "internal note" and nothing
-// else. `custom1` is a theme slot, so each host app supplies its own hue.
-const ACCENT: ComponentProps<typeof ReqoreBubble>['customTheme'] = { main: 'custom1' };
+// No side is tinted: the side, the avatar and the author label ("You", "Qorus
+// Support") already carry who is speaking, which leaves colour one job here —
+// amber for an internal note. Never the product's purple, which a support thread
+// does not wear (instruction-files decision 002: purple marks where you are, a
+// chart's accent, and Qonsole).
 
 /** Avatar glyph; an internal note carries the "not visible to the customer" eye. */
 const authorIcon = (message: ITicketThreadMessage): IReqoreIconName =>
@@ -666,23 +666,9 @@ export const TicketThread = ({
                 avatar={{ icon: authorIcon(message) }}
                 label={authorLabel(message, viewerRole)}
                 timestamp={message.created ? <ReqoreTimeAgo time={message.created} /> : undefined}
-                // Own messages read as info-blue, the other party's as the purple
-                // accent — so the two sides of the conversation are told apart by
-                // colour as well as by side, and "which of these did I write?" is
-                // answerable at a glance. Deliberately keyed off `viewerRole`, so it
-                // stays correct on the staff surface too (staff replies are the blue
-                // ones there). Internal notes keep their warning intent and are not
-                // re-tinted — they are neither side of the conversation.
-                intent={
-                  message.internal
-                    ? 'warning'
-                    : message.author_type === viewerRole
-                      ? 'info'
-                      : undefined
-                }
-                customTheme={
-                  message.internal || message.author_type === viewerRole ? undefined : ACCENT
-                }
+                // Both sides are neutral cards; an internal note is amber, so it can
+                // never be mistaken for a reply the customer sees.
+                intent={message.internal ? 'warning' : undefined}
                 flat={false}
                 minimal
               >
@@ -698,7 +684,6 @@ export const TicketThread = ({
                   <div style={{ marginTop: 8 }}>
                     <InterfaceReferenceTags
                       size='tiny'
-                      customTheme={ACCENT}
                       references={refsFor(message)}
                       resolveInterfaceIcon={resolveInterfaceIcon}
                       preferKindImage={preferKindImage}