@qoretechnologies/reqraft 0.10.64 → 0.10.65-pr.148.gc6381e4

package/src/components/supportTicket/meta.ts

@@ -13,7 +13,39 @@ import { IReqoreIconName } from '@qoretechnologies/reqore/dist/types/icons';
 export type TTicketStatus = 'new' | 'open' | 'awaiting_customer' | 'resolved' | 'closed';
 export type TTicketPriority = 'low' | 'normal' | 'high' | 'urgent';
 export type TTicketCategory = 'bug' | 'question' | 'billing' | 'feature' | 'other';
-export type TTicketAuditAction = 'replied' | 'noted' | 'status_changed' | 'assigned' | 'updated';
+export type TTicketAuditAction =
+  | 'replied'
+  | 'noted'
+  | 'status_changed'
+  | 'assigned'
+  | 'updated'
+  // staff reads (qorus#693 Layer 0): a ticket, its thread or its attachment list was opened,
+  // or a file was downloaded — coalesced server-side per staff member and window
+  | 'viewed'
+  | 'attachment_downloaded'
+  // delegated workspace access (qorus#693 Layers 1–3): the customer's grant lifecycle, a
+  // staff read of the workspace under it, and a read-only IDE session launched from it
+  | 'workspace_viewed'
+  | 'access_requested'
+  | 'access_granted'
+  | 'access_extended'
+  | 'access_revoked'
+  | 'access_expired'
+  | 'session_launched';
+
+/**
+ * The `system_event` a system message in a ticket thread may carry (qorus#693): the
+ * delegated-access lifecycle, written by the control plane as a thread message so the
+ * customer and the staff member see the same record in the conversation. A thread
+ * renders a known event with its own mark; an unknown one falls back to a plain line.
+ */
+export type TTicketSystemEvent =
+  | 'support_access.requested'
+  | 'support_access.granted'
+  | 'support_access.extended'
+  | 'support_access.first_used'
+  | 'support_access.revoked'
+  | 'support_access.expired';
 
 /** A message author. Staff identities are masked from the customer by the backend. */
 export type TTicketMessageAuthor = 'customer' | 'staff' | 'system';
@@ -68,8 +100,72 @@ export const TICKET_AUDIT_ACTION_META: Record<TTicketAuditAction, ITicketEnumMet
   status_changed: { label: 'Status changed', intent: 'warning', icon: 'ExchangeLine' },
   assigned: { label: 'Assigned', intent: 'pending', icon: 'UserFollowLine' },
   updated: { label: 'Updated', intent: 'muted', icon: 'Edit2Line' },
+  viewed: { label: 'Viewed', intent: 'muted', icon: 'EyeLine' },
+  attachment_downloaded: { label: 'Attachment downloaded', intent: 'muted', icon: 'Download2Line' },
+  workspace_viewed: { label: 'Workspace viewed', intent: 'info', icon: 'Search2Line' },
+  access_requested: { label: 'Access requested', intent: 'pending', icon: 'ShieldUserLine' },
+  access_granted: { label: 'Access granted', intent: 'success', icon: 'ShieldCheckLine' },
+  access_extended: { label: 'Access extended', intent: 'info', icon: 'TimerLine' },
+  access_revoked: { label: 'Access revoked', intent: 'danger', icon: 'ShieldCrossLine' },
+  access_expired: { label: 'Access expired', intent: 'muted', icon: 'HourglassLine' },
+  session_launched: { label: 'IDE session launched', intent: 'info', icon: 'ExternalLinkLine' },
+};
+
+/** The mark for an audit action the server writes but this vocabulary has not caught up
+ *  with: a muted, generic row that still names the action. It exists because the staff
+ *  audit tab used to index `TICKET_AUDIT_ACTION_META` directly, and one unknown action
+ *  took the whole tab down (qorus#693). */
+export const UNKNOWN_TICKET_AUDIT_ACTION_META: ITicketEnumMeta = {
+  label: 'Activity',
+  intent: 'muted',
+  icon: 'HistoryLine',
+};
+
+/** A wire value humanised for reading: `attachment_downloaded` → "Attachment downloaded". */
+export const humaniseWireValue = (value: string): string => {
+  const words = value.replace(/[._-]+/g, ' ').trim();
+  return words ? words.charAt(0).toUpperCase() + words.slice(1) : value;
 };
 
+/**
+ * The mark for an audit action, whatever the server sent. A known action gets its
+ * entry; an unknown one gets the muted generic entry with the action's own wire value
+ * humanised as the label, so a new server action renders as a readable row instead
+ * of failing the surface that lists it.
+ */
+export const ticketAuditActionMeta = (action: string): ITicketEnumMeta =>
+  (TICKET_AUDIT_ACTION_META as Record<string, ITicketEnumMeta>)[action] ?? {
+    ...UNKNOWN_TICKET_AUDIT_ACTION_META,
+    label: humaniseWireValue(action),
+  };
+
+/** How each delegated-access thread event renders: the mark on its system line or card. */
+export const TICKET_SYSTEM_EVENT_META: Record<TTicketSystemEvent, ITicketEnumMeta> = {
+  'support_access.requested': {
+    label: 'Workspace access requested',
+    intent: 'info',
+    icon: 'ShieldUserLine',
+  },
+  'support_access.granted': { label: 'Workspace access granted', intent: 'success', icon: 'ShieldCheckLine' },
+  'support_access.extended': { label: 'Workspace access extended', intent: 'info', icon: 'TimerLine' },
+  'support_access.first_used': { label: 'Workspace opened by support', intent: 'info', icon: 'EyeLine' },
+  'support_access.revoked': { label: 'Workspace access revoked', intent: 'danger', icon: 'ShieldCrossLine' },
+  'support_access.expired': { label: 'Workspace access expired', intent: 'muted', icon: 'HourglassLine' },
+};
+
+/** The generic mark for a system message with no event, or an event this vocabulary
+ *  does not know: the plain informational line every system message used to be. */
+export const DEFAULT_TICKET_SYSTEM_EVENT_META: ITicketEnumMeta = {
+  label: 'System',
+  intent: 'muted',
+  icon: 'InformationLine',
+};
+
+/** The mark for a system message's `system_event`, with the generic fallback. */
+export const ticketSystemEventMeta = (event?: string): ITicketEnumMeta =>
+  (event && (TICKET_SYSTEM_EVENT_META as Record<string, ITicketEnumMeta>)[event]) ||
+  DEFAULT_TICKET_SYSTEM_EVENT_META;
+
 /** The status label for a given viewer — the customer sees "Awaiting your reply"
  *  where staff see "Awaiting customer"; all other values are audience-neutral. */
 export const ticketStatusLabel = (
@@ -104,12 +200,28 @@ export interface IAttachmentUpload {
  *  `{kind, name}` snapshot (the interface itself lives on the instance, not the
  *  SaaS plane). Attaches to a ticket (at creation) or a message (in a reply). */
 export interface IInterfaceReference {
-  /** interface type: workflow / service / job / fsm / qog / connection / ... */
+  /**
+   * The interface's kind. On READ this is the normalized Qorus `TypeMap` key the server
+   * stores (`fsm`, never `qog`; `step`, never `workflow-step`), so two surfaces compare
+   * equal; a writer may still send the spelling it has, and the server normalizes it.
+   * Compare kinds through `normalizeInterfaceKind()` rather than by string.
+   */
   interface_kind: string;
   /** interface name (may include a version) */
   interface_name: string;
   /** server-assigned reference UUID (present on read, absent when submitting) */
   reference_id?: string;
+  /**
+   * The interface's id on the subscriber's instance at the time it was referenced, when
+   * the writer knew it (the IDE's picker does). A viewer that can reach the instance
+   * prefers it over the name, which may have been renamed or versioned since.
+   */
+  interface_id?: number;
+  /** The group the interface lived in when referenced — set by the server on read. */
+  groupid?: number;
+  /** That group's portable namespace — set by the server on read; absent for the host's
+   *  DEFAULT group. What a support reader needs to find the interface after a move. */
+  group_namespace?: number;
   /** For an app-triggered interface (a qog): the triggering app's name. A viewer
    *  with the app catalogue (the customer's IDE) resolves it to the app's logo the
    *  same way the qogs list does — see `resolveInterfaceImage` on the tags. */
@@ -120,6 +232,47 @@ export interface IInterfaceReference {
   logo?: string;
 }
 
+// Kind spellings a writer may still send, and the normalized `TypeMap` key the server
+// stores for each. The IDE's menus and older references say `qog`; the engine's type
+// is `fsm`. A `workflow-step` is a `step`.
+const INTERFACE_KIND_ALIASES: Record<string, string> = {
+  qog: 'fsm',
+  'workflow-step': 'step',
+};
+
+/**
+ * The normalized `TypeMap` key for a kind, however a writer spelled it: `qog` → `fsm`,
+ * `workflow-step` → `step`; anything else is returned trimmed and lower-cased. Every
+ * comparison of two references' kinds goes through this, so a reference written as a
+ * `qog` and one read back as an `fsm` are the same interface.
+ */
+export const normalizeInterfaceKind = (kind: string): string => {
+  const key = kind.trim().toLowerCase();
+  return INTERFACE_KIND_ALIASES[key] ?? key;
+};
+
+/**
+ * A reference's identity for keys and dedupe: its normalized kind and its name. Not the
+ * `reference_id` (absent when submitting) and not the `interface_id` (absent on older
+ * references), so the same interface cited twice is one key whatever each copy carries.
+ */
+export const interfaceReferenceKey = (reference: IInterfaceReference): string =>
+  `${normalizeInterfaceKind(reference.interface_kind)}:${reference.interface_name}`;
+
+/** The references with duplicates dropped — first occurrence wins, order kept —
+ *  where two references are the same interface by `interfaceReferenceKey()`. */
+export const dedupeInterfaceReferences = <T extends IInterfaceReference>(references: T[]): T[] => {
+  const seen = new Set<string>();
+  return references.filter((reference) => {
+    const key = interfaceReferenceKey(reference);
+    if (seen.has(key)) {
+      return false;
+    }
+    seen.add(key);
+    return true;
+  });
+};
+
 // Built-in per-kind icons for referenced interfaces, kept in step with the
 // qorus-ide interface vocabulary. Used when a consumer doesn't pass its own
 // `resolveInterfaceIcon`, so the staff view and the Qonsole renderer show the
@@ -199,8 +352,7 @@ export const defaultInterfaceKindLabel = (kind: string): string => {
     return known;
   }
 
-  const words = kind.replace(/[-_]+/g, ' ').trim();
-  const sentenceCase = words.charAt(0).toUpperCase() + words.slice(1);
+  const sentenceCase = humaniseWireValue(kind);
 
   return sentenceCase.endsWith('s') ? sentenceCase : `${sentenceCase}s`;
 };

package/src/components/supportTicket/ticketModel.ts

@@ -61,6 +61,16 @@ export interface ITicketMessage {
   attachments?: ITicketAttachment[];
   /** interfaces referenced in this message, as `{kind, name}` snapshots */
   referenced_interfaces?: IInterfaceReference[];
+  /**
+   * For a `system` message: the event it records (qorus#693), e.g.
+   * `support_access.requested`. A thread renders a known event with its own mark, and the
+   * `support_access.requested` event as a card that can carry the customer's Grant action;
+   * absent on the plain system lines (status changes, assignments).
+   */
+  system_event?: string;
+  /** For a `system` message: the event's structured payload (a grant id, an expiry, the
+   *  requesting staff member's reason), as the server wrote it. */
+  system_detail?: Record<string, unknown>;
 }
 
 /**

package/src/components/ticketReferences/TicketReferences.stories.tsx

@@ -313,3 +313,43 @@ export const ShowInChat: Story = {
     await expect(args.onShowInChat).toHaveBeenCalledTimes(1);
   },
 };
+
+/**
+ * A viewer that can open some references but not others: a refused row offers no Open
+ * action and says why in its metadata line, next to the kind — in the row, so it reads on
+ * a touch screen, where a tooltip never shows.
+ */
+export const MixedLinkability: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the linked-interface rows with two refusals: those rows have no Open action and carry the reason in their metadata line after the kind, visible without hover (qorus#693).',
+      },
+    },
+  },
+  args: {
+    attachments: [],
+    onInterfaceClick: fn(),
+    isInterfaceLinkable: (reference: IInterfaceReference) => reference.interface_kind !== 'workflow',
+    unlinkableReason: (reference: IInterfaceReference) =>
+      reference.interface_kind === 'workflow' ? 'moved to another group' : undefined,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('Linked interfaces')).toBeInTheDocument();
+    // the reason is in the row's text, not only a tooltip
+    await expect(canvas.getAllByText('workflow · moved to another group')).toHaveLength(2);
+    // the refused rows have no Open action; the three others do
+    await waitFor(() =>
+      expect(canvasElement.querySelectorAll('.reqore-entity-row-actions button')).toHaveLength(3)
+    );
+    await userEvent.click(canvasElement.querySelectorAll('.reqore-entity-row-actions button')[0]);
+    await waitFor(() =>
+      expect(args.onInterfaceClick).toHaveBeenCalledWith(
+        expect.objectContaining({ interface_kind: 'connection' })
+      )
+    );
+  },
+};
+

package/src/components/ticketReferences/TicketReferences.tsx

@@ -23,6 +23,7 @@ import { ImageLightbox } from '../imageLightbox';
 import {
   defaultInterfaceIcon,
   IInterfaceReference,
+  interfaceReferenceKey,
   toInterfaceKindMark,
   TResolveInterfaceIcon,
   TTicketViewerRole,
@@ -73,6 +74,15 @@ export interface ITicketReferencesProps {
   onDownloadAttachment?: (attachmentId: string, filename: string) => void;
   /** open a referenced interface; reference chips are static (informational) when omitted */
   onInterfaceClick?: (reference: IInterfaceReference) => void;
+  /**
+   * Whether a reference can be opened right now; consulted only when `onInterfaceClick`
+   * is given. A refused row offers no Open action and carries `unlinkableReason` in its
+   * metadata line — in the row itself, so it reads on a touch screen too, where a
+   * tooltip would never show. See `InterfaceReferenceTags` for the cases.
+   */
+  isInterfaceLinkable?: (reference: IInterfaceReference) => boolean;
+  /** Why a reference is not linkable, shown in the row's metadata after its kind. */
+  unlinkableReason?: (reference: IInterfaceReference) => string | undefined;
   /** Reveal the message a reference or file came from, in the conversation.
    *  Omitted ⇒ the action is not offered. It is also omitted per-row for anything filed
    *  against the ticket itself rather than a reply, which has no message to reveal. */
@@ -197,7 +207,9 @@ export interface IResolvedInterfaceReference extends IInterfaceReference {
 const dedupeRefs = (refs: IResolvedInterfaceReference[]): IResolvedInterfaceReference[] => {
   const byKey = new Map<string, IResolvedInterfaceReference>();
   for (const r of refs) {
-    const key = `${r.interface_kind}:${r.interface_name}`;
+    // identity by normalized kind + name, so a `qog` cited in a reply and the `fsm` the
+    // server stored on the ticket are one row
+    const key = interfaceReferenceKey(r);
     const kept = byKey.get(key);
     if (!kept) {
       byKey.set(key, r);
@@ -421,6 +433,8 @@ export const TicketReferences = ({
   fetchAttachmentUrl,
   onDownloadAttachment,
   onInterfaceClick,
+  isInterfaceLinkable,
+  unlinkableReason,
   onShowInChat,
   resolveInterfaceIcon,
   preferKindImage = false,
@@ -791,28 +805,28 @@ export const TicketReferences = ({
               // the same vocabulary and precedence as the reference chips: the kind's
               // font icon, and the chosen image once it has loaded
               const { icon, image } = markOf(reference);
+              // a row the consumer refuses offers no Open, and says why in its metadata
+              // line rather than in a tooltip, so the reason reads on touch as well
+              const linkable = !!onInterfaceClick && (isInterfaceLinkable?.(reference) ?? true);
+              const reason =
+                onInterfaceClick && !linkable ? unlinkableReason?.(reference) : undefined;
               return (
                 <ReqoreEntityRow
-                  key={
-                    reference.reference_id ??
-                    `${reference.interface_kind}:${reference.interface_name}`
-                  }
+                  key={reference.reference_id ?? interfaceReferenceKey(reference)}
                   icon={icon}
                   iconImage={isImageLoaded(image) ? image : undefined}
                   label={reference.interface_name}
                   metadata={
                     <ReqoreTextEffect effect={META_EFFECT}>
-                      {reference.interface_kind}
+                      {reason ? `${reference.interface_kind} · ${reason}` : reference.interface_kind}
                     </ReqoreTextEffect>
                   }
                   flat
                   tooltip={
-                    onInterfaceClick ?
-                      `Open ${reference.interface_kind} ${reference.interface_name}`
-                    : undefined
+                    linkable ? `Open ${reference.interface_kind} ${reference.interface_name}` : undefined
                   }
                   actions={rowActions(
-                    onInterfaceClick ?
+                    linkable ?
                       {
                         icon: 'ArrowRightUpLine',
                         tooltip: 'Open',

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

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { thinScrollbar } from '../../helpers/scrollbar';
 import { StoryMeta } from '../../types';
 import type { IInterfaceReference, TTicketMessageAuthor } from '../supportTicket/meta';
-import { ITicketThreadMessage, TicketThread } from './TicketThread';
+import { ITicketSystemEventAction, ITicketThreadMessage, TicketThread } from './TicketThread';
 
 /* The drawer body's scroll area — the thin Qorus scrollbar rather than the platform
  * default, matching what the app's ThreadScroll should carry. */
@@ -827,3 +827,105 @@ export const Everything: Story = {
     await expect(canvas.getByText('pgsql-omq')).toBeInTheDocument();
   },
 };
+
+// The delegated-access lifecycle as the control plane writes it into the thread
+// (qorus#693): a request from support, then the customer's answer and what followed.
+const SUPPORT_ACCESS_THREAD: ITicketThreadMessage[] = [
+  { message_id: 'o1', author_type: 'customer', author_id: 'acme', body: 'The nightly reconcile has been failing since Tuesday.', created: ago(400) },
+  {
+    message_id: 'sa1',
+    author_type: 'system',
+    author_id: 'system',
+    system_event: 'support_access.requested',
+    system_detail: { reason: 'To read the nightly-reconcile job and its last three runs.', suggested_hours: 24 },
+    body: 'Qorus Support asks to read this workspace for **24 hours** to look at `nightly-reconcile` and its last three runs. Nothing is changed; every read is recorded here.',
+    created: ago(300),
+  },
+  { message_id: 'sa2', author_type: 'system', author_id: 'system', system_event: 'support_access.granted', body: 'Workspace access granted until **tomorrow 14:00**.', created: ago(280) },
+  { message_id: 'sa3', author_type: 'system', author_id: 'system', system_event: 'support_access.first_used', body: 'Qorus Support opened the workspace.', created: ago(200) },
+  { message_id: 'st1', author_type: 'staff', author_id: 'nick', body: 'Found it: the job runs with the pool default from 3.2. Fix coming in 3.2.1.', created: ago(150) },
+  { message_id: 'sa4', author_type: 'system', author_id: 'system', system_event: 'support_access.extended', body: 'Workspace access extended until **Friday 14:00**.', created: ago(100) },
+  { message_id: 'sa5', author_type: 'system', author_id: 'system', system_event: 'support_access.revoked', body: 'Workspace access revoked by you.', created: ago(40) },
+  { message_id: 'sa6', author_type: 'system', author_id: 'system', system_event: 'support_access.expired', body: 'Workspace access expired.', created: ago(5) },
+];
+
+/**
+ * A support request for workspace access is the one system message that asks the reader
+ * something, so it renders as a card rather than a line — and the customer's surface can
+ * put its answer on it through `systemEventAction`. Every other access event is a line
+ * marked with its own icon.
+ */
+export const SupportAccessRequestCard: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the delegated-access events in a customer thread in the notification look: the support request as a card (frosted surface, icon tile, the Grant action supplied by the consumer under the text), and the granted, opened, extended, revoked and expired events as compact pills centred in the thread (qorus#693).',
+      },
+    },
+  },
+  args: {
+    viewerRole: 'customer',
+    messages: SUPPORT_ACCESS_THREAD,
+    systemEventAction: fn(
+      (message: ITicketThreadMessage): ITicketSystemEventAction | undefined =>
+        message.system_event === 'support_access.requested'
+          ? { label: 'Grant access', icon: 'ShieldCheckLine', onClick: fn() }
+          : undefined
+    ),
+  },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('Workspace access requested')).toBeInTheDocument();
+    await expect(canvasElement.querySelector('.reqore-ticket-system-card')).not.toBeNull();
+    const grant = canvas.getByText('Grant access');
+    await expect(grant).toBeInTheDocument();
+    await expect(canvas.getByText(/Workspace access granted until/)).toBeInTheDocument();
+    await expect(canvas.getByText(/Workspace access expired/)).toBeInTheDocument();
+  },
+};
+
+/** The staff side of the same thread: the request card renders with no action, because
+ *  the answer is the customer's, and the lines read the same. */
+export const SupportAccessRequestCardStaffView: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the same delegated-access thread for staff: the request card carries no action (only the customer can answer), the lines are unchanged, and the staff reply sits on the right.',
+      },
+    },
+  },
+  args: {
+    viewerRole: 'staff',
+    messages: SUPPORT_ACCESS_THREAD,
+  },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('Workspace access requested')).toBeInTheDocument();
+    await expect(canvas.queryByText('Grant access')).toBeNull();
+    await expect(canvasElement.querySelectorAll('.reqore-ticket-system-card-action')).toHaveLength(0);
+  },
+};
+
+/** The request card at phone width: the card and its action stay inside the screen. */
+export const SupportAccessRequestCardMobile: Story = {
+  parameters: {
+    qlip: { viewport: { width: 390, height: 844 } },
+    docs: {
+      description: {
+        story:
+          'Renders the delegated-access thread at 390px: the request card and its Grant action fit the screen, and the event lines wrap rather than overflow.',
+      },
+    },
+  },
+  args: SupportAccessRequestCard.args,
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('Grant access')).toBeInTheDocument();
+    const card = canvasElement.querySelector('.reqore-ticket-system-card') as HTMLElement;
+    await expect(card).not.toBeNull();
+    await waitFor(() => expect(card.getBoundingClientRect().right).toBeLessThanOrEqual(window.innerWidth));
+  },
+};
+

package/src/components/ticketThread/TicketThread.tsx

@@ -5,11 +5,13 @@ import {
   ReqoreControlGroup,
   ReqoreEmptyState,
   ReqoreIcon,
+  ReqoreNotification,
   ReqoreP,
   ReqoreSkeleton,
   ReqoreTimeAgo,
   useReqoreTheme,
 } from '@qoretechnologies/reqore';
+import { TReqoreIntent } from '@qoretechnologies/reqore/dist/constants/theme';
 import { getReadableColor } from '@qoretechnologies/reqore/dist/helpers/colors';
 import { IReqoreIconName } from '@qoretechnologies/reqore/dist/types/icons';
 import { rgba } from 'polished';
@@ -19,8 +21,11 @@ import styled from 'styled-components';
 import { formatBytes, isImage } from '../../helpers/common';
 import { ImageLightbox } from '../imageLightbox';
 import {
+  dedupeInterfaceReferences,
   IInterfaceReference,
   InterfaceReferenceTags,
+  TICKET_SYSTEM_EVENT_META,
+  ticketSystemEventMeta,
   TResolveInterfaceIcon,
   TTicketMessageAuthor,
   TTicketViewerRole,
@@ -69,6 +74,23 @@ export interface ITicketThreadMessage {
   attachments?: ITicketThreadAttachment[];
   /** Qorus interfaces this message references, as `{kind, name}` snapshots. */
   referenced_interfaces?: IInterfaceReference[];
+  /** For a `system` message: the event it records (`support_access.requested`, …); see
+   *  `ITicketMessage.system_event`. Decides the line's mark, and the card variant. */
+  system_event?: string;
+  /** For a `system` message: the event's structured payload, as the server wrote it. */
+  system_detail?: Record<string, unknown>;
+}
+
+/**
+ * An action a consumer attaches to a system event's card — the customer's Grant on a
+ * `support_access.requested` card. The thread renders it as the card's action; what it
+ * does (open the grant drawer, call the API) is the consumer's.
+ */
+export interface ITicketSystemEventAction {
+  label: string;
+  icon?: IReqoreIconName;
+  intent?: TReqoreIntent;
+  onClick: () => void;
 }
 
 export interface ITicketThreadProps {
@@ -97,6 +119,17 @@ export interface ITicketThreadProps {
   /** open a referenced interface; reference chips are static when omitted (e.g. the staff
    *  view, which can't reach the customer's instance, leaves this out). */
   onInterfaceClick?: (reference: IInterfaceReference) => void;
+  /** Whether a reference chip can be opened right now, and why not; passed through to
+   *  every message's `InterfaceReferenceTags` — see the cases there. */
+  isInterfaceLinkable?: (reference: IInterfaceReference) => boolean;
+  unlinkableReason?: (reference: IInterfaceReference) => string | undefined;
+  /**
+   * The action to offer on a system event's card, if any — asked per system message, so a
+   * consumer answers for the events and states it handles (the IDE offers Grant on a
+   * `support_access.requested` card while the request is open; the staff portal offers
+   * nothing). Omitted ⇒ cards carry no action.
+   */
+  systemEventAction?: (message: ITicketThreadMessage) => ITicketSystemEventAction | undefined;
   /** The TICKET's own references (picked when filing). Echoed as chips on the opening
    *  message so the conversation carries them too — when they lived only in the header
    *  rail + References tab, readers looked for them in the thread and concluded the
@@ -530,6 +563,94 @@ const AttachmentList = ({
   );
 };
 
+/** The anchor a "show in chat" scroll lands on; the notification itself takes no id. */
+const StyledSystemCard = styled.div`
+  width: 100%;
+`;
+
+/** A one-line access event sits centred in the thread, as the plain system lines do. */
+const StyledSystemPill = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+`;
+
+/**
+ * A system message. The request for workspace access renders as a card — it asks the
+ * reader something, and can carry the customer's answer — while every other event stays
+ * the centred muted line, marked with its event's icon when the event is known.
+ *
+ * The card wears the notification look (Nick, 2026-10-20): the same frosted surface,
+ * icon tile and action row as a toast, because a thread message that asks the reader to
+ * act is a notification that happens to live in the thread. It never times out and
+ * cannot be dismissed; the answer is the one action on it.
+ */
+const SystemMessage = ({
+  message,
+  action,
+}: {
+  message: ITicketThreadMessage;
+  action?: ITicketSystemEventAction;
+}) => {
+  const meta = ticketSystemEventMeta(message.system_event);
+  if (message.system_event === 'support_access.requested') {
+    return (
+      <StyledSystemCard id={ticketMessageDomId(message.message_id)} className='reqore-ticket-system-card'>
+        <ReqoreNotification
+          fluid
+          // in the page, not over it: no drop shadow, no cast light (reqore 0.78.8)
+          lift={false}
+          icon={meta.icon}
+          intent={meta.intent}
+          title={meta.label}
+          content={<MessageBody>{message.body}</MessageBody>}
+          actions={
+            action
+              ? [
+                  {
+                    label: action.label,
+                    icon: action.icon,
+                    intent: action.intent ?? 'success',
+                    className: 'reqore-ticket-system-card-action',
+                    // a notification's actions are plain buttons that keep their label at
+                    // every width (a phone is where the customer reads this); only a panel
+                    // action folds to an icon, so nothing has to be asked for here
+                    // the card stays: the thread, not a click, decides when it goes
+                    closeOnClick: false,
+                    onClick: action.onClick,
+                  },
+                ]
+              : undefined
+          }
+        />
+      </StyledSystemCard>
+    );
+  }
+  // A delegated-access event the vocabulary knows is a compact pill in the same look as
+  // the request card, so the grant's story reads as one family: asked, granted, opened,
+  // extended, revoked, expired. Any other system line stays the plain centred line.
+  if (message.system_event && message.system_event in TICKET_SYSTEM_EVENT_META) {
+    return (
+      <StyledSystemPill id={ticketMessageDomId(message.message_id)} className='reqore-ticket-system-pill'>
+        <ReqoreNotification
+          compact
+          lift={false}
+          size='small'
+          icon={meta.icon}
+          intent={meta.intent}
+          content={<ReactMarkdown components={{ p: 'span' }}>{message.body}</ReactMarkdown>}
+        />
+      </StyledSystemPill>
+    );
+  }
+  return (
+    <StyledSystemRow id={ticketMessageDomId(message.message_id)}>
+      <ReqoreIcon icon={meta.icon} size='tiny' />
+      <ReactMarkdown>{message.body}</ReactMarkdown>
+    </StyledSystemRow>
+  );
+};
+
 type TThreadSegment =
   | { kind: 'system'; message: ITicketThreadMessage }
   | { kind: 'bubbles'; messages: ITicketThreadMessage[] };
@@ -565,6 +686,9 @@ export const TicketThread = ({
   resolveInterfaceIcon,
   preferKindImage,
   onInterfaceClick,
+  isInterfaceLinkable,
+  unlinkableReason,
+  systemEventAction,
   ticketReferences,
 }: ITicketThreadProps) => {
   // Open scrolled to the newest message, and follow new arrivals down — a thread is read
@@ -608,15 +732,7 @@ export const TicketThread = ({
       return undefined;
     }
     const opening = messages.find((m) => m.message_id === openingMessageId);
-    const seen = new Set<string>();
-    return [...ticketReferences, ...(opening?.referenced_interfaces ?? [])].filter((ref) => {
-      const key = `${ref.interface_kind}:${ref.interface_name}`;
-      if (seen.has(key)) {
-        return false;
-      }
-      seen.add(key);
-      return true;
-    });
+    return dedupeInterfaceReferences([...ticketReferences, ...(opening?.referenced_interfaces ?? [])]);
   }, [ticketReferences, messages, openingMessageId]);
 
   const refsFor = (message: ITicketThreadMessage): IInterfaceReference[] | undefined =>
@@ -645,13 +761,11 @@ export const TicketThread = ({
     <StyledThread ref={threadRef}>
       {segments.map((segment, index) =>
         segment.kind === 'system' ? (
-          <StyledSystemRow
+          <SystemMessage
             key={segment.message.message_id}
-            id={ticketMessageDomId(segment.message.message_id)}
-          >
-            <ReqoreIcon icon='InformationLine' size='tiny' />
-            <ReactMarkdown>{segment.message.body}</ReactMarkdown>
-          </StyledSystemRow>
+            message={segment.message}
+            action={systemEventAction?.(segment.message)}
+          />
         ) : (
           <ReqoreBubbleGroup key={`group-${index}`}>
             {segment.messages.map((message) => (
@@ -703,6 +817,8 @@ export const TicketThread = ({
                       resolveInterfaceIcon={resolveInterfaceIcon}
                       preferKindImage={preferKindImage}
                       onInterfaceClick={onInterfaceClick}
+                      isInterfaceLinkable={isInterfaceLinkable}
+                      unlinkableReason={unlinkableReason}
                     />
                   </div>
                 ) : null}