From 2a0078a0df19321eee48e2c20d64ef5c37890ea7 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 19:49:12 +0200
Subject: [PATCH 01/29] Add conversation diagnostics panel

---
 .../ConversationDiagnosticsModal.css          |  86 +++
 .../ConversationDiagnosticsModal.tsx          | 138 +++++
 .../ConversationDiagnosticsModal/index.ts     |   1 +
 .../ConversationEditor/ConversationEditor.tsx |  16 +-
 .../conversation-diagnostics-utils.test.ts    | 179 ++++++
 .../utils/conversation-diagnostics-utils.ts   | 524 ++++++++++++++++++
 6 files changed, 942 insertions(+), 2 deletions(-)
 create mode 100644 app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
 create mode 100644 app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
 create mode 100644 app/src/components/ConversationDiagnosticsModal/index.ts
 create mode 100644 app/src/utils/__tests__/conversation-diagnostics-utils.test.ts
 create mode 100644 app/src/utils/conversation-diagnostics-utils.ts

diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
new file mode 100644
index 0000000..6e95492
--- /dev/null
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
@@ -0,0 +1,86 @@
+@import '../../css/constants.css';
+
+.conversation-diagnostics {
+  display: flex;
+  flex-direction: column;
+  gap: $mediumSpace;
+  min-height: 24rem;
+  max-height: min(70vh, 48rem);
+}
+
+.conversation-diagnostics__summary {
+  display: flex;
+  flex-direction: column;
+  gap: $mediumSpace;
+}
+
+.conversation-diagnostics__summary .ant-alert {
+  border-radius: $tinySpace;
+}
+
+.conversation-diagnostics__list {
+  display: flex;
+  flex-direction: column;
+  gap: $smallSpace;
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: $tinySpace;
+}
+
+.conversation-diagnostics__item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: $mediumSpace;
+  padding: $mediumSpace;
+  border: 1px solid $borderTertiary;
+  border-left-width: 4px;
+  border-radius: $tinySpace;
+  background: $backgroundSecondary;
+}
+
+.conversation-diagnostics__item--error {
+  border-left-color: #ff4d4f;
+}
+
+.conversation-diagnostics__item--warning {
+  border-left-color: #faad14;
+}
+
+.conversation-diagnostics__item-main {
+  min-width: 0;
+}
+
+.conversation-diagnostics__item-title {
+  display: flex;
+  align-items: center;
+  gap: $tinySpace;
+  min-width: 0;
+  color: $textColourPrimary;
+  font-weight: 600;
+}
+
+.conversation-diagnostics__item-title > span:last-child {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.conversation-diagnostics__item-node {
+  margin-top: $tinySpace;
+  color: $textColourSecondary;
+  font-size: $fontSizeSmall;
+}
+
+.conversation-diagnostics__item-description {
+  margin-top: $smallSpace;
+  color: $textColourPrimary;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+
+.conversation-diagnostics__jump-button.ant-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 6rem;
+}
diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
new file mode 100644
index 0000000..0444a39
--- /dev/null
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
@@ -0,0 +1,138 @@
+import { useEffect, useState } from 'react';
+import type { ComponentProps } from 'react';
+import { Alert, Button, Empty, Segmented, Tag } from 'antd';
+import { AimOutlined } from '@ant-design/icons';
+import { observer } from 'mobx-react';
+
+import { useStore } from 'hooks/useStore';
+import { DataStore } from 'stores/dataStore/data-store';
+import { DefStore } from 'stores/defStore/def-store';
+import { ModalStore } from 'stores/modalStore/modal-store';
+import { NodeStore } from 'stores/nodeStore/node-store';
+import { buildConversationDiagnostics, ConversationDiagnostic, ConversationDiagnosticSeverity } from 'utils/conversation-diagnostics-utils';
+
+import './ConversationDiagnosticsModal.css';
+
+type Props = {
+  globalModalId: string;
+};
+
+type FilterValue = 'all' | ConversationDiagnosticSeverity;
+type SegmentedOptions = NonNullable<ComponentProps<typeof Segmented>['options']>;
+
+function getSeverityLabel(severity: ConversationDiagnosticSeverity): string {
+  if (severity === 'error') return 'Error';
+  return 'Warning';
+}
+
+function getCategoryLabel(category: ConversationDiagnostic['category']): string {
+  if (category === 'graph') return 'Graph';
+  if (category === 'operation') return 'Operation';
+  if (category === 'reference') return 'Reference';
+  return 'Content';
+}
+
+function ConversationDiagnosticsModal({ globalModalId }: Props) {
+  const dataStore = useStore<DataStore>('data');
+  const defStore = useStore<DefStore>('def');
+  const modalStore = useStore<ModalStore>('modal');
+  const nodeStore = useStore<NodeStore>('node');
+  const [filter, setFilter] = useState<FilterValue>('all');
+
+  const conversationAsset = dataStore.unsavedActiveConversationAsset;
+  const diagnostics =
+    conversationAsset == null
+      ? []
+      : buildConversationDiagnostics({
+          conversationAsset,
+          operationDefinitions: defStore.operations,
+          loadedConversationAssets: Array.from(dataStore.conversationAssets.values()),
+        });
+
+  const errorCount = diagnostics.filter((diagnostic) => diagnostic.severity === 'error').length;
+  const warningCount = diagnostics.filter((diagnostic) => diagnostic.severity === 'warning').length;
+  const filteredDiagnostics = diagnostics.filter((diagnostic) => filter === 'all' || diagnostic.severity === filter);
+
+  const filterOptions: SegmentedOptions = [
+    { label: `All (${diagnostics.length})`, value: 'all' },
+    { label: `Errors (${errorCount})`, value: 'error' },
+    { label: `Warnings (${warningCount})`, value: 'warning' },
+  ];
+
+  const jumpToNode = (diagnostic: ConversationDiagnostic) => {
+    if (diagnostic.nodeId == null) return;
+
+    nodeStore.setActiveNode(diagnostic.nodeId);
+    modalStore.closeModal(globalModalId);
+    window.setTimeout(() => nodeStore.scrollToActiveNode(true), 50);
+  };
+
+  useEffect(() => {
+    modalStore.setTitle('Conversation Diagnostics', globalModalId);
+    modalStore.setWidth('78vw', globalModalId);
+    modalStore.setShowOkButton(false, globalModalId);
+    modalStore.setShowCancelButton(true, globalModalId);
+    modalStore.setCancelLabel('Close', globalModalId);
+  }, []);
+
+  return (
+    <div className="conversation-diagnostics">
+      <div className="conversation-diagnostics__summary">
+        <Alert
+          type={errorCount > 0 ? 'error' : warningCount > 0 ? 'warning' : 'success'}
+          showIcon
+          message={
+            diagnostics.length > 0
+              ? `${diagnostics.length} diagnostic${diagnostics.length === 1 ? '' : 's'} found`
+              : 'No diagnostics found'
+          }
+          description={
+            diagnostics.length > 0
+              ? `${errorCount} error${errorCount === 1 ? '' : 's'} and ${warningCount} warning${warningCount === 1 ? '' : 's'} in the active conversation.`
+              : 'The active conversation passed the current content, graph, operation, and reference checks.'
+          }
+        />
+        {diagnostics.length > 0 && (
+          <Segmented
+            size="small"
+            options={filterOptions}
+            value={filter}
+            onChange={(value) => setFilter(value as FilterValue)}
+          />
+        )}
+      </div>
+
+      {filteredDiagnostics.length <= 0 ? (
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="No diagnostics in this filter" />
+      ) : (
+        <div className="conversation-diagnostics__list">
+          {filteredDiagnostics.map((diagnostic) => (
+            <div key={diagnostic.id} className={`conversation-diagnostics__item conversation-diagnostics__item--${diagnostic.severity}`}>
+              <div className="conversation-diagnostics__item-main">
+                <div className="conversation-diagnostics__item-title">
+                  <Tag color={diagnostic.severity === 'error' ? 'error' : 'warning'}>{getSeverityLabel(diagnostic.severity)}</Tag>
+                  <Tag>{getCategoryLabel(diagnostic.category)}</Tag>
+                  <span>{diagnostic.title}</span>
+                </div>
+                <div className="conversation-diagnostics__item-node">{diagnostic.nodeLabel}</div>
+                <div className="conversation-diagnostics__item-description">{diagnostic.description}</div>
+              </div>
+              <Button
+                className="conversation-diagnostics__jump-button"
+                size="small"
+                type="primary"
+                icon={<AimOutlined />}
+                disabled={diagnostic.nodeId == null}
+                onClick={() => jumpToNode(diagnostic)}
+              >
+                Select
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const ObservingConversationDiagnosticsModal = observer(ConversationDiagnosticsModal);
diff --git a/app/src/components/ConversationDiagnosticsModal/index.ts b/app/src/components/ConversationDiagnosticsModal/index.ts
new file mode 100644
index 0000000..1bb5eb9
--- /dev/null
+++ b/app/src/components/ConversationDiagnosticsModal/index.ts
@@ -0,0 +1 @@
+export { ObservingConversationDiagnosticsModal as ConversationDiagnosticsModal } from './ConversationDiagnosticsModal';
diff --git a/app/src/containers/ConversationEditor/ConversationEditor.tsx b/app/src/containers/ConversationEditor/ConversationEditor.tsx
index 711b77d..2b5e86c 100644
--- a/app/src/containers/ConversationEditor/ConversationEditor.tsx
+++ b/app/src/containers/ConversationEditor/ConversationEditor.tsx
@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react';
 import type { ChangeEvent, ComponentProps } from 'react';
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react';
-import { message, Button, Row, Col, Form, Input, Tabs, Popconfirm } from 'antd';
-import { ArrowRightOutlined, MenuFoldOutlined, MenuUnfoldOutlined, RetweetOutlined, SaveOutlined } from '@ant-design/icons';
+import { message, Button, Row, Col, Form, Input, Tabs, Popconfirm, Tooltip } from 'antd';
+import { ArrowRightOutlined, MenuFoldOutlined, MenuUnfoldOutlined, RetweetOutlined, SaveOutlined, WarningOutlined } from '@ant-design/icons';
 
 import { updateConversation } from 'services/api';
 import { regenerateConversationId } from 'utils/conversation-utils';
@@ -11,9 +11,11 @@ import { detectType } from 'utils/node-utils';
 import { useStore } from 'hooks/useStore';
 import { DialogEditor } from 'components/DialogEditor';
 import { DialogTextArea } from 'components/DialogTextArea';
+import { ConversationDiagnosticsModal } from 'components/ConversationDiagnosticsModal';
 import { Split } from 'components/Split';
 import { NodeStore } from 'stores/nodeStore/node-store';
 import { DataStore } from 'stores/dataStore/data-store';
+import { ModalStore } from 'stores/modalStore/modal-store';
 import { positiveActionButtonProps } from 'utils/antd-button-utils';
 import { ElementNodeType, ConversationAssetType } from 'types';
 
@@ -58,6 +60,7 @@ const inactiveNodeSplitSizes = {
 function ConversationEditor({ conversationAsset }: Props) {
   const nodeStore = useStore<NodeStore>('node');
   const dataStore = useStore<DataStore>('data');
+  const modalStore = useStore<ModalStore>('modal');
   const [isAllExpanded, setIsAllExpanded] = useState<boolean>(true);
 
   const { unsavedActiveConversationAsset } = dataStore;
@@ -192,6 +195,15 @@ function ConversationEditor({ conversationAsset }: Props) {
             }}
             icon={<ArrowRightOutlined />}
           />
+          <Tooltip title="Run conversation diagnostics">
+            <Button
+              className="conversation-editor__diagnostics-button button-secondary"
+              type="primary"
+              size="small"
+              icon={<WarningOutlined />}
+              onClick={() => modalStore.setModelContent(ConversationDiagnosticsModal, {}, 'global1')}
+            />
+          </Tooltip>
         </div>
 
         <div className="conversation-editor__buttons">
diff --git a/app/src/utils/__tests__/conversation-diagnostics-utils.test.ts b/app/src/utils/__tests__/conversation-diagnostics-utils.test.ts
new file mode 100644
index 0000000..1dbc2f2
--- /dev/null
+++ b/app/src/utils/__tests__/conversation-diagnostics-utils.test.ts
@@ -0,0 +1,179 @@
+import { describe, expect, it } from 'vitest';
+
+import { buildConversationDiagnostics } from 'utils/conversation-diagnostics-utils';
+import { createConversation, createPromptNode, createRootNode, getId } from 'utils/conversation-utils';
+import type { ConversationAssetType, OperationArgType, OperationCallType, OperationDefinitionType } from 'types';
+
+function makeStringArg(value: string): OperationArgType {
+  return {
+    type: 'string',
+    intValue: 0,
+    boolValue: false,
+    floatValue: 0,
+    stringValue: value,
+    callValue: null,
+    variableRefValue: null,
+  };
+}
+
+function makeIntArg(value: number): OperationArgType {
+  return {
+    type: 'int',
+    intValue: value,
+    boolValue: false,
+    floatValue: 0,
+    stringValue: '',
+    callValue: null,
+    variableRefValue: null,
+  };
+}
+
+function makeAction(functionName: string, args: OperationArgType[] = []): OperationCallType {
+  return { functionName, args };
+}
+
+function makeDefinition(key: string, inputs: OperationDefinitionType['inputs'] = []): OperationDefinitionType {
+  return {
+    key,
+    label: key,
+    view: ['label', 'inputs'],
+    scope: 'action',
+    category: 'primary',
+    tooltip: '',
+    inputs,
+  };
+}
+
+function makeBasicConversation(): ConversationAssetType {
+  const conversationAsset = createConversation('K:/Mods/Test/conversations');
+  const root = createRootNode();
+  const prompt = createPromptNode(0);
+  root.nextNodeIndex = 0;
+  root.responseText = 'Start';
+  prompt.text = 'Hello.';
+
+  conversationAsset.conversation.roots = [root];
+  conversationAsset.conversation.nodes = [prompt];
+
+  return conversationAsset;
+}
+
+describe('conversation diagnostics', () => {
+  it('reports broken links and unreachable prompt nodes', () => {
+    const conversationAsset = makeBasicConversation();
+    const root = conversationAsset.conversation.roots[0];
+    const orphan = createPromptNode(4);
+    orphan.text = 'No route here.';
+    root.nextNodeIndex = 99;
+    conversationAsset.conversation.nodes.push(orphan);
+
+    const diagnostics = buildConversationDiagnostics({ conversationAsset, operationDefinitions: [] });
+
+    expect(diagnostics).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ severity: 'error', title: 'Link target is missing', nodeId: getId(root) }),
+        expect.objectContaining({ severity: 'warning', title: 'Prompt node is not reachable from a root', nodeId: getId(orphan) }),
+      ]),
+    );
+  });
+
+  it('reports missing operation definitions and missing required inputs', () => {
+    const conversationAsset = makeBasicConversation();
+    const prompt = conversationAsset.conversation.nodes[0];
+    prompt.actions = {
+      ops: [makeAction('Unknown Action'), makeAction('Trigger Event', [makeStringArg('')])],
+    };
+
+    const diagnostics = buildConversationDiagnostics({
+      conversationAsset,
+      operationDefinitions: [makeDefinition('Trigger Event', [{ label: 'Event Def Id', types: ['string'] }])],
+    });
+
+    expect(diagnostics).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ severity: 'error', title: 'Missing operation definition', nodeId: getId(prompt) }),
+        expect.objectContaining({ severity: 'warning', title: 'Operation input is empty', nodeId: getId(prompt) }),
+      ]),
+    );
+  });
+
+  it('uses the runtime prompt node position for link target checks', () => {
+    const conversationAsset = makeBasicConversation();
+    const root = conversationAsset.conversation.roots[0];
+    const target = createPromptNode(9);
+    target.text = 'Runtime position one.';
+    root.nextNodeIndex = 1;
+    conversationAsset.conversation.nodes.push(target);
+
+    const diagnostics = buildConversationDiagnostics({ conversationAsset, operationDefinitions: [] });
+
+    expect(diagnostics).not.toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ severity: 'error', title: 'Link target is missing', nodeId: getId(root) }),
+      ]),
+    );
+    expect(diagnostics).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ severity: 'warning', title: 'Prompt node index differs from its runtime position', nodeId: getId(target) }),
+      ]),
+    );
+  });
+
+  it('validates sideload conversation and entry node references against loaded conversations', () => {
+    const conversationAsset = makeBasicConversation();
+    const prompt = conversationAsset.conversation.nodes[0];
+    prompt.actions = {
+      ops: [makeAction('Sideload Conversation', [makeStringArg('conversation_missing'), makeStringArg('entry_missing'), makeIntArg(1)])],
+    };
+
+    const diagnostics = buildConversationDiagnostics({
+      conversationAsset,
+      operationDefinitions: [
+        makeDefinition('Sideload Conversation', [
+          { label: 'Conversation Id', types: ['string'] },
+          { label: 'Entry Node Id', types: ['string'] },
+          { label: 'Resume host after sideload finished', types: ['int'] },
+        ]),
+      ],
+      loadedConversationAssets: [],
+    });
+
+    expect(diagnostics).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ severity: 'warning', title: 'Sideload conversation target is not loaded', nodeId: getId(prompt) }),
+      ]),
+    );
+  });
+
+  it('reports a missing sideload entry node when the conversation exists', () => {
+    const conversationAsset = makeBasicConversation();
+    const sideloadedConversation = createConversation('K:/Mods/Test/conversations');
+    sideloadedConversation.conversation.idRef.id = 'conversation_target';
+    const targetPrompt = createPromptNode(0);
+    targetPrompt.text = 'Loaded.';
+    sideloadedConversation.conversation.nodes = [targetPrompt];
+
+    const prompt = conversationAsset.conversation.nodes[0];
+    prompt.actions = {
+      ops: [makeAction('Sideload Conversation', [makeStringArg('conversation_target'), makeStringArg('entry_missing'), makeIntArg(1)])],
+    };
+
+    const diagnostics = buildConversationDiagnostics({
+      conversationAsset,
+      operationDefinitions: [
+        makeDefinition('Sideload Conversation', [
+          { label: 'Conversation Id', types: ['string'] },
+          { label: 'Entry Node Id', types: ['string'] },
+          { label: 'Resume host after sideload finished', types: ['int'] },
+        ]),
+      ],
+      loadedConversationAssets: [sideloadedConversation],
+    });
+
+    expect(diagnostics).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ severity: 'warning', title: 'Sideload entry node is missing', nodeId: getId(prompt) }),
+      ]),
+    );
+  });
+});
diff --git a/app/src/utils/conversation-diagnostics-utils.ts b/app/src/utils/conversation-diagnostics-utils.ts
new file mode 100644
index 0000000..cee6fb4
--- /dev/null
+++ b/app/src/utils/conversation-diagnostics-utils.ts
@@ -0,0 +1,524 @@
+import type { ConversationAssetType, ElementNodeType, InputType, OperationArgType, OperationCallType, OperationDefinitionType, PromptNodeType } from 'types';
+import { getId } from './conversation-utils';
+
+export type ConversationDiagnosticSeverity = 'error' | 'warning';
+export type ConversationDiagnosticCategory = 'content' | 'graph' | 'operation' | 'reference';
+
+export type ConversationDiagnostic = {
+  id: string;
+  severity: ConversationDiagnosticSeverity;
+  category: ConversationDiagnosticCategory;
+  title: string;
+  description: string;
+  nodeId: string | null;
+  nodeLabel: string;
+};
+
+export type ConversationDiagnosticsOptions = {
+  conversationAsset: ConversationAssetType;
+  operationDefinitions: OperationDefinitionType[];
+  loadedConversationAssets?: ConversationAssetType[];
+};
+
+type NodeContext = {
+  nodeId: string | null;
+  nodeLabel: string;
+};
+
+type OperationContext = NodeContext & {
+  logicKind: 'action' | 'condition';
+  path: string;
+};
+
+const sideloadConversationOperation = 'Sideload Conversation';
+
+export function buildConversationDiagnostics(options: ConversationDiagnosticsOptions): ConversationDiagnostic[] {
+  const { conversationAsset, operationDefinitions, loadedConversationAssets = [] } = options;
+  const diagnostics: ConversationDiagnostic[] = [];
+  const operationDefinitionsByName = new Map(operationDefinitions.map((definition) => [definition.key, definition]));
+  const promptNodesByRuntimeIndex = buildPromptNodeRuntimeIndexMap(conversationAsset.conversation.nodes, diagnostics);
+  const loadedConversationsById = buildLoadedConversationsById([conversationAsset, ...loadedConversationAssets]);
+
+  scanConversationShape(conversationAsset, diagnostics, promptNodesByRuntimeIndex);
+  scanReachability(conversationAsset, diagnostics, promptNodesByRuntimeIndex);
+  scanOperations(conversationAsset, diagnostics, operationDefinitionsByName, loadedConversationsById);
+
+  return diagnostics;
+}
+
+function buildPromptNodeRuntimeIndexMap(nodes: PromptNodeType[], diagnostics: ConversationDiagnostic[]): Map<number, PromptNodeType> {
+  const promptNodesByRuntimeIndex = new Map<number, PromptNodeType>();
+  const promptNodeIndexes = new Map<number, PromptNodeType>();
+
+  nodes.forEach((node, runtimeIndex) => {
+    promptNodesByRuntimeIndex.set(runtimeIndex, node);
+
+    if (node.index !== runtimeIndex) {
+      diagnostics.push(
+        createDiagnostic({
+          severity: 'warning',
+          category: 'graph',
+          title: 'Prompt node index differs from its runtime position',
+          description: `BattleTech resolves links by position in the prompt node list. This prompt is stored at position ${runtimeIndex}, but its own index field is ${node.index}. Saving in ConverseTek should rebuild this, but it is worth checking before testing in game.`,
+          context: getPromptNodeContext(node),
+        }),
+      );
+    }
+
+    if (promptNodeIndexes.has(node.index)) {
+      diagnostics.push(
+        createDiagnostic({
+          severity: 'warning',
+          category: 'graph',
+          title: 'Duplicate prompt node index',
+          description: `Prompt node index ${node.index} is used more than once. BattleTech uses this field for conversation history and loop handling, so duplicates can make backtracking behaviour unreliable.`,
+          context: getPromptNodeContext(node),
+        }),
+      );
+      return;
+    }
+
+    promptNodeIndexes.set(node.index, node);
+  });
+
+  return promptNodesByRuntimeIndex;
+}
+
+function scanConversationShape(
+  conversationAsset: ConversationAssetType,
+  diagnostics: ConversationDiagnostic[],
+  promptNodesByIndex: Map<number, PromptNodeType>,
+): void {
+  const { roots, nodes } = conversationAsset.conversation;
+
+  if (roots.length <= 0) {
+    diagnostics.push(
+      createDiagnostic({
+        severity: 'error',
+        category: 'graph',
+        title: 'Conversation has no roots',
+        description: 'The conversation has no root response nodes, so BattleTech has no entry point into the dialogue.',
+        context: getConversationContext(conversationAsset),
+      }),
+    );
+  }
+
+  roots.forEach((root, index) => {
+    const context = getElementNodeContext(root, `Root ${index + 1}`);
+    scanElementNodeTarget(root, context, diagnostics, promptNodesByIndex, true);
+  });
+
+  nodes.forEach((node) => {
+    const context = getPromptNodeContext(node);
+
+    if (node.text.trim() === '' && !isPromptNodeAutoFollowRouter(node)) {
+      diagnostics.push(
+        createDiagnostic({
+          severity: 'warning',
+          category: 'content',
+          title: 'Prompt node has no text',
+          description: 'BattleTech can use empty prompt nodes as auto-follow routers, but this prompt does not look like a simple router. Check that the player will not be left on stale or missing dialogue text.',
+          context,
+        }),
+      );
+    }
+
+    node.branches.forEach((response, index) => {
+      const responseContext = getElementNodeContext(response, `Response ${index + 1} from ${context.nodeLabel}`);
+      scanElementNodeTarget(response, responseContext, diagnostics, promptNodesByIndex, false);
+    });
+  });
+}
+
+function isPromptNodeAutoFollowRouter(node: PromptNodeType): boolean {
+  return node.branches.some((branch) => branch.responseText === '');
+}
+
+function scanElementNodeTarget(
+  elementNode: ElementNodeType,
+  context: NodeContext,
+  diagnostics: ConversationDiagnostic[],
+  promptNodesByIndex: Map<number, PromptNodeType>,
+  isRoot: boolean,
+): void {
+  if (elementNode.nextNodeIndex === -1) {
+    if (isRoot) {
+      diagnostics.push(
+        createDiagnostic({
+          severity: 'warning',
+          category: 'graph',
+          title: 'Root has no target prompt node',
+          description: 'This root points to End of Dialogue. If this is not intentional, connect it to a prompt node.',
+          context,
+        }),
+      );
+    }
+    return;
+  }
+
+  if (!promptNodesByIndex.has(elementNode.nextNodeIndex)) {
+    diagnostics.push(
+      createDiagnostic({
+        severity: 'error',
+        category: 'graph',
+        title: 'Link target is missing',
+        description: `${context.nodeLabel} points to prompt node position ${elementNode.nextNodeIndex}, but the prompt node list does not have that position. BattleTech will treat this as End Conversation.`,
+        context,
+      }),
+    );
+  }
+}
+
+function scanReachability(
+  conversationAsset: ConversationAssetType,
+  diagnostics: ConversationDiagnostic[],
+  promptNodesByIndex: Map<number, PromptNodeType>,
+): void {
+  const reachableIndexes = new Set<number>();
+  const visitPromptIndex = (index: number): void => {
+    if (index === -1 || reachableIndexes.has(index)) return;
+
+    const node = promptNodesByIndex.get(index);
+    if (node == null) return;
+
+    reachableIndexes.add(index);
+    node.branches.forEach((branch) => visitPromptIndex(branch.nextNodeIndex));
+  };
+
+  conversationAsset.conversation.roots.forEach((root) => visitPromptIndex(root.nextNodeIndex));
+
+  conversationAsset.conversation.nodes.forEach((node, runtimeIndex) => {
+    if (reachableIndexes.has(runtimeIndex)) return;
+
+    diagnostics.push(
+      createDiagnostic({
+        severity: 'warning',
+        category: 'graph',
+        title: 'Prompt node is not reachable from a root',
+        description: 'This prompt node cannot be reached by following roots and responses in this conversation. If it is only used as an explicit sideload entry, this can be intentional.',
+        context: getPromptNodeContext(node),
+      }),
+    );
+  });
+}
+
+function scanOperations(
+  conversationAsset: ConversationAssetType,
+  diagnostics: ConversationDiagnostic[],
+  operationDefinitionsByName: Map<string, OperationDefinitionType>,
+  loadedConversationsById: Map<string, ConversationAssetType>,
+): void {
+  const { roots, nodes } = conversationAsset.conversation;
+
+  roots.forEach((root, index) => {
+    const context = getElementNodeContext(root, `Root ${index + 1}`);
+    scanOperationList(root.conditions?.ops, { ...context, logicKind: 'condition', path: 'root conditions' }, diagnostics, operationDefinitionsByName, loadedConversationsById);
+    scanOperationList(root.actions?.ops, { ...context, logicKind: 'action', path: 'root actions' }, diagnostics, operationDefinitionsByName, loadedConversationsById);
+  });
+
+  nodes.forEach((node) => {
+    const context = getPromptNodeContext(node);
+    scanOperationList(node.actions?.ops, { ...context, logicKind: 'action', path: 'prompt actions' }, diagnostics, operationDefinitionsByName, loadedConversationsById);
+
+    node.branches.forEach((response, index) => {
+      const responseContext = getElementNodeContext(response, `Response ${index + 1} from ${context.nodeLabel}`);
+      scanOperationList(
+        response.conditions?.ops,
+        { ...responseContext, logicKind: 'condition', path: 'response conditions' },
+        diagnostics,
+        operationDefinitionsByName,
+        loadedConversationsById,
+      );
+      scanOperationList(
+        response.actions?.ops,
+        { ...responseContext, logicKind: 'action', path: 'response actions' },
+        diagnostics,
+        operationDefinitionsByName,
+        loadedConversationsById,
+      );
+    });
+  });
+}
+
+function scanOperationList(
+  operations: OperationCallType[] | null | undefined,
+  context: OperationContext,
+  diagnostics: ConversationDiagnostic[],
+  operationDefinitionsByName: Map<string, OperationDefinitionType>,
+  loadedConversationsById: Map<string, ConversationAssetType>,
+): void {
+  operations?.forEach((operation, index) => {
+    scanOperation(operation, { ...context, path: `${context.path} > ${context.logicKind} ${index + 1}` }, diagnostics, operationDefinitionsByName, loadedConversationsById);
+  });
+}
+
+function scanOperation(
+  operation: OperationCallType,
+  context: OperationContext,
+  diagnostics: ConversationDiagnostic[],
+  operationDefinitionsByName: Map<string, OperationDefinitionType>,
+  loadedConversationsById: Map<string, ConversationAssetType>,
+): void {
+  const definition = operationDefinitionsByName.get(operation.functionName);
+
+  if (definition == null) {
+    diagnostics.push(
+      createDiagnostic({
+        severity: 'error',
+        category: 'operation',
+        title: 'Missing operation definition',
+        description: `${context.path} uses '${operation.functionName}', but no matching operation definition is installed.`,
+        context,
+      }),
+    );
+    return;
+  }
+
+  if (operation.args.length < definition.inputs.length) {
+    diagnostics.push(
+      createDiagnostic({
+        severity: 'warning',
+        category: 'operation',
+        title: 'Operation has missing inputs',
+        description: `${operation.functionName} expects ${definition.inputs.length} input(s), but this call only has ${operation.args.length}.`,
+        context,
+      }),
+    );
+  }
+
+  operation.args.forEach((arg, index) => {
+    const input = definition.inputs[index];
+    if (input == null) {
+      diagnostics.push(
+        createDiagnostic({
+          severity: 'warning',
+          category: 'operation',
+          title: 'Operation has extra input data',
+          description: `${operation.functionName} has an extra input at position ${index + 1}. It may have been created with an older or mismatched definition.`,
+          context,
+        }),
+      );
+      return;
+    }
+
+    scanOperationArg(operation, arg, input, index, context, diagnostics, operationDefinitionsByName, loadedConversationsById);
+  });
+
+  if (operation.functionName === sideloadConversationOperation) {
+    scanSideloadConversationOperation(operation, context, diagnostics, loadedConversationsById);
+  }
+}
+
+function scanOperationArg(
+  operation: OperationCallType,
+  arg: OperationArgType,
+  input: InputType,
+  inputIndex: number,
+  context: OperationContext,
+  diagnostics: ConversationDiagnostic[],
+  operationDefinitionsByName: Map<string, OperationDefinitionType>,
+  loadedConversationsById: Map<string, ConversationAssetType>,
+): void {
+  const argType = getEffectiveArgType(arg);
+  const inputPath = `${operation.functionName} input '${input.label || inputIndex + 1}'`;
+
+  if (argType != null && !input.types.includes(argType)) {
+    diagnostics.push(
+      createDiagnostic({
+        severity: 'warning',
+        category: 'operation',
+        title: 'Operation input type looks wrong',
+        description: `${inputPath} is stored as ${argType}, but the definition allows ${input.types.join(', ')}.`,
+        context,
+      }),
+    );
+  }
+
+  if (!isInputOptional(operation.functionName, input) && isEmptyRequiredArg(arg, input)) {
+    diagnostics.push(
+      createDiagnostic({
+        severity: 'warning',
+        category: 'operation',
+        title: 'Operation input is empty',
+        description: `${inputPath} is empty. This may fail or do nothing at runtime.`,
+        context,
+      }),
+    );
+  }
+
+  if (input.values != null && input.values.length > 0) {
+    const value = getArgPrimitiveValue(arg);
+    if (value != null && !input.values.some((inputValue) => inputValue.value === value)) {
+      diagnostics.push(
+        createDiagnostic({
+          severity: 'warning',
+          category: 'operation',
+          title: 'Operation input is outside the expected values',
+          description: `${inputPath} uses '${String(value)}', but the definition only lists specific values for this input.`,
+          context,
+        }),
+      );
+    }
+  }
+
+  if (arg.callValue != null) {
+    scanOperation(
+      arg.callValue,
+      { ...context, path: `${context.path} > ${operation.functionName}.${input.label || inputIndex + 1}` },
+      diagnostics,
+      operationDefinitionsByName,
+      loadedConversationsById,
+    );
+  }
+}
+
+function scanSideloadConversationOperation(
+  operation: OperationCallType,
+  context: OperationContext,
+  diagnostics: ConversationDiagnostic[],
+  loadedConversationsById: Map<string, ConversationAssetType>,
+): void {
+  const conversationId = getStringArgValue(operation.args[0]);
+  const entryNodeId = getStringArgValue(operation.args[1]);
+
+  if (conversationId == null || conversationId.trim() === '') return;
+
+  const sideloadedConversation = loadedConversationsById.get(conversationId) ?? loadedConversationsById.get(getComparableId(conversationId));
+  if (sideloadedConversation == null) {
+    diagnostics.push(
+      createDiagnostic({
+        severity: 'warning',
+        category: 'reference',
+        title: 'Sideload conversation target is not loaded',
+        description: `Sideload Conversation references '${conversationId}', but no loaded conversation with that id was found in the current folder.`,
+        context,
+      }),
+    );
+    return;
+  }
+
+  if (entryNodeId == null || entryNodeId.trim() === '') return;
+
+  if (!conversationContainsNodeId(sideloadedConversation, entryNodeId)) {
+    diagnostics.push(
+      createDiagnostic({
+        severity: 'warning',
+        category: 'reference',
+        title: 'Sideload entry node is missing',
+        description: `Sideload Conversation enters '${entryNodeId}', but that node id was not found in '${sideloadedConversation.conversation.uiName || conversationId}'.`,
+        context,
+      }),
+    );
+  }
+}
+
+function createDiagnostic({
+  severity,
+  category,
+  title,
+  description,
+  context,
+}: {
+  severity: ConversationDiagnosticSeverity;
+  category: ConversationDiagnosticCategory;
+  title: string;
+  description: string;
+  context: NodeContext;
+}): ConversationDiagnostic {
+  return {
+    id: `${severity}-${category}-${context.nodeId || 'conversation'}-${title}-${description}`,
+    severity,
+    category,
+    title,
+    description,
+    nodeId: context.nodeId,
+    nodeLabel: context.nodeLabel,
+  };
+}
+
+function getPromptNodeContext(node: PromptNodeType): NodeContext {
+  return {
+    nodeId: getId(node),
+    nodeLabel: `Prompt #${node.index}`,
+  };
+}
+
+function getElementNodeContext(node: ElementNodeType, fallbackLabel: string): NodeContext {
+  return {
+    nodeId: getId(node),
+    nodeLabel: fallbackLabel,
+  };
+}
+
+function getConversationContext(conversationAsset: ConversationAssetType): NodeContext {
+  return {
+    nodeId: null,
+    nodeLabel: conversationAsset.conversation.uiName || getId(conversationAsset.conversation),
+  };
+}
+
+function getEffectiveArgType(arg: OperationArgType): 'operation' | 'string' | 'float' | 'int' | 'bool' | null {
+  if (arg.type != null) return arg.type;
+  if (arg.callValue != null) return 'operation';
+  if (arg.stringValue !== '') return 'string';
+  if (arg.floatValue !== 0) return 'float';
+  if (arg.boolValue) return 'bool';
+  if (arg.intValue !== 0) return 'int';
+  return null;
+}
+
+function getArgPrimitiveValue(arg: OperationArgType): string | number | boolean | null {
+  const argType = getEffectiveArgType(arg);
+
+  if (argType === 'string') return arg.stringValue;
+  if (argType === 'float') return arg.floatValue;
+  if (argType === 'int') return arg.intValue;
+  if (argType === 'bool') return arg.boolValue;
+  return null;
+}
+
+function getStringArgValue(arg: OperationArgType | undefined): string | null {
+  if (arg == null || arg.callValue != null) return null;
+  if (arg.type != null && arg.type !== 'string') return null;
+  return arg.stringValue;
+}
+
+function isEmptyRequiredArg(arg: OperationArgType, input: InputType): boolean {
+  if (input.types.includes('operation') && input.types.length === 1) return arg.callValue == null;
+  if (input.types.includes('string') && !input.types.includes('operation')) return arg.stringValue.trim() === '';
+  if (input.types.includes('string') && input.types.includes('operation')) return arg.callValue == null && arg.stringValue.trim() === '';
+  return false;
+}
+
+function isInputOptional(functionName: string, input: InputType): boolean {
+  const inputText = `${input.label || ''} ${input.tooltip || ''}`.toLowerCase();
+  if (inputText.includes('optional')) return true;
+  if (functionName === sideloadConversationOperation && input.label.toLowerCase() === 'entry node id') return true;
+  return false;
+}
+
+function buildLoadedConversationsById(conversationAssets: ConversationAssetType[]): Map<string, ConversationAssetType> {
+  const conversationsById = new Map<string, ConversationAssetType>();
+
+  conversationAssets.forEach((conversationAsset) => {
+    const rawId = conversationAsset.conversation.idRef.id;
+    conversationsById.set(rawId, conversationAsset);
+    conversationsById.set(getComparableId(rawId), conversationAsset);
+  });
+
+  return conversationsById;
+}
+
+function getComparableId(id: string): string {
+  return id.split(':')[1] || id;
+}
+
+function conversationContainsNodeId(conversationAsset: ConversationAssetType, nodeId: string): boolean {
+  const comparableNodeId = getComparableId(nodeId);
+  const matchesNode = (node: ElementNodeType | PromptNodeType) => node.idRef.id === nodeId || getId(node) === comparableNodeId;
+
+  return (
+    conversationAsset.conversation.roots.some(matchesNode) ||
+    conversationAsset.conversation.nodes.some((node) => matchesNode(node) || node.branches.some(matchesNode))
+  );
+}

From 490a28545a9962941597f9609f1a54c0e4eb6db0 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 19:52:22 +0200
Subject: [PATCH 02/29] Fix modal store React element observability

---
 app/src/containers/GlobalModal/GlobalModal.tsx | 2 +-
 app/src/stores/modalStore/modal-store.tsx      | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/src/containers/GlobalModal/GlobalModal.tsx b/app/src/containers/GlobalModal/GlobalModal.tsx
index 54d0c8c..47669b9 100644
--- a/app/src/containers/GlobalModal/GlobalModal.tsx
+++ b/app/src/containers/GlobalModal/GlobalModal.tsx
@@ -78,7 +78,7 @@ function GlobalModal({ id }: { id: string }) {
       wrapClassName="global-modal"
       width={width}
       closable={closable}
-      maskClosable={maskClosable}
+      mask={{ closable: maskClosable }}
       centered={centered}
       transitionName=""
       maskTransitionName=""
diff --git a/app/src/stores/modalStore/modal-store.tsx b/app/src/stores/modalStore/modal-store.tsx
index a21a1d4..9dc608e 100644
--- a/app/src/stores/modalStore/modal-store.tsx
+++ b/app/src/stores/modalStore/modal-store.tsx
@@ -45,8 +45,8 @@ class ModalStore {
 
   constructor() {
     makeObservable(this, {
-      modals: observable.deep,
-      options: observable,
+      modals: observable.shallow,
+      options: observable.shallow,
 
       setModelContent: action,
       setTitle: action,
@@ -104,7 +104,7 @@ class ModalStore {
       ...props,
     };
 
-    this.options.set(globalModalId, options);
+    this.options.set(globalModalId, observable.object(options, {}, { deep: false }));
     if (show) this.showModal(true, globalModalId);
   }
 

From d5746f04f94175794af9d1c1f3e4f47aded6eea1 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 21:18:33 +0200
Subject: [PATCH 03/29] Avoid strict operation value diagnostics

---
 .../conversation-diagnostics-utils.test.ts    | 47 +++++++++++++++++++
 .../utils/conversation-diagnostics-utils.ts   | 25 ----------
 2 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/app/src/utils/__tests__/conversation-diagnostics-utils.test.ts b/app/src/utils/__tests__/conversation-diagnostics-utils.test.ts
index 1dbc2f2..b90eac0 100644
--- a/app/src/utils/__tests__/conversation-diagnostics-utils.test.ts
+++ b/app/src/utils/__tests__/conversation-diagnostics-utils.test.ts
@@ -97,6 +97,53 @@ describe('conversation diagnostics', () => {
     );
   });
 
+  it('does not treat operation definition values as strict validation rules', () => {
+    const conversationAsset = makeBasicConversation();
+    const prompt = conversationAsset.conversation.nodes[0];
+    prompt.actions = {
+      ops: [
+        makeAction('Start Conversation Custom', [
+          makeStringArg('9cc71978b9c677fd26a37d5e'),
+          makeStringArg('Dead Claim'),
+          makeStringArg('Hunt that prospect'),
+          makeIntArg(0),
+          makeIntArg(1000),
+        ]),
+      ],
+    };
+
+    const diagnostics = buildConversationDiagnostics({
+      conversationAsset,
+      operationDefinitions: [
+        makeDefinition('Start Conversation Custom', [
+          { label: 'Conversation Id', types: ['string'] },
+          { label: 'Conversation Header', types: ['string'] },
+          { label: 'Conversation Sub Header', types: ['string'] },
+          {
+            label: 'Force Non-FP Conference Room',
+            types: ['int'],
+            values: [
+              { text: 'False', value: 0 },
+              { text: 'True', value: 1 },
+            ],
+          },
+          {
+            label: 'Dropship Exit Room',
+            types: ['int'],
+            values: [
+              { text: 'DC Leopard Corridor', value: 110 },
+              { text: 'DC Mech Bay', value: 200 },
+            ],
+          },
+        ]),
+      ],
+    });
+
+    expect(diagnostics).not.toEqual(
+      expect.arrayContaining([expect.objectContaining({ severity: 'warning', title: 'Operation input is outside the expected values', nodeId: getId(prompt) })]),
+    );
+  });
+
   it('uses the runtime prompt node position for link target checks', () => {
     const conversationAsset = makeBasicConversation();
     const root = conversationAsset.conversation.roots[0];
diff --git a/app/src/utils/conversation-diagnostics-utils.ts b/app/src/utils/conversation-diagnostics-utils.ts
index cee6fb4..abb1d5b 100644
--- a/app/src/utils/conversation-diagnostics-utils.ts
+++ b/app/src/utils/conversation-diagnostics-utils.ts
@@ -346,21 +346,6 @@ function scanOperationArg(
     );
   }
 
-  if (input.values != null && input.values.length > 0) {
-    const value = getArgPrimitiveValue(arg);
-    if (value != null && !input.values.some((inputValue) => inputValue.value === value)) {
-      diagnostics.push(
-        createDiagnostic({
-          severity: 'warning',
-          category: 'operation',
-          title: 'Operation input is outside the expected values',
-          description: `${inputPath} uses '${String(value)}', but the definition only lists specific values for this input.`,
-          context,
-        }),
-      );
-    }
-  }
-
   if (arg.callValue != null) {
     scanOperation(
       arg.callValue,
@@ -467,16 +452,6 @@ function getEffectiveArgType(arg: OperationArgType): 'operation' | 'string' | 'f
   return null;
 }
 
-function getArgPrimitiveValue(arg: OperationArgType): string | number | boolean | null {
-  const argType = getEffectiveArgType(arg);
-
-  if (argType === 'string') return arg.stringValue;
-  if (argType === 'float') return arg.floatValue;
-  if (argType === 'int') return arg.intValue;
-  if (argType === 'bool') return arg.boolValue;
-  return null;
-}
-
 function getStringArgValue(arg: OperationArgType | undefined): string | null {
   if (arg == null || arg.callValue != null) return null;
   if (arg.type != null && arg.type !== 'string') return null;

From 132cec55349104560e1727894e117014b120a8b4 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 21:25:38 +0200
Subject: [PATCH 04/29] Polish conversation diagnostics modal

---
 .../ConversationDiagnosticsModal.css          | 249 +++++++++++++++---
 .../ConversationDiagnosticsModal.tsx          | 169 +++++++++---
 2 files changed, 345 insertions(+), 73 deletions(-)

diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
index 6e95492..9859ba1 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
@@ -4,83 +4,264 @@
   display: flex;
   flex-direction: column;
   gap: $mediumSpace;
-  min-height: 24rem;
-  max-height: min(70vh, 48rem);
+  min-height: 28rem;
+  max-height: min(72vh, 50rem);
+  color: $textColourOnLight;
+  -webkit-font-smoothing: antialiased;
 }
 
 .conversation-diagnostics__summary {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: $mediumSpace;
+  padding: $mediumSpace;
+  border: 1px solid #d9e8ff;
+  border-radius: 6px;
+  background: linear-gradient(90deg, #fffdf5 0%, #ffffff 68%);
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.06),
+    0 10px 28px rgba(0, 0, 0, 0.05);
+}
+
+.conversation-diagnostics__summary--error {
+  border-color: #ffd8d6;
+  background: linear-gradient(90deg, #fff7f6 0%, #ffffff 68%);
+}
+
+.conversation-diagnostics__summary--success {
+  border-color: #d6f1df;
+  background: linear-gradient(90deg, #f7fff9 0%, #ffffff 68%);
+}
+
+.conversation-diagnostics__summary-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  color: white;
+  background: #faad14;
+  font-size: 15px;
+}
+
+.conversation-diagnostics__summary--error .conversation-diagnostics__summary-icon {
+  background: #ff4d4f;
+}
+
+.conversation-diagnostics__summary--success .conversation-diagnostics__summary-icon {
+  background: #52c41a;
+}
+
+.conversation-diagnostics__summary-copy {
+  min-width: 0;
+}
+
+.conversation-diagnostics__summary-title {
+  color: #232a34;
+  font-size: $fontSizeLarge;
+  font-weight: $fontWeightSemibold;
+  line-height: $lineHeightLarge;
+  text-wrap: balance;
+}
+
+.conversation-diagnostics__summary-description {
+  margin-top: $tinySpace;
+  color: #596273;
+  line-height: $lineHeightNormal;
+  text-wrap: pretty;
+}
+
+.conversation-diagnostics__summary .ant-btn {
+  min-height: 40px;
+}
+
+.conversation-diagnostics__toolbar {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
   gap: $mediumSpace;
 }
 
-.conversation-diagnostics__summary .ant-alert {
-  border-radius: $tinySpace;
+.conversation-diagnostics__toolbar .ant-segmented {
+  justify-self: start;
+  background: transparent;
+}
+
+.conversation-diagnostics__toolbar .ant-segmented-item {
+  min-height: 36px;
+  padding: 0 $smallSpace;
+}
+
+.conversation-diagnostics__toolbar-controls {
+  display: grid;
+  grid-template-columns: minmax(12rem, 18rem) 10rem;
+  gap: $smallMediumSpace;
+}
+
+.conversation-diagnostics__toolbar-controls .ant-input-affix-wrapper,
+.conversation-diagnostics__toolbar-controls .ant-select-selector {
+  min-height: 40px;
+  border-radius: 4px;
 }
 
 .conversation-diagnostics__list {
   display: flex;
   flex-direction: column;
-  gap: $smallSpace;
+  gap: $smallMediumSpace;
   min-height: 0;
   overflow-y: auto;
-  padding-right: $tinySpace;
+  padding: 1px $tinySpace 1px 1px;
 }
 
 .conversation-diagnostics__item {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: start;
-  gap: $mediumSpace;
-  padding: $mediumSpace;
-  border: 1px solid $borderTertiary;
-  border-left-width: 4px;
-  border-radius: $tinySpace;
-  background: $backgroundSecondary;
+  grid-template-columns: 4px minmax(0, 1fr);
+  overflow: hidden;
+  border-radius: 6px;
+  background: #ffffff;
+  box-shadow:
+    inset 0 0 0 1px rgba(26, 36, 52, 0.13),
+    0 1px 2px rgba(0, 0, 0, 0.06),
+    0 12px 28px rgba(0, 0, 0, 0.07);
 }
 
-.conversation-diagnostics__item--error {
-  border-left-color: #ff4d4f;
+.conversation-diagnostics__item-accent {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: $mediumLargeSpace;
+  color: transparent;
+  background: #faad14;
+}
+
+.conversation-diagnostics__item--error .conversation-diagnostics__item-accent {
+  background: #ff4d4f;
 }
 
-.conversation-diagnostics__item--warning {
-  border-left-color: #faad14;
+.conversation-diagnostics__item-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(13rem, 22rem);
+  gap: $mediumLargeSpace;
+  padding: $mediumLargeSpace;
 }
 
 .conversation-diagnostics__item-main {
   min-width: 0;
 }
 
-.conversation-diagnostics__item-title {
+.conversation-diagnostics__item-tags {
   display: flex;
   align-items: center;
   gap: $tinySpace;
-  min-width: 0;
-  color: $textColourPrimary;
-  font-weight: 600;
+  margin-bottom: $smallSpace;
+}
+
+.conversation-diagnostics__item-tags .ant-tag {
+  margin-inline-end: 0;
+  border-radius: 999px;
+  font-weight: $fontWeightMedium;
 }
 
-.conversation-diagnostics__item-title > span:last-child {
+.conversation-diagnostics__item-title {
   min-width: 0;
+  color: #232a34;
+  font-size: $fontSizeLarge;
+  font-weight: $fontWeightSemibold;
+  line-height: $lineHeightLarge;
   overflow-wrap: anywhere;
+  text-wrap: balance;
 }
 
 .conversation-diagnostics__item-node {
-  margin-top: $tinySpace;
-  color: $textColourSecondary;
+  margin-top: $smallSpace;
+  color: #697386;
   font-size: $fontSizeSmall;
+  line-height: $lineHeightSmall;
 }
 
 .conversation-diagnostics__item-description {
-  margin-top: $smallSpace;
-  color: $textColourPrimary;
-  line-height: 1.4;
+  margin-top: $smallMediumSpace;
+  color: #384250;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+  text-wrap: pretty;
+}
+
+.conversation-diagnostics__item-details {
+  display: flex;
+  flex-direction: column;
+  gap: $smallMediumSpace;
+  min-width: 0;
+  padding-left: $mediumLargeSpace;
+  box-shadow: inset 1px 0 0 rgba(26, 36, 52, 0.1);
+}
+
+.conversation-diagnostics__meta-row {
+  display: flex;
+  flex-direction: column;
+  gap: $tinySpace;
+  min-width: 0;
+}
+
+.conversation-diagnostics__meta-label {
+  color: #2f3745;
+  font-weight: $fontWeightSemibold;
+  line-height: $lineHeightSmall;
+}
+
+.conversation-diagnostics__meta-value {
+  align-self: flex-start;
+  max-width: 100%;
+  padding: 2px $smallSpace;
+  border-radius: 4px;
+  color: #304056;
+  background: #f0f3f7;
+  font-family: Consolas, 'Courier New', monospace;
+  font-size: $fontSizeSmall;
+  line-height: $lineHeightSmall;
   overflow-wrap: anywhere;
 }
 
 .conversation-diagnostics__jump-button.ant-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 6rem;
+  align-self: flex-start;
+  min-height: 40px;
+  padding-inline: 0;
+  color: $linkColourTertiary;
+  font-weight: $fontWeightSemibold;
+}
+
+.conversation-diagnostics__summary .ant-btn,
+.conversation-diagnostics__jump-button.ant-btn {
+  transition-property: transform, color, background-color, border-color, box-shadow;
+  transition-duration: 160ms;
+  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+}
+
+.conversation-diagnostics__summary .ant-btn:active,
+.conversation-diagnostics__jump-button.ant-btn:active {
+  transform: scale(0.96);
+}
+
+@media (max-width: 960px) {
+  .conversation-diagnostics__summary,
+  .conversation-diagnostics__toolbar,
+  .conversation-diagnostics__item-body {
+    grid-template-columns: 1fr;
+  }
+
+  .conversation-diagnostics__summary-icon {
+    display: none;
+  }
+
+  .conversation-diagnostics__toolbar-controls {
+    grid-template-columns: 1fr;
+  }
+
+  .conversation-diagnostics__item-details {
+    padding-top: $mediumSpace;
+    padding-left: 0;
+    box-shadow: inset 0 1px 0 rgba(26, 36, 52, 0.1);
+  }
 }
diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
index 0444a39..3202cc9 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import type { ComponentProps } from 'react';
-import { Alert, Button, Empty, Segmented, Tag } from 'antd';
-import { AimOutlined } from '@ant-design/icons';
+import { Button, Empty, Input, Select, Segmented, Tag } from 'antd';
+import { AimOutlined, CheckCircleOutlined, DownloadOutlined, ExclamationCircleOutlined, SearchOutlined, WarningOutlined } from '@ant-design/icons';
 import { observer } from 'mobx-react';
 
 import { useStore } from 'hooks/useStore';
@@ -9,7 +9,8 @@ import { DataStore } from 'stores/dataStore/data-store';
 import { DefStore } from 'stores/defStore/def-store';
 import { ModalStore } from 'stores/modalStore/modal-store';
 import { NodeStore } from 'stores/nodeStore/node-store';
-import { buildConversationDiagnostics, ConversationDiagnostic, ConversationDiagnosticSeverity } from 'utils/conversation-diagnostics-utils';
+import { buildConversationDiagnostics } from 'utils/conversation-diagnostics-utils';
+import type { ConversationDiagnostic, ConversationDiagnosticCategory, ConversationDiagnosticSeverity } from 'utils/conversation-diagnostics-utils';
 
 import './ConversationDiagnosticsModal.css';
 
@@ -18,6 +19,7 @@ type Props = {
 };
 
 type FilterValue = 'all' | ConversationDiagnosticSeverity;
+type CategoryFilterValue = 'all' | ConversationDiagnosticCategory;
 type SegmentedOptions = NonNullable<ComponentProps<typeof Segmented>['options']>;
 
 function getSeverityLabel(severity: ConversationDiagnosticSeverity): string {
@@ -38,6 +40,8 @@ function ConversationDiagnosticsModal({ globalModalId }: Props) {
   const modalStore = useStore<ModalStore>('modal');
   const nodeStore = useStore<NodeStore>('node');
   const [filter, setFilter] = useState<FilterValue>('all');
+  const [categoryFilter, setCategoryFilter] = useState<CategoryFilterValue>('all');
+  const [searchText, setSearchText] = useState('');
 
   const conversationAsset = dataStore.unsavedActiveConversationAsset;
   const diagnostics =
@@ -51,7 +55,17 @@ function ConversationDiagnosticsModal({ globalModalId }: Props) {
 
   const errorCount = diagnostics.filter((diagnostic) => diagnostic.severity === 'error').length;
   const warningCount = diagnostics.filter((diagnostic) => diagnostic.severity === 'warning').length;
-  const filteredDiagnostics = diagnostics.filter((diagnostic) => filter === 'all' || diagnostic.severity === filter);
+  const normalisedSearchText = searchText.trim().toLowerCase();
+  const filteredDiagnostics = diagnostics.filter((diagnostic) => {
+    if (filter !== 'all' && diagnostic.severity !== filter) return false;
+    if (categoryFilter !== 'all' && diagnostic.category !== categoryFilter) return false;
+    if (normalisedSearchText === '') return true;
+
+    return [diagnostic.title, diagnostic.nodeLabel, diagnostic.description, getCategoryLabel(diagnostic.category), getSeverityLabel(diagnostic.severity)]
+      .join(' ')
+      .toLowerCase()
+      .includes(normalisedSearchText);
+  });
 
   const filterOptions: SegmentedOptions = [
     { label: `All (${diagnostics.length})`, value: 'all' },
@@ -67,9 +81,37 @@ function ConversationDiagnosticsModal({ globalModalId }: Props) {
     window.setTimeout(() => nodeStore.scrollToActiveNode(true), 50);
   };
 
+  const exportReport = () => {
+    const conversationName = conversationAsset?.conversation.uiName || conversationAsset?.conversation.idRef.id || 'Active Conversation';
+    const report = [
+      `Conversation Diagnostics - ${conversationName}`,
+      '',
+      `${diagnostics.length} diagnostic${diagnostics.length === 1 ? '' : 's'} found`,
+      `${errorCount} error${errorCount === 1 ? '' : 's'} and ${warningCount} warning${warningCount === 1 ? '' : 's'}`,
+      '',
+      ...diagnostics.flatMap((diagnostic, index) => [
+        `${index + 1}. [${getSeverityLabel(diagnostic.severity)}] ${diagnostic.title}`,
+        `   Area: ${getCategoryLabel(diagnostic.category)}`,
+        `   Node: ${diagnostic.nodeLabel}`,
+        `   Detail: ${diagnostic.description}`,
+        '',
+      ]),
+    ].join('\n');
+
+    const blob = new Blob([report], { type: 'text/plain;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `conversetek-diagnostics-${Date.now()}.txt`;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    window.setTimeout(() => URL.revokeObjectURL(url), 0);
+  };
+
   useEffect(() => {
     modalStore.setTitle('Conversation Diagnostics', globalModalId);
-    modalStore.setWidth('78vw', globalModalId);
+    modalStore.setWidth('min(74rem, 86vw)', globalModalId);
     modalStore.setShowOkButton(false, globalModalId);
     modalStore.setShowCancelButton(true, globalModalId);
     modalStore.setCancelLabel('Close', globalModalId);
@@ -77,56 +119,90 @@ function ConversationDiagnosticsModal({ globalModalId }: Props) {
 
   return (
     <div className="conversation-diagnostics">
-      <div className="conversation-diagnostics__summary">
-        <Alert
-          type={errorCount > 0 ? 'error' : warningCount > 0 ? 'warning' : 'success'}
-          showIcon
-          message={
-            diagnostics.length > 0
+      <section className={`conversation-diagnostics__summary conversation-diagnostics__summary--${getSummaryTone(errorCount, warningCount)}`}>
+        <div className="conversation-diagnostics__summary-icon" aria-hidden="true">
+          {errorCount > 0 ? <ExclamationCircleOutlined /> : warningCount > 0 ? <WarningOutlined /> : <CheckCircleOutlined />}
+        </div>
+        <div className="conversation-diagnostics__summary-copy">
+          <div className="conversation-diagnostics__summary-title">
+            {diagnostics.length > 0
               ? `${diagnostics.length} diagnostic${diagnostics.length === 1 ? '' : 's'} found`
-              : 'No diagnostics found'
-          }
-          description={
-            diagnostics.length > 0
+              : 'No diagnostics found'}
+          </div>
+          <div className="conversation-diagnostics__summary-description">
+            {diagnostics.length > 0
               ? `${errorCount} error${errorCount === 1 ? '' : 's'} and ${warningCount} warning${warningCount === 1 ? '' : 's'} in the active conversation.`
-              : 'The active conversation passed the current content, graph, operation, and reference checks.'
-          }
-        />
-        {diagnostics.length > 0 && (
+              : 'The active conversation passed the current content, graph, operation, and reference checks.'}
+          </div>
+        </div>
+        <Button icon={<DownloadOutlined />} onClick={exportReport} disabled={diagnostics.length <= 0}>
+          Export Report
+        </Button>
+      </section>
+
+      {diagnostics.length > 0 && (
+        <div className="conversation-diagnostics__toolbar">
           <Segmented
             size="small"
             options={filterOptions}
             value={filter}
             onChange={(value) => setFilter(value as FilterValue)}
           />
-        )}
-      </div>
+          <div className="conversation-diagnostics__toolbar-controls">
+            <Input
+              allowClear
+              prefix={<SearchOutlined />}
+              placeholder="Search diagnostics..."
+              value={searchText}
+              onChange={(event) => setSearchText(event.target.value)}
+            />
+            <Select<CategoryFilterValue>
+              value={categoryFilter}
+              onChange={setCategoryFilter}
+              options={[
+                { label: 'All areas', value: 'all' },
+                { label: 'Content', value: 'content' },
+                { label: 'Graph', value: 'graph' },
+                { label: 'Operation', value: 'operation' },
+                { label: 'Reference', value: 'reference' },
+              ]}
+            />
+          </div>
+        </div>
+      )}
 
       {filteredDiagnostics.length <= 0 ? (
-        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="No diagnostics in this filter" />
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={diagnostics.length <= 0 ? 'No diagnostics found' : 'No diagnostics in this filter'} />
       ) : (
         <div className="conversation-diagnostics__list">
           {filteredDiagnostics.map((diagnostic) => (
             <div key={diagnostic.id} className={`conversation-diagnostics__item conversation-diagnostics__item--${diagnostic.severity}`}>
-              <div className="conversation-diagnostics__item-main">
-                <div className="conversation-diagnostics__item-title">
-                  <Tag color={diagnostic.severity === 'error' ? 'error' : 'warning'}>{getSeverityLabel(diagnostic.severity)}</Tag>
-                  <Tag>{getCategoryLabel(diagnostic.category)}</Tag>
-                  <span>{diagnostic.title}</span>
+              <div className="conversation-diagnostics__item-accent" aria-hidden="true" />
+              <div className="conversation-diagnostics__item-body">
+                <div className="conversation-diagnostics__item-main">
+                  <div className="conversation-diagnostics__item-tags">
+                    <Tag color={diagnostic.severity === 'error' ? 'error' : 'warning'}>{getSeverityLabel(diagnostic.severity)}</Tag>
+                    <Tag>{getCategoryLabel(diagnostic.category)}</Tag>
+                  </div>
+                  <div className="conversation-diagnostics__item-title">{diagnostic.title}</div>
+                  <div className="conversation-diagnostics__item-node">{diagnostic.nodeLabel}</div>
+                  <div className="conversation-diagnostics__item-description">{diagnostic.description}</div>
                 </div>
-                <div className="conversation-diagnostics__item-node">{diagnostic.nodeLabel}</div>
-                <div className="conversation-diagnostics__item-description">{diagnostic.description}</div>
+                <aside className="conversation-diagnostics__item-details">
+                  <MetaRow label="Severity" value={getSeverityLabel(diagnostic.severity)} />
+                  <MetaRow label="Area" value={getCategoryLabel(diagnostic.category)} />
+                  <MetaRow label="Node" value={diagnostic.nodeLabel} />
+                  <Button
+                    className="conversation-diagnostics__jump-button"
+                    type="link"
+                    icon={<AimOutlined />}
+                    disabled={diagnostic.nodeId == null}
+                    onClick={() => jumpToNode(diagnostic)}
+                  >
+                    View in Conversation
+                  </Button>
+                </aside>
               </div>
-              <Button
-                className="conversation-diagnostics__jump-button"
-                size="small"
-                type="primary"
-                icon={<AimOutlined />}
-                disabled={diagnostic.nodeId == null}
-                onClick={() => jumpToNode(diagnostic)}
-              >
-                Select
-              </Button>
             </div>
           ))}
         </div>
@@ -135,4 +211,19 @@ function ConversationDiagnosticsModal({ globalModalId }: Props) {
   );
 }
 
+function getSummaryTone(errorCount: number, warningCount: number): ConversationDiagnosticSeverity | 'success' {
+  if (errorCount > 0) return 'error';
+  if (warningCount > 0) return 'warning';
+  return 'success';
+}
+
+function MetaRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="conversation-diagnostics__meta-row">
+      <div className="conversation-diagnostics__meta-label">{label}</div>
+      <div className="conversation-diagnostics__meta-value">{value}</div>
+    </div>
+  );
+}
+
 export const ObservingConversationDiagnosticsModal = observer(ConversationDiagnosticsModal);

From 4efa4f8bf14a694ec7c4335437004104209b0d71 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 21:28:06 +0200
Subject: [PATCH 05/29] Fix diagnostics filter control styling

---
 .../ConversationDiagnosticsModal.css          | 91 ++++++++++++++++++-
 .../ConversationDiagnosticsModal.tsx          |  2 +
 2 files changed, 91 insertions(+), 2 deletions(-)

diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
index 9859ba1..b226e93 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
@@ -86,12 +86,38 @@
 
 .conversation-diagnostics__toolbar .ant-segmented {
   justify-self: start;
+  padding: 0;
   background: transparent;
+  box-shadow: inset 0 -1px 0 #dfe5ef;
 }
 
 .conversation-diagnostics__toolbar .ant-segmented-item {
-  min-height: 36px;
-  padding: 0 $smallSpace;
+  min-width: 6rem;
+  height: 40px;
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  color: #384250;
+}
+
+.conversation-diagnostics__toolbar .ant-segmented-item-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  padding: 0 $mediumSpace;
+  line-height: 40px;
+}
+
+.conversation-diagnostics__toolbar .ant-segmented-thumb {
+  border-radius: 4px 4px 0 0;
+  box-shadow: inset 0 -2px 0 $linkColourTertiary;
+}
+
+.conversation-diagnostics__toolbar .ant-segmented-item-selected {
+  color: $linkColourTertiary;
+  font-weight: $fontWeightMedium;
+  box-shadow: inset 0 -2px 0 $linkColourTertiary;
 }
 
 .conversation-diagnostics__toolbar-controls {
@@ -106,6 +132,67 @@
   border-radius: 4px;
 }
 
+.conversation-diagnostics__category-select.ant-select {
+  --ant-select-background-color: #ffffff;
+  --ant-select-border-color: #d6dde8;
+  --ant-select-color: #30343a;
+}
+
+.conversation-diagnostics__category-select.ant-select.ant-select-outlined:not(.ant-select-customize-input),
+.conversation-diagnostics__category-select.ant-select:not(.ant-select-customize-input) .ant-select-selector {
+  background-color: #ffffff;
+  border-color: #d6dde8;
+  color: #30343a;
+}
+
+.conversation-diagnostics__category-select.ant-select.ant-select-single .ant-select-selector .ant-select-selection-item,
+.conversation-diagnostics__category-select.ant-select.ant-select-single .ant-select-selector .ant-select-selection-placeholder,
+.conversation-diagnostics__category-select.ant-select:not(.ant-select-customize-input).ant-select-single .ant-select-selector .ant-select-selection-search-input {
+  color: #30343a;
+}
+
+.conversation-diagnostics__category-select.ant-select .ant-select-arrow,
+.conversation-diagnostics__category-select.ant-select .ant-select-suffix {
+  color: $linkColourTertiary;
+}
+
+.conversation-diagnostics__category-dropdown.ant-select-dropdown {
+  padding: $tinySpace;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #30343a;
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.12),
+    0 0 0 1px rgba(26, 36, 52, 0.1);
+}
+
+.conversation-diagnostics__category-dropdown.ant-select-dropdown .ant-select-item {
+  min-height: 36px;
+  border-radius: 4px;
+  background: #ffffff;
+  color: #30343a;
+}
+
+.conversation-diagnostics__category-dropdown.ant-select-dropdown .ant-select-item-option-content {
+  color: inherit;
+}
+
+.conversation-diagnostics__category-dropdown.ant-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+  background: #eef6ff;
+  color: #123a67;
+}
+
+.conversation-diagnostics__category-dropdown.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+  border-left: 0;
+  background: #e6f4ff;
+  color: $linkColourTertiary;
+  font-weight: $fontWeightSemibold;
+}
+
+.conversation-diagnostics__category-dropdown.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-state {
+  color: $linkColourTertiary;
+}
+
 .conversation-diagnostics__list {
   display: flex;
   flex-direction: column;
diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
index 3202cc9..ae6f05f 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
@@ -157,6 +157,8 @@ function ConversationDiagnosticsModal({ globalModalId }: Props) {
               onChange={(event) => setSearchText(event.target.value)}
             />
             <Select<CategoryFilterValue>
+              className="conversation-diagnostics__category-select"
+              classNames={{ popup: { root: 'conversation-diagnostics__category-dropdown' } }}
               value={categoryFilter}
               onChange={setCategoryFilter}
               options={[

From e72a18af8addc3d1ab2fd4d97065241510e847d5 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 21:33:30 +0200
Subject: [PATCH 06/29] Add informational diagnostics severity

---
 .../ConversationDiagnosticsModal.css          | 37 +++++++++++
 .../ConversationDiagnosticsModal.tsx          | 39 +++++++++--
 .../conversation-diagnostics-utils.test.ts    | 65 ++++++++++++++++++-
 .../utils/conversation-diagnostics-utils.ts   | 42 ++++++++----
 4 files changed, 162 insertions(+), 21 deletions(-)

diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
index b226e93..d5c9907 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
@@ -29,6 +29,11 @@
   background: linear-gradient(90deg, #fff7f6 0%, #ffffff 68%);
 }
 
+.conversation-diagnostics__summary--info {
+  border-color: #cfe8ff;
+  background: linear-gradient(90deg, #f5fbff 0%, #ffffff 68%);
+}
+
 .conversation-diagnostics__summary--success {
   border-color: #d6f1df;
   background: linear-gradient(90deg, #f7fff9 0%, #ffffff 68%);
@@ -50,6 +55,10 @@
   background: #ff4d4f;
 }
 
+.conversation-diagnostics__summary--info .conversation-diagnostics__summary-icon {
+  background: #1890ff;
+}
+
 .conversation-diagnostics__summary--success .conversation-diagnostics__summary-icon {
   background: #52c41a;
 }
@@ -132,6 +141,30 @@
   border-radius: 4px;
 }
 
+.conversation-diagnostics__toolbar-controls .ant-input-affix-wrapper {
+  background: #ffffff;
+  border-color: #d6dde8;
+  color: #30343a;
+}
+
+.conversation-diagnostics__toolbar-controls .ant-input-affix-wrapper .ant-input {
+  background: transparent;
+  color: #30343a;
+}
+
+.conversation-diagnostics__toolbar-controls .ant-input-affix-wrapper .ant-input::placeholder {
+  color: #8a94a6;
+  font-style: normal;
+}
+
+.conversation-diagnostics__toolbar-controls .ant-input-prefix {
+  color: #596273;
+}
+
+.conversation-diagnostics__toolbar-controls .ant-input-clear-icon {
+  color: #697386;
+}
+
 .conversation-diagnostics__category-select.ant-select {
   --ant-select-background-color: #ffffff;
   --ant-select-border-color: #d6dde8;
@@ -227,6 +260,10 @@
   background: #ff4d4f;
 }
 
+.conversation-diagnostics__item--info .conversation-diagnostics__item-accent {
+  background: #1890ff;
+}
+
 .conversation-diagnostics__item-body {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(13rem, 22rem);
diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
index ae6f05f..ec52e7f 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
@@ -1,7 +1,15 @@
 import { useEffect, useState } from 'react';
 import type { ComponentProps } from 'react';
 import { Button, Empty, Input, Select, Segmented, Tag } from 'antd';
-import { AimOutlined, CheckCircleOutlined, DownloadOutlined, ExclamationCircleOutlined, SearchOutlined, WarningOutlined } from '@ant-design/icons';
+import {
+  AimOutlined,
+  CheckCircleOutlined,
+  DownloadOutlined,
+  ExclamationCircleOutlined,
+  InfoCircleOutlined,
+  SearchOutlined,
+  WarningOutlined,
+} from '@ant-design/icons';
 import { observer } from 'mobx-react';
 
 import { useStore } from 'hooks/useStore';
@@ -24,9 +32,16 @@ type SegmentedOptions = NonNullable<ComponentProps<typeof Segmented>['options']>
 
 function getSeverityLabel(severity: ConversationDiagnosticSeverity): string {
   if (severity === 'error') return 'Error';
+  if (severity === 'info') return 'Info';
   return 'Warning';
 }
 
+function getSeverityTagColour(severity: ConversationDiagnosticSeverity): string {
+  if (severity === 'error') return 'error';
+  if (severity === 'info') return 'processing';
+  return 'warning';
+}
+
 function getCategoryLabel(category: ConversationDiagnostic['category']): string {
   if (category === 'graph') return 'Graph';
   if (category === 'operation') return 'Operation';
@@ -55,6 +70,7 @@ function ConversationDiagnosticsModal({ globalModalId }: Props) {
 
   const errorCount = diagnostics.filter((diagnostic) => diagnostic.severity === 'error').length;
   const warningCount = diagnostics.filter((diagnostic) => diagnostic.severity === 'warning').length;
+  const infoCount = diagnostics.filter((diagnostic) => diagnostic.severity === 'info').length;
   const normalisedSearchText = searchText.trim().toLowerCase();
   const filteredDiagnostics = diagnostics.filter((diagnostic) => {
     if (filter !== 'all' && diagnostic.severity !== filter) return false;
@@ -71,6 +87,7 @@ function ConversationDiagnosticsModal({ globalModalId }: Props) {
     { label: `All (${diagnostics.length})`, value: 'all' },
     { label: `Errors (${errorCount})`, value: 'error' },
     { label: `Warnings (${warningCount})`, value: 'warning' },
+    { label: `Info (${infoCount})`, value: 'info' },
   ];
 
   const jumpToNode = (diagnostic: ConversationDiagnostic) => {
@@ -87,7 +104,7 @@ function ConversationDiagnosticsModal({ globalModalId }: Props) {
       `Conversation Diagnostics - ${conversationName}`,
       '',
       `${diagnostics.length} diagnostic${diagnostics.length === 1 ? '' : 's'} found`,
-      `${errorCount} error${errorCount === 1 ? '' : 's'} and ${warningCount} warning${warningCount === 1 ? '' : 's'}`,
+      getSummaryCountsText(errorCount, warningCount, infoCount),
       '',
       ...diagnostics.flatMap((diagnostic, index) => [
         `${index + 1}. [${getSeverityLabel(diagnostic.severity)}] ${diagnostic.title}`,
@@ -119,9 +136,9 @@ function ConversationDiagnosticsModal({ globalModalId }: Props) {
 
   return (
     <div className="conversation-diagnostics">
-      <section className={`conversation-diagnostics__summary conversation-diagnostics__summary--${getSummaryTone(errorCount, warningCount)}`}>
+      <section className={`conversation-diagnostics__summary conversation-diagnostics__summary--${getSummaryTone(errorCount, warningCount, infoCount)}`}>
         <div className="conversation-diagnostics__summary-icon" aria-hidden="true">
-          {errorCount > 0 ? <ExclamationCircleOutlined /> : warningCount > 0 ? <WarningOutlined /> : <CheckCircleOutlined />}
+          {errorCount > 0 ? <ExclamationCircleOutlined /> : warningCount > 0 ? <WarningOutlined /> : infoCount > 0 ? <InfoCircleOutlined /> : <CheckCircleOutlined />}
         </div>
         <div className="conversation-diagnostics__summary-copy">
           <div className="conversation-diagnostics__summary-title">
@@ -131,7 +148,7 @@ function ConversationDiagnosticsModal({ globalModalId }: Props) {
           </div>
           <div className="conversation-diagnostics__summary-description">
             {diagnostics.length > 0
-              ? `${errorCount} error${errorCount === 1 ? '' : 's'} and ${warningCount} warning${warningCount === 1 ? '' : 's'} in the active conversation.`
+              ? `${getSummaryCountsText(errorCount, warningCount, infoCount)} in the active conversation.`
               : 'The active conversation passed the current content, graph, operation, and reference checks.'}
           </div>
         </div>
@@ -183,7 +200,7 @@ function ConversationDiagnosticsModal({ globalModalId }: Props) {
               <div className="conversation-diagnostics__item-body">
                 <div className="conversation-diagnostics__item-main">
                   <div className="conversation-diagnostics__item-tags">
-                    <Tag color={diagnostic.severity === 'error' ? 'error' : 'warning'}>{getSeverityLabel(diagnostic.severity)}</Tag>
+                    <Tag color={getSeverityTagColour(diagnostic.severity)}>{getSeverityLabel(diagnostic.severity)}</Tag>
                     <Tag>{getCategoryLabel(diagnostic.category)}</Tag>
                   </div>
                   <div className="conversation-diagnostics__item-title">{diagnostic.title}</div>
@@ -213,12 +230,20 @@ function ConversationDiagnosticsModal({ globalModalId }: Props) {
   );
 }
 
-function getSummaryTone(errorCount: number, warningCount: number): ConversationDiagnosticSeverity | 'success' {
+function getSummaryTone(errorCount: number, warningCount: number, infoCount: number): ConversationDiagnosticSeverity | 'success' {
   if (errorCount > 0) return 'error';
   if (warningCount > 0) return 'warning';
+  if (infoCount > 0) return 'info';
   return 'success';
 }
 
+function getSummaryCountsText(errorCount: number, warningCount: number, infoCount: number): string {
+  const errorText = `${errorCount} error${errorCount === 1 ? '' : 's'}`;
+  const warningText = `${warningCount} warning${warningCount === 1 ? '' : 's'}`;
+  const infoText = `${infoCount} info`;
+  return `${errorText}, ${warningText}, and ${infoText}`;
+}
+
 function MetaRow({ label, value }: { label: string; value: string }) {
   return (
     <div className="conversation-diagnostics__meta-row">
diff --git a/app/src/utils/__tests__/conversation-diagnostics-utils.test.ts b/app/src/utils/__tests__/conversation-diagnostics-utils.test.ts
index b90eac0..c003fff 100644
--- a/app/src/utils/__tests__/conversation-diagnostics-utils.test.ts
+++ b/app/src/utils/__tests__/conversation-diagnostics-utils.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
 import { buildConversationDiagnostics } from 'utils/conversation-diagnostics-utils';
-import { createConversation, createPromptNode, createRootNode, getId } from 'utils/conversation-utils';
+import { createConversation, createPromptNode, createResponseNode, createRootNode, getId } from 'utils/conversation-utils';
 import type { ConversationAssetType, OperationArgType, OperationCallType, OperationDefinitionType } from 'types';
 
 function makeStringArg(value: string): OperationArgType {
@@ -97,6 +97,40 @@ describe('conversation diagnostics', () => {
     );
   });
 
+  it('allows empty prompt nodes that continue into response choices', () => {
+    const conversationAsset = makeBasicConversation();
+    const prompt = conversationAsset.conversation.nodes[0];
+    const commanderResponse = createResponseNode();
+    commanderResponse.responseText = 'Keep going.';
+    commanderResponse.nextNodeIndex = -1;
+    prompt.text = '';
+    prompt.branches = [commanderResponse];
+
+    const diagnostics = buildConversationDiagnostics({ conversationAsset, operationDefinitions: [] });
+    const promptDiagnostics = diagnostics.filter((diagnostic) => diagnostic.nodeId === getId(prompt));
+
+    expect(promptDiagnostics).toEqual(
+      expect.arrayContaining([expect.objectContaining({ severity: 'info', title: 'Prompt node has no text' })]),
+    );
+    expect(promptDiagnostics.some((diagnostic) => diagnostic.severity === 'warning' && diagnostic.title.startsWith('Prompt node'))).toBe(false);
+  });
+
+  it('reports empty prompt nodes that have no responses or actions', () => {
+    const conversationAsset = makeBasicConversation();
+    const prompt = conversationAsset.conversation.nodes[0];
+    prompt.text = '';
+    prompt.branches = [];
+    prompt.actions = null;
+
+    const diagnostics = buildConversationDiagnostics({ conversationAsset, operationDefinitions: [] });
+
+    expect(diagnostics).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ severity: 'warning', title: 'Prompt node has no content or responses', nodeId: getId(prompt) }),
+      ]),
+    );
+  });
+
   it('does not treat operation definition values as strict validation rules', () => {
     const conversationAsset = makeBasicConversation();
     const prompt = conversationAsset.conversation.nodes[0];
@@ -144,6 +178,35 @@ describe('conversation diagnostics', () => {
     );
   });
 
+  it('reports an empty conversation sub header as info instead of a warning', () => {
+    const conversationAsset = makeBasicConversation();
+    const prompt = conversationAsset.conversation.nodes[0];
+    const response = createResponseNode();
+    response.responseText = 'Open the custom conversation.';
+    response.actions = {
+      ops: [makeAction('Start Conversation Custom', [makeStringArg('conversation_target'), makeStringArg('Dead Claim'), makeStringArg('')])],
+    };
+    prompt.branches = [response];
+
+    const diagnostics = buildConversationDiagnostics({
+      conversationAsset,
+      operationDefinitions: [
+        makeDefinition('Start Conversation Custom', [
+          { label: 'Conversation Id', types: ['string'] },
+          { label: 'Conversation Header', types: ['string'] },
+          { label: 'Conversation Sub Header', types: ['string'] },
+        ]),
+      ],
+    });
+
+    expect(diagnostics).toEqual(
+      expect.arrayContaining([expect.objectContaining({ severity: 'info', title: 'Operation input is empty', nodeId: getId(response) })]),
+    );
+    expect(diagnostics).not.toEqual(
+      expect.arrayContaining([expect.objectContaining({ severity: 'warning', title: 'Operation input is empty', nodeId: getId(response) })]),
+    );
+  });
+
   it('uses the runtime prompt node position for link target checks', () => {
     const conversationAsset = makeBasicConversation();
     const root = conversationAsset.conversation.roots[0];
diff --git a/app/src/utils/conversation-diagnostics-utils.ts b/app/src/utils/conversation-diagnostics-utils.ts
index abb1d5b..66d5e02 100644
--- a/app/src/utils/conversation-diagnostics-utils.ts
+++ b/app/src/utils/conversation-diagnostics-utils.ts
@@ -1,7 +1,7 @@
 import type { ConversationAssetType, ElementNodeType, InputType, OperationArgType, OperationCallType, OperationDefinitionType, PromptNodeType } from 'types';
 import { getId } from './conversation-utils';
 
-export type ConversationDiagnosticSeverity = 'error' | 'warning';
+export type ConversationDiagnosticSeverity = 'error' | 'warning' | 'info';
 export type ConversationDiagnosticCategory = 'content' | 'graph' | 'operation' | 'reference';
 
 export type ConversationDiagnostic = {
@@ -111,15 +111,23 @@ function scanConversationShape(
   nodes.forEach((node) => {
     const context = getPromptNodeContext(node);
 
-    if (node.text.trim() === '' && !isPromptNodeAutoFollowRouter(node)) {
+    if (node.text.trim() === '') {
       diagnostics.push(
-        createDiagnostic({
-          severity: 'warning',
-          category: 'content',
-          title: 'Prompt node has no text',
-          description: 'BattleTech can use empty prompt nodes as auto-follow routers, but this prompt does not look like a simple router. Check that the player will not be left on stale or missing dialogue text.',
-          context,
-        }),
+        isEmptyPromptLikelyInert(node)
+          ? createDiagnostic({
+              severity: 'warning',
+              category: 'content',
+              title: 'Prompt node has no content or responses',
+              description: 'This prompt has no speaker text, no response options, and no actions. Check that the player will not be left on stale or missing dialogue text.',
+              context,
+            })
+          : createDiagnostic({
+              severity: 'info',
+              category: 'content',
+              title: 'Prompt node has no text',
+              description: 'This prompt has no speaker text, but it has response choices or actions. This is valid for continuation routing, chained commander response runs, and other intentional silent prompt nodes.',
+              context,
+            }),
       );
     }
 
@@ -130,8 +138,8 @@ function scanConversationShape(
   });
 }
 
-function isPromptNodeAutoFollowRouter(node: PromptNodeType): boolean {
-  return node.branches.some((branch) => branch.responseText === '');
+function isEmptyPromptLikelyInert(node: PromptNodeType): boolean {
+  return node.branches.length <= 0 && (node.actions?.ops?.length ?? 0) <= 0;
 }
 
 function scanElementNodeTarget(
@@ -335,12 +343,16 @@ function scanOperationArg(
   }
 
   if (!isInputOptional(operation.functionName, input) && isEmptyRequiredArg(arg, input)) {
+    const severity = isInformationalEmptyArg(operation.functionName, input) ? 'info' : 'warning';
     diagnostics.push(
       createDiagnostic({
-        severity: 'warning',
+        severity,
         category: 'operation',
         title: 'Operation input is empty',
-        description: `${inputPath} is empty. This may fail or do nothing at runtime.`,
+        description:
+          severity === 'info'
+            ? `${inputPath} is empty. This is valid, but check that the missing value is intentional.`
+            : `${inputPath} is empty. This may fail or do nothing at runtime.`,
         context,
       }),
     );
@@ -472,6 +484,10 @@ function isInputOptional(functionName: string, input: InputType): boolean {
   return false;
 }
 
+function isInformationalEmptyArg(functionName: string, input: InputType): boolean {
+  return functionName === 'Start Conversation Custom' && input.label.toLowerCase() === 'conversation sub header';
+}
+
 function buildLoadedConversationsById(conversationAssets: ConversationAssetType[]): Map<string, ConversationAssetType> {
   const conversationsById = new Map<string, ConversationAssetType>();
 

From 4c67726103c7f836671b1b3ca6841a29e2d0fcdf Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 21:34:52 +0200
Subject: [PATCH 07/29] Space conversation editor toolbar buttons

---
 app/src/containers/ConversationEditor/ConversationEditor.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/src/containers/ConversationEditor/ConversationEditor.css b/app/src/containers/ConversationEditor/ConversationEditor.css
index 6374588..99a12f7 100644
--- a/app/src/containers/ConversationEditor/ConversationEditor.css
+++ b/app/src/containers/ConversationEditor/ConversationEditor.css
@@ -37,11 +37,14 @@
   }
 
   &__tool-buttons {
+    display: flex;
+    align-items: center;
+    gap: $smallSpace;
     margin-bottom: $smallSpace;
   }
 
   &__expand-nodes {
-    margin-right: $smallSpace;
+    flex: 0 0 auto;
   }
 
   &__details {

From 3517d4d2c122974aa3b2d51db335cdd5501d5d82 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 21:36:25 +0200
Subject: [PATCH 08/29] Prevent diagnostics rows from shrinking

---
 .../ConversationDiagnosticsModal.css                            | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
index d5c9907..a25b7da 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
@@ -229,6 +229,7 @@
 .conversation-diagnostics__list {
   display: flex;
   flex-direction: column;
+  flex: 1 1 auto;
   gap: $smallMediumSpace;
   min-height: 0;
   overflow-y: auto;
@@ -237,6 +238,7 @@
 
 .conversation-diagnostics__item {
   display: grid;
+  flex: 0 0 auto;
   grid-template-columns: 4px minmax(0, 1fr);
   overflow: hidden;
   border-radius: 6px;

From fc8c27bec72955f473c97a3c8490329ae8189b72 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 21:42:12 +0200
Subject: [PATCH 09/29] Collapse diagnostics rows by default

---
 .../ConversationDiagnosticsModal.css          |  74 +++++++++++-
 .../ConversationDiagnosticsModal.tsx          | 114 +++++++++++++-----
 2 files changed, 154 insertions(+), 34 deletions(-)

diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
index a25b7da..eb7b475 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
@@ -131,12 +131,13 @@
 
 .conversation-diagnostics__toolbar-controls {
   display: grid;
-  grid-template-columns: minmax(12rem, 18rem) 10rem;
+  grid-template-columns: minmax(12rem, 18rem) 10rem auto;
   gap: $smallMediumSpace;
 }
 
 .conversation-diagnostics__toolbar-controls .ant-input-affix-wrapper,
-.conversation-diagnostics__toolbar-controls .ant-select-selector {
+.conversation-diagnostics__toolbar-controls .ant-select-selector,
+.conversation-diagnostics__toolbar-controls .ant-btn {
   min-height: 40px;
   border-radius: 4px;
 }
@@ -266,11 +267,58 @@
   background: #1890ff;
 }
 
+.conversation-diagnostics__item-panel {
+  min-width: 0;
+}
+
+.conversation-diagnostics__item-summary {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: $smallMediumSpace;
+  width: 100%;
+  min-height: 58px;
+  padding: $smallMediumSpace $mediumLargeSpace;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition-property: background-color;
+  transition-duration: 160ms;
+  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+}
+
+.conversation-diagnostics__item-summary:hover,
+.conversation-diagnostics__item-summary:focus-visible {
+  background: #f7faff;
+}
+
+.conversation-diagnostics__item-summary:focus-visible {
+  outline: 2px solid #91caff;
+  outline-offset: -2px;
+}
+
+.conversation-diagnostics__item-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: #596273;
+  font-size: 12px;
+}
+
+.conversation-diagnostics__item-summary-copy {
+  min-width: 0;
+}
+
 .conversation-diagnostics__item-body {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(13rem, 22rem);
   gap: $mediumLargeSpace;
-  padding: $mediumLargeSpace;
+  padding: 0 $mediumLargeSpace $mediumLargeSpace calc($mediumLargeSpace + 36px);
+  box-shadow: inset 0 1px 0 rgba(26, 36, 52, 0.08);
 }
 
 .conversation-diagnostics__item-main {
@@ -281,7 +329,8 @@
   display: flex;
   align-items: center;
   gap: $tinySpace;
-  margin-bottom: $smallSpace;
+  justify-content: flex-end;
+  min-width: max-content;
 }
 
 .conversation-diagnostics__item-tags .ant-tag {
@@ -301,14 +350,14 @@
 }
 
 .conversation-diagnostics__item-node {
-  margin-top: $smallSpace;
+  display: block;
+  margin-top: 2px;
   color: #697386;
   font-size: $fontSizeSmall;
   line-height: $lineHeightSmall;
 }
 
 .conversation-diagnostics__item-description {
-  margin-top: $smallMediumSpace;
   color: #384250;
   line-height: 1.5;
   overflow-wrap: anywhere;
@@ -385,6 +434,19 @@
     grid-template-columns: 1fr;
   }
 
+  .conversation-diagnostics__item-summary {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .conversation-diagnostics__item-tags {
+    grid-column: 2;
+    justify-content: flex-start;
+  }
+
+  .conversation-diagnostics__item-body {
+    padding-left: $mediumLargeSpace;
+  }
+
   .conversation-diagnostics__item-details {
     padding-top: $mediumSpace;
     padding-left: 0;
diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
index ec52e7f..2389d3e 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
@@ -4,9 +4,11 @@ import { Button, Empty, Input, Select, Segmented, Tag } from 'antd';
 import {
   AimOutlined,
   CheckCircleOutlined,
+  DownOutlined,
   DownloadOutlined,
   ExclamationCircleOutlined,
   InfoCircleOutlined,
+  RightOutlined,
   SearchOutlined,
   WarningOutlined,
 } from '@ant-design/icons';
@@ -57,6 +59,7 @@ function ConversationDiagnosticsModal({ globalModalId }: Props) {
   const [filter, setFilter] = useState<FilterValue>('all');
   const [categoryFilter, setCategoryFilter] = useState<CategoryFilterValue>('all');
   const [searchText, setSearchText] = useState('');
+  const [expandedDiagnosticIds, setExpandedDiagnosticIds] = useState<Set<string>>(() => new Set());
 
   const conversationAsset = dataStore.unsavedActiveConversationAsset;
   const diagnostics =
@@ -89,6 +92,32 @@ function ConversationDiagnosticsModal({ globalModalId }: Props) {
     { label: `Warnings (${warningCount})`, value: 'warning' },
     { label: `Info (${infoCount})`, value: 'info' },
   ];
+  const allFilteredDiagnosticsExpanded =
+    filteredDiagnostics.length > 0 && filteredDiagnostics.every((diagnostic) => expandedDiagnosticIds.has(diagnostic.id));
+
+  const toggleDiagnostic = (diagnosticId: string) => {
+    setExpandedDiagnosticIds((currentIds) => {
+      const nextIds = new Set(currentIds);
+      if (nextIds.has(diagnosticId)) {
+        nextIds.delete(diagnosticId);
+      } else {
+        nextIds.add(diagnosticId);
+      }
+      return nextIds;
+    });
+  };
+
+  const toggleFilteredDiagnostics = () => {
+    setExpandedDiagnosticIds((currentIds) => {
+      const nextIds = new Set(currentIds);
+      if (allFilteredDiagnosticsExpanded) {
+        filteredDiagnostics.forEach((diagnostic) => nextIds.delete(diagnostic.id));
+      } else {
+        filteredDiagnostics.forEach((diagnostic) => nextIds.add(diagnostic.id));
+      }
+      return nextIds;
+    });
+  };
 
   const jumpToNode = (diagnostic: ConversationDiagnostic) => {
     if (diagnostic.nodeId == null) return;
@@ -134,6 +163,14 @@ function ConversationDiagnosticsModal({ globalModalId }: Props) {
     modalStore.setCancelLabel('Close', globalModalId);
   }, []);
 
+  useEffect(() => {
+    const diagnosticIds = new Set(diagnostics.map((diagnostic) => diagnostic.id));
+    setExpandedDiagnosticIds((currentIds) => {
+      const nextIds = new Set([...currentIds].filter((diagnosticId) => diagnosticIds.has(diagnosticId)));
+      return nextIds.size === currentIds.size ? currentIds : nextIds;
+    });
+  }, [diagnostics.map((diagnostic) => diagnostic.id).join('|')]);
+
   return (
     <div className="conversation-diagnostics">
       <section className={`conversation-diagnostics__summary conversation-diagnostics__summary--${getSummaryTone(errorCount, warningCount, infoCount)}`}>
@@ -186,6 +223,7 @@ function ConversationDiagnosticsModal({ globalModalId }: Props) {
                 { label: 'Reference', value: 'reference' },
               ]}
             />
+            <Button onClick={toggleFilteredDiagnostics}>{allFilteredDiagnosticsExpanded ? 'Collapse Visible' : 'Expand Visible'}</Button>
           </div>
         </div>
       )}
@@ -194,36 +232,56 @@ function ConversationDiagnosticsModal({ globalModalId }: Props) {
         <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={diagnostics.length <= 0 ? 'No diagnostics found' : 'No diagnostics in this filter'} />
       ) : (
         <div className="conversation-diagnostics__list">
-          {filteredDiagnostics.map((diagnostic) => (
-            <div key={diagnostic.id} className={`conversation-diagnostics__item conversation-diagnostics__item--${diagnostic.severity}`}>
-              <div className="conversation-diagnostics__item-accent" aria-hidden="true" />
-              <div className="conversation-diagnostics__item-body">
-                <div className="conversation-diagnostics__item-main">
-                  <div className="conversation-diagnostics__item-tags">
-                    <Tag color={getSeverityTagColour(diagnostic.severity)}>{getSeverityLabel(diagnostic.severity)}</Tag>
-                    <Tag>{getCategoryLabel(diagnostic.category)}</Tag>
-                  </div>
-                  <div className="conversation-diagnostics__item-title">{diagnostic.title}</div>
-                  <div className="conversation-diagnostics__item-node">{diagnostic.nodeLabel}</div>
-                  <div className="conversation-diagnostics__item-description">{diagnostic.description}</div>
-                </div>
-                <aside className="conversation-diagnostics__item-details">
-                  <MetaRow label="Severity" value={getSeverityLabel(diagnostic.severity)} />
-                  <MetaRow label="Area" value={getCategoryLabel(diagnostic.category)} />
-                  <MetaRow label="Node" value={diagnostic.nodeLabel} />
-                  <Button
-                    className="conversation-diagnostics__jump-button"
-                    type="link"
-                    icon={<AimOutlined />}
-                    disabled={diagnostic.nodeId == null}
-                    onClick={() => jumpToNode(diagnostic)}
+          {filteredDiagnostics.map((diagnostic) => {
+            const isExpanded = expandedDiagnosticIds.has(diagnostic.id);
+
+            return (
+              <div key={diagnostic.id} className={`conversation-diagnostics__item conversation-diagnostics__item--${diagnostic.severity}`}>
+                <div className="conversation-diagnostics__item-accent" aria-hidden="true" />
+                <div className="conversation-diagnostics__item-panel">
+                  <button
+                    type="button"
+                    className="conversation-diagnostics__item-summary"
+                    aria-expanded={isExpanded}
+                    onClick={() => toggleDiagnostic(diagnostic.id)}
                   >
-                    View in Conversation
-                  </Button>
-                </aside>
+                    <span className="conversation-diagnostics__item-toggle" aria-hidden="true">
+                      {isExpanded ? <DownOutlined /> : <RightOutlined />}
+                    </span>
+                    <span className="conversation-diagnostics__item-summary-copy">
+                      <span className="conversation-diagnostics__item-title">{diagnostic.title}</span>
+                      <span className="conversation-diagnostics__item-node">{diagnostic.nodeLabel}</span>
+                    </span>
+                    <span className="conversation-diagnostics__item-tags">
+                      <Tag color={getSeverityTagColour(diagnostic.severity)}>{getSeverityLabel(diagnostic.severity)}</Tag>
+                      <Tag>{getCategoryLabel(diagnostic.category)}</Tag>
+                    </span>
+                  </button>
+                  {isExpanded && (
+                    <div className="conversation-diagnostics__item-body">
+                      <div className="conversation-diagnostics__item-main">
+                        <div className="conversation-diagnostics__item-description">{diagnostic.description}</div>
+                      </div>
+                      <aside className="conversation-diagnostics__item-details">
+                        <MetaRow label="Severity" value={getSeverityLabel(diagnostic.severity)} />
+                        <MetaRow label="Area" value={getCategoryLabel(diagnostic.category)} />
+                        <MetaRow label="Node" value={diagnostic.nodeLabel} />
+                        <Button
+                          className="conversation-diagnostics__jump-button"
+                          type="link"
+                          icon={<AimOutlined />}
+                          disabled={diagnostic.nodeId == null}
+                          onClick={() => jumpToNode(diagnostic)}
+                        >
+                          View in Conversation
+                        </Button>
+                      </aside>
+                    </div>
+                  )}
+                </div>
               </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
       )}
     </div>

From 840544e62c2e3cfb4ed2401423156883f7912204 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 21:55:07 +0200
Subject: [PATCH 10/29] Relax expanded diagnostics row spacing

---
 .../ConversationDiagnosticsModal.css                            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
index eb7b475..9739c6b 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
@@ -317,7 +317,7 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(13rem, 22rem);
   gap: $mediumLargeSpace;
-  padding: 0 $mediumLargeSpace $mediumLargeSpace calc($mediumLargeSpace + 36px);
+  padding: $smallMediumSpace $mediumLargeSpace $mediumLargeSpace calc($mediumLargeSpace + 36px);
   box-shadow: inset 0 1px 0 rgba(26, 36, 52, 0.08);
 }
 

From ee047ad04aae80d4d46008c629b3a8617cde4984 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 22:07:23 +0200
Subject: [PATCH 11/29] Add reusable diagnostics side panel

---
 .../ConversationDiagnosticsModal.css          | 168 ++++++++++++++++++
 .../ConversationDiagnosticsModal.tsx          |  32 +++-
 .../ConversationDiagnosticsModal/index.ts     |   1 +
 .../ConversationEditor/ConversationEditor.tsx |  22 ++-
 .../Conversations/Conversations.css           |   9 +
 .../Conversations/Conversations.tsx           |   6 +-
 app/src/containers/SidePanel/SidePanel.css    |  63 +++++++
 app/src/containers/SidePanel/SidePanel.tsx    |  29 +++
 app/src/containers/SidePanel/index.ts         |   1 +
 app/src/hooks/useStore.ts                     |   4 +-
 app/src/stores/index.ts                       |   3 +
 app/src/stores/sidePanelStore/index.ts        |   2 +
 .../sidePanelStore/side-panel-store.tsx       |  64 +++++++
 13 files changed, 394 insertions(+), 10 deletions(-)
 create mode 100644 app/src/containers/SidePanel/SidePanel.css
 create mode 100644 app/src/containers/SidePanel/SidePanel.tsx
 create mode 100644 app/src/containers/SidePanel/index.ts
 create mode 100644 app/src/stores/sidePanelStore/index.ts
 create mode 100644 app/src/stores/sidePanelStore/side-panel-store.tsx

diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
index 9739c6b..c76d778 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
@@ -10,6 +10,13 @@
   -webkit-font-smoothing: antialiased;
 }
 
+.conversation-diagnostics--side-panel {
+  height: 100%;
+  min-height: 0;
+  max-height: none;
+  color: $textColourPrimary;
+}
+
 .conversation-diagnostics__summary {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
@@ -227,6 +234,33 @@
   color: $linkColourTertiary;
 }
 
+.conversation-diagnostics__category-dropdown--dark.ant-select-dropdown {
+  background: #202831;
+  color: $textColourPrimary;
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.35),
+    0 0 0 1px rgba(255, 255, 255, 0.12);
+}
+
+.conversation-diagnostics__category-dropdown--dark.ant-select-dropdown .ant-select-item {
+  background: #202831;
+  color: $textColourPrimary;
+}
+
+.conversation-diagnostics__category-dropdown--dark.ant-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+  background: rgba(24, 144, 255, 0.16);
+  color: white;
+}
+
+.conversation-diagnostics__category-dropdown--dark.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+  background: rgba(24, 144, 255, 0.22);
+  color: white;
+}
+
+.conversation-diagnostics__category-dropdown--dark.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-state {
+  color: $blue4;
+}
+
 .conversation-diagnostics__list {
   display: flex;
   flex-direction: column;
@@ -453,3 +487,137 @@
     box-shadow: inset 0 1px 0 rgba(26, 36, 52, 0.1);
   }
 }
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__summary {
+  grid-template-columns: auto minmax(0, 1fr);
+  border-color: rgba(24, 144, 255, 0.45);
+  background: rgba(24, 144, 255, 0.06);
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
+    0 12px 28px rgba(0, 0, 0, 0.22);
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__summary .ant-btn {
+  grid-column: 1 / -1;
+  justify-self: stretch;
+  color: $textColourPrimary;
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__summary .ant-btn:hover,
+.conversation-diagnostics--side-panel .conversation-diagnostics__summary .ant-btn:focus {
+  color: white;
+  background: rgba(24, 144, 255, 0.16);
+  border-color: rgba(24, 144, 255, 0.7);
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__summary-title {
+  color: white;
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__summary-description {
+  color: #c8d2df;
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__toolbar {
+  grid-template-columns: 1fr;
+  gap: $smallMediumSpace;
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__toolbar .ant-segmented {
+  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.16);
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__toolbar .ant-segmented-item {
+  color: #c8d2df;
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__toolbar .ant-segmented-item-selected {
+  color: $blue4;
+  box-shadow: inset 0 -2px 0 $blue4;
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__toolbar .ant-segmented-thumb {
+  box-shadow: inset 0 -2px 0 $blue4;
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls {
+  grid-template-columns: 1fr;
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-input-affix-wrapper,
+.conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select.ant-select-outlined:not(.ant-select-customize-input),
+.conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select:not(.ant-select-customize-input) .ant-select-selector,
+.conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-btn {
+  background: rgba(14, 18, 23, 0.72);
+  border-color: rgba(255, 255, 255, 0.2);
+  color: $textColourPrimary;
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-input-affix-wrapper .ant-input,
+.conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select.ant-select-single .ant-select-selector .ant-select-selection-item,
+.conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select.ant-select-single .ant-select-selector .ant-select-selection-placeholder,
+.conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select:not(.ant-select-customize-input).ant-select-single .ant-select-selector .ant-select-selection-search-input {
+  color: $textColourPrimary;
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-input-affix-wrapper .ant-input::placeholder {
+  color: #9aa7b7;
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-input-prefix,
+.conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-input-clear-icon,
+.conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select .ant-select-arrow {
+  color: $blue4;
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__item {
+  background: rgba(255, 255, 255, 0.035);
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
+    0 10px 24px rgba(0, 0, 0, 0.2);
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__item-summary:hover,
+.conversation-diagnostics--side-panel .conversation-diagnostics__item-summary:focus-visible {
+  background: rgba(255, 255, 255, 0.055);
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__item-title {
+  color: white;
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__item-node,
+.conversation-diagnostics--side-panel .conversation-diagnostics__item-toggle {
+  color: #b6c1d0;
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__item-body {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__item-description {
+  color: #d5dee9;
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__item-details {
+  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.12);
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__meta-label {
+  color: #dfe7f2;
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__meta-value {
+  color: #eaf1f9;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__jump-button.ant-btn {
+  color: $blue4;
+}
+
+.conversation-diagnostics--side-panel .ant-empty-description {
+  color: #c8d2df;
+}
diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
index 2389d3e..326d94a 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
@@ -12,6 +12,7 @@ import {
   SearchOutlined,
   WarningOutlined,
 } from '@ant-design/icons';
+import classnames from 'classnames';
 import { observer } from 'mobx-react';
 
 import { useStore } from 'hooks/useStore';
@@ -25,7 +26,8 @@ import type { ConversationDiagnostic, ConversationDiagnosticCategory, Conversati
 import './ConversationDiagnosticsModal.css';
 
 type Props = {
-  globalModalId: string;
+  globalModalId?: string;
+  variant?: 'modal' | 'side-panel';
 };
 
 type FilterValue = 'all' | ConversationDiagnosticSeverity;
@@ -51,7 +53,7 @@ function getCategoryLabel(category: ConversationDiagnostic['category']): string
   return 'Content';
 }
 
-function ConversationDiagnosticsModal({ globalModalId }: Props) {
+function ConversationDiagnosticsContent({ globalModalId, variant = 'modal' }: Props) {
   const dataStore = useStore<DataStore>('data');
   const defStore = useStore<DefStore>('def');
   const modalStore = useStore<ModalStore>('modal');
@@ -123,7 +125,7 @@ function ConversationDiagnosticsModal({ globalModalId }: Props) {
     if (diagnostic.nodeId == null) return;
 
     nodeStore.setActiveNode(diagnostic.nodeId);
-    modalStore.closeModal(globalModalId);
+    if (globalModalId != null) modalStore.closeModal(globalModalId);
     window.setTimeout(() => nodeStore.scrollToActiveNode(true), 50);
   };
 
@@ -156,6 +158,8 @@ function ConversationDiagnosticsModal({ globalModalId }: Props) {
   };
 
   useEffect(() => {
+    if (globalModalId == null) return;
+
     modalStore.setTitle('Conversation Diagnostics', globalModalId);
     modalStore.setWidth('min(74rem, 86vw)', globalModalId);
     modalStore.setShowOkButton(false, globalModalId);
@@ -172,7 +176,11 @@ function ConversationDiagnosticsModal({ globalModalId }: Props) {
   }, [diagnostics.map((diagnostic) => diagnostic.id).join('|')]);
 
   return (
-    <div className="conversation-diagnostics">
+    <div
+      className={classnames('conversation-diagnostics', {
+        'conversation-diagnostics--side-panel': variant === 'side-panel',
+      })}
+    >
       <section className={`conversation-diagnostics__summary conversation-diagnostics__summary--${getSummaryTone(errorCount, warningCount, infoCount)}`}>
         <div className="conversation-diagnostics__summary-icon" aria-hidden="true">
           {errorCount > 0 ? <ExclamationCircleOutlined /> : warningCount > 0 ? <WarningOutlined /> : infoCount > 0 ? <InfoCircleOutlined /> : <CheckCircleOutlined />}
@@ -212,7 +220,13 @@ function ConversationDiagnosticsModal({ globalModalId }: Props) {
             />
             <Select<CategoryFilterValue>
               className="conversation-diagnostics__category-select"
-              classNames={{ popup: { root: 'conversation-diagnostics__category-dropdown' } }}
+              classNames={{
+                popup: {
+                  root: classnames('conversation-diagnostics__category-dropdown', {
+                    'conversation-diagnostics__category-dropdown--dark': variant === 'side-panel',
+                  }),
+                },
+              }}
               value={categoryFilter}
               onChange={setCategoryFilter}
               options={[
@@ -311,4 +325,10 @@ function MetaRow({ label, value }: { label: string; value: string }) {
   );
 }
 
-export const ObservingConversationDiagnosticsModal = observer(ConversationDiagnosticsModal);
+export const ObservingConversationDiagnosticsModal = observer(ConversationDiagnosticsContent);
+
+function ConversationDiagnosticsPanel() {
+  return <ConversationDiagnosticsContent variant="side-panel" />;
+}
+
+export const ObservingConversationDiagnosticsPanel = observer(ConversationDiagnosticsPanel);
diff --git a/app/src/components/ConversationDiagnosticsModal/index.ts b/app/src/components/ConversationDiagnosticsModal/index.ts
index 1bb5eb9..190d596 100644
--- a/app/src/components/ConversationDiagnosticsModal/index.ts
+++ b/app/src/components/ConversationDiagnosticsModal/index.ts
@@ -1 +1,2 @@
 export { ObservingConversationDiagnosticsModal as ConversationDiagnosticsModal } from './ConversationDiagnosticsModal';
+export { ObservingConversationDiagnosticsPanel as ConversationDiagnosticsPanel } from './ConversationDiagnosticsModal';
diff --git a/app/src/containers/ConversationEditor/ConversationEditor.tsx b/app/src/containers/ConversationEditor/ConversationEditor.tsx
index 2b5e86c..e793adb 100644
--- a/app/src/containers/ConversationEditor/ConversationEditor.tsx
+++ b/app/src/containers/ConversationEditor/ConversationEditor.tsx
@@ -9,13 +9,15 @@ import { updateConversation } from 'services/api';
 import { regenerateConversationId } from 'utils/conversation-utils';
 import { detectType } from 'utils/node-utils';
 import { useStore } from 'hooks/useStore';
+import { useWindowSize } from 'hooks/useWindowSize';
 import { DialogEditor } from 'components/DialogEditor';
 import { DialogTextArea } from 'components/DialogTextArea';
-import { ConversationDiagnosticsModal } from 'components/ConversationDiagnosticsModal';
+import { ConversationDiagnosticsModal, ConversationDiagnosticsPanel } from 'components/ConversationDiagnosticsModal';
 import { Split } from 'components/Split';
 import { NodeStore } from 'stores/nodeStore/node-store';
 import { DataStore } from 'stores/dataStore/data-store';
 import { ModalStore } from 'stores/modalStore/modal-store';
+import { SidePanelStore } from 'stores/sidePanelStore/side-panel-store';
 import { positiveActionButtonProps } from 'utils/antd-button-utils';
 import { ElementNodeType, ConversationAssetType } from 'types';
 
@@ -61,7 +63,9 @@ function ConversationEditor({ conversationAsset }: Props) {
   const nodeStore = useStore<NodeStore>('node');
   const dataStore = useStore<DataStore>('data');
   const modalStore = useStore<ModalStore>('modal');
+  const sidePanelStore = useStore<SidePanelStore>('sidePanel');
   const [isAllExpanded, setIsAllExpanded] = useState<boolean>(true);
+  const windowSize = useWindowSize();
 
   const { unsavedActiveConversationAsset } = dataStore;
   const { activeNode, rebuild } = nodeStore;
@@ -106,6 +110,16 @@ function ConversationEditor({ conversationAsset }: Props) {
     dataStore.setUnsavedConversationUIName(event.target.value.trim());
   };
 
+  const onDiagnosticsButtonClicked = () => {
+    if ((windowSize.width ?? 0) >= 1280) {
+      sidePanelStore.setPanelContent(ConversationDiagnosticsPanel, {}, 'Conversation Diagnostics');
+      return;
+    }
+
+    sidePanelStore.closePanel();
+    modalStore.setModelContent(ConversationDiagnosticsModal, {}, 'global1');
+  };
+
   // onMount
   useEffect(() => {
     const unsavedConversationAsset = { ...toJS(conversationAsset) };
@@ -117,6 +131,10 @@ function ConversationEditor({ conversationAsset }: Props) {
     createNewUnsavedConversation();
   }, [conversationAsset]);
 
+  useEffect(() => {
+    if (windowSize.width != null && windowSize.width < 1280) sidePanelStore.closePanel();
+  }, [sidePanelStore, windowSize.width]);
+
   if (unsavedActiveConversationAsset == null) return null;
 
   const { conversation } = unsavedActiveConversationAsset;
@@ -201,7 +219,7 @@ function ConversationEditor({ conversationAsset }: Props) {
               type="primary"
               size="small"
               icon={<WarningOutlined />}
-              onClick={() => modalStore.setModelContent(ConversationDiagnosticsModal, {}, 'global1')}
+              onClick={onDiagnosticsButtonClicked}
             />
           </Tooltip>
         </div>
diff --git a/app/src/containers/Conversations/Conversations.css b/app/src/containers/Conversations/Conversations.css
index 8cbeb9d..aeb95fa 100644
--- a/app/src/containers/Conversations/Conversations.css
+++ b/app/src/containers/Conversations/Conversations.css
@@ -63,7 +63,16 @@
     height: 32px;
   }
 
+  &__workspace {
+    display: flex;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+  }
+
   &__main {
+    flex: 1 1 auto;
     height: 100%;
     min-width: 0;
     min-height: 0;
diff --git a/app/src/containers/Conversations/Conversations.tsx b/app/src/containers/Conversations/Conversations.tsx
index 9adaa7f..38065f8 100644
--- a/app/src/containers/Conversations/Conversations.tsx
+++ b/app/src/containers/Conversations/Conversations.tsx
@@ -14,6 +14,7 @@ import type { SplitHandleDoubleClickContext } from 'components/Split';
 
 import { ConversationTree } from '../ConversationTree';
 import { ConversationEditor } from '../ConversationEditor';
+import { SidePanel } from '../SidePanel';
 import { SplashScreen } from '../SplashScreen';
 
 import './Conversations.css';
@@ -122,7 +123,10 @@ const Conversations = () => {
             )}
           </div>
         </div>
-        <div className="conversations__main">{mainView}</div>
+        <div className="conversations__workspace">
+          <div className="conversations__main">{mainView}</div>
+          <SidePanel />
+        </div>
       </Split>
     </div>
   );
diff --git a/app/src/containers/SidePanel/SidePanel.css b/app/src/containers/SidePanel/SidePanel.css
new file mode 100644
index 0000000..9916fab
--- /dev/null
+++ b/app/src/containers/SidePanel/SidePanel.css
@@ -0,0 +1,63 @@
+@import '../../css/constants.css';
+
+.side-panel {
+  display: flex;
+  flex: 0 0 var(--side-panel-width);
+  flex-direction: column;
+  width: var(--side-panel-width);
+  min-width: 24rem;
+  max-width: min(34rem, 42vw);
+  min-height: 0;
+  color: $textColourPrimary;
+  background:
+    radial-gradient(circle at top right, rgba(42, 176, 247, 0.12), transparent 28rem),
+    #1c2229;
+  box-shadow:
+    inset 1px 0 0 rgba(255, 255, 255, 0.08),
+    -10px 0 28px rgba(0, 0, 0, 0.25);
+}
+
+.side-panel__header {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  gap: $mediumSpace;
+  min-height: 58px;
+  padding: $mediumSpace $mediumLargeSpace $smallMediumSpace $mediumLargeSpace;
+}
+
+.side-panel__title {
+  min-width: 0;
+  overflow: hidden;
+  color: white;
+  font-size: $fontSizeLarge;
+  font-weight: $fontWeightSemibold;
+  line-height: $lineHeightLarge;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.side-panel__close.ant-btn {
+  flex: 0 0 auto;
+  min-width: 40px;
+  min-height: 40px;
+  color: #b6c1d0;
+}
+
+.side-panel__close.ant-btn:hover,
+.side-panel__close.ant-btn:focus {
+  color: white;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.side-panel__close.ant-btn:active {
+  transform: scale(0.96);
+}
+
+.side-panel__content {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  padding: 0 $mediumLargeSpace $mediumLargeSpace $mediumLargeSpace;
+}
diff --git a/app/src/containers/SidePanel/SidePanel.tsx b/app/src/containers/SidePanel/SidePanel.tsx
new file mode 100644
index 0000000..9443647
--- /dev/null
+++ b/app/src/containers/SidePanel/SidePanel.tsx
@@ -0,0 +1,29 @@
+import { isValidElement } from 'react';
+import type { CSSProperties } from 'react';
+import { Button } from 'antd';
+import { CloseOutlined } from '@ant-design/icons';
+import { observer } from 'mobx-react';
+
+import { useStore } from 'hooks/useStore';
+import { SidePanelStore } from 'stores/sidePanelStore/side-panel-store';
+
+import './SidePanel.css';
+
+function SidePanel() {
+  const sidePanelStore = useStore<SidePanelStore>('sidePanel');
+  const { panel, options } = sidePanelStore;
+
+  if (!options.isVisible || panel == null) return null;
+
+  return (
+    <aside className="side-panel" style={{ '--side-panel-width': options.width } as CSSProperties}>
+      <header className="side-panel__header">
+        <div className="side-panel__title">{options.title}</div>
+        <Button aria-label="Close side panel" className="side-panel__close" type="text" icon={<CloseOutlined />} onClick={sidePanelStore.closePanel} />
+      </header>
+      <div className="side-panel__content">{isValidElement(panel) ? panel : null}</div>
+    </aside>
+  );
+}
+
+export const ObservingSidePanel = observer(SidePanel);
diff --git a/app/src/containers/SidePanel/index.ts b/app/src/containers/SidePanel/index.ts
new file mode 100644
index 0000000..28ed05c
--- /dev/null
+++ b/app/src/containers/SidePanel/index.ts
@@ -0,0 +1 @@
+export { ObservingSidePanel as SidePanel } from './SidePanel';
diff --git a/app/src/hooks/useStore.ts b/app/src/hooks/useStore.ts
index 33847fb..1ba886d 100644
--- a/app/src/hooks/useStore.ts
+++ b/app/src/hooks/useStore.ts
@@ -5,9 +5,10 @@ import { NodeStore } from 'stores/nodeStore/node-store';
 import { DataStore } from 'stores/dataStore/data-store';
 import { ErrorStore } from 'stores/errorStore/error-store';
 import { ModalStore } from 'stores/modalStore/modal-store';
+import { SidePanelStore } from 'stores/sidePanelStore/side-panel-store';
 import { DefStore } from 'stores/defStore/def-store';
 
-export const useStore = <T extends DataStore | NodeStore | ModalStore | DefStore | ErrorStore>(storeType: string): T => {
+export const useStore = <T extends DataStore | NodeStore | ModalStore | SidePanelStore | DefStore | ErrorStore>(storeType: string): T => {
   const store = useContext(storeContext);
 
   if (store == null) {
@@ -17,6 +18,7 @@ export const useStore = <T extends DataStore | NodeStore | ModalStore | DefStore
   if (storeType === 'data') return store.dataStore as T;
   if (storeType === 'node') return store.nodeStore as T;
   if (storeType === 'modal') return store.modalStore as T;
+  if (storeType === 'sidePanel') return store.sidePanelStore as T;
   if (storeType === 'def') return store.defStore as T;
   if (storeType === 'error') return store.errorStore as T;
 
diff --git a/app/src/stores/index.ts b/app/src/stores/index.ts
index a2b9c4d..9a0e724 100644
--- a/app/src/stores/index.ts
+++ b/app/src/stores/index.ts
@@ -1,6 +1,7 @@
 import { dataStore } from './dataStore';
 import { nodeStore } from './nodeStore';
 import { modalStore } from './modalStore';
+import { sidePanelStore } from './sidePanelStore';
 import { defStore } from './defStore';
 import { errorStore } from './errorStore';
 
@@ -9,6 +10,7 @@ const stores = {
   dataStore,
   nodeStore,
   modalStore,
+  sidePanelStore,
   defStore,
   errorStore,
 };
@@ -16,6 +18,7 @@ const stores = {
 export * from './dataStore';
 export * from './nodeStore';
 export * from './modalStore';
+export * from './sidePanelStore';
 export * from './defStore';
 export * from './errorStore';
 
diff --git a/app/src/stores/sidePanelStore/index.ts b/app/src/stores/sidePanelStore/index.ts
new file mode 100644
index 0000000..8f1aa62
--- /dev/null
+++ b/app/src/stores/sidePanelStore/index.ts
@@ -0,0 +1,2 @@
+export { sidePanelStore } from './side-panel-store';
+export type { SidePanelStore } from './side-panel-store';
diff --git a/app/src/stores/sidePanelStore/side-panel-store.tsx b/app/src/stores/sidePanelStore/side-panel-store.tsx
new file mode 100644
index 0000000..8406233
--- /dev/null
+++ b/app/src/stores/sidePanelStore/side-panel-store.tsx
@@ -0,0 +1,64 @@
+import type { ElementType, ReactElement } from 'react';
+import { action, makeObservable, observable } from 'mobx';
+
+import { getDevPreservedStore } from '../dev-preserved-store';
+
+type SidePanelOptions = {
+  isVisible: boolean;
+  title: string | ReactElement;
+  width: string;
+  props: object;
+};
+
+class SidePanelStore {
+  panel: ElementType | ReactElement | null = null;
+  options: SidePanelOptions = observable.object(
+    {
+      isVisible: false,
+      title: '',
+      width: '31rem',
+      props: {},
+    },
+    {},
+    { deep: false },
+  );
+  private panelVersion = 0;
+
+  constructor() {
+    makeObservable(this, {
+      panel: observable.ref,
+      options: observable.shallow,
+
+      setPanelContent: action,
+      closePanel: action,
+      reset: action,
+    });
+  }
+
+  setPanelContent(PanelContent: ElementType, props = {}, title: string | ReactElement = '', show = true): void {
+    this.panelVersion += 1;
+    this.panel = <PanelContent key={`side-panel-${this.panelVersion}`} {...props} />;
+    this.options = observable.object(
+      {
+        isVisible: show,
+        title,
+        width: '31rem',
+        props,
+      },
+      {},
+      { deep: false },
+    );
+  }
+
+  closePanel = (): void => {
+    this.reset();
+  };
+
+  reset = (): void => {
+    this.options.isVisible = false;
+  };
+}
+
+export const sidePanelStore = getDevPreservedStore('__conversetekSidePanelStore', () => new SidePanelStore(), SidePanelStore.prototype);
+
+export { SidePanelStore };

From 1e155f0e52858465bdb5ac6d6e7eb5aeb1e66c94 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 22:13:22 +0200
Subject: [PATCH 12/29] Polish diagnostics side panel behaviour

---
 .../ConversationDiagnosticsModal.css          | 14 +++++++++-
 .../ConversationEditor/ConversationEditor.tsx | 18 ++++++------
 app/src/containers/SidePanel/SidePanel.css    | 28 +++++++++++++++++++
 app/src/containers/SidePanel/SidePanel.tsx    | 20 +++++++++++--
 4 files changed, 66 insertions(+), 14 deletions(-)

diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
index c76d778..df14d8a 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
@@ -594,6 +594,9 @@
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__item-body {
+  grid-template-columns: 1fr;
+  gap: $mediumSpace;
+  padding-left: $mediumLargeSpace;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
@@ -602,7 +605,16 @@
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__item-details {
-  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.12);
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: $smallMediumSpace;
+  padding-top: $smallMediumSpace;
+  padding-left: 0;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__jump-button.ant-btn {
+  grid-column: 1 / -1;
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__meta-label {
diff --git a/app/src/containers/ConversationEditor/ConversationEditor.tsx b/app/src/containers/ConversationEditor/ConversationEditor.tsx
index e793adb..040eca9 100644
--- a/app/src/containers/ConversationEditor/ConversationEditor.tsx
+++ b/app/src/containers/ConversationEditor/ConversationEditor.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import type { ChangeEvent, ComponentProps } from 'react';
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react';
-import { message, Button, Row, Col, Form, Input, Tabs, Popconfirm, Tooltip } from 'antd';
+import { message, Button, Row, Col, Form, Input, Tabs, Popconfirm } from 'antd';
 import { ArrowRightOutlined, MenuFoldOutlined, MenuUnfoldOutlined, RetweetOutlined, SaveOutlined, WarningOutlined } from '@ant-design/icons';
 
 import { updateConversation } from 'services/api';
@@ -213,15 +213,13 @@ function ConversationEditor({ conversationAsset }: Props) {
             }}
             icon={<ArrowRightOutlined />}
           />
-          <Tooltip title="Run conversation diagnostics">
-            <Button
-              className="conversation-editor__diagnostics-button button-secondary"
-              type="primary"
-              size="small"
-              icon={<WarningOutlined />}
-              onClick={onDiagnosticsButtonClicked}
-            />
-          </Tooltip>
+          <Button
+            className="conversation-editor__diagnostics-button button-secondary"
+            type="primary"
+            size="small"
+            icon={<WarningOutlined />}
+            onClick={onDiagnosticsButtonClicked}
+          />
         </div>
 
         <div className="conversation-editor__buttons">
diff --git a/app/src/containers/SidePanel/SidePanel.css b/app/src/containers/SidePanel/SidePanel.css
index 9916fab..55ba588 100644
--- a/app/src/containers/SidePanel/SidePanel.css
+++ b/app/src/containers/SidePanel/SidePanel.css
@@ -15,6 +15,22 @@
   box-shadow:
     inset 1px 0 0 rgba(255, 255, 255, 0.08),
     -10px 0 28px rgba(0, 0, 0, 0.25);
+  opacity: 1;
+  transform: translateX(0);
+  transition-property: transform, opacity;
+  transition-duration: 180ms;
+  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+  will-change: transform, opacity;
+}
+
+.side-panel--open {
+  animation: side-panel-enter 180ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.side-panel--closing {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(100%);
 }
 
 .side-panel__header {
@@ -61,3 +77,15 @@
   min-height: 0;
   padding: 0 $mediumLargeSpace $mediumLargeSpace $mediumLargeSpace;
 }
+
+@keyframes side-panel-enter {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
diff --git a/app/src/containers/SidePanel/SidePanel.tsx b/app/src/containers/SidePanel/SidePanel.tsx
index 9443647..560d93d 100644
--- a/app/src/containers/SidePanel/SidePanel.tsx
+++ b/app/src/containers/SidePanel/SidePanel.tsx
@@ -1,4 +1,4 @@
-import { isValidElement } from 'react';
+import { isValidElement, useEffect, useState } from 'react';
 import type { CSSProperties } from 'react';
 import { Button } from 'antd';
 import { CloseOutlined } from '@ant-design/icons';
@@ -12,11 +12,25 @@ import './SidePanel.css';
 function SidePanel() {
   const sidePanelStore = useStore<SidePanelStore>('sidePanel');
   const { panel, options } = sidePanelStore;
+  const [shouldRender, setShouldRender] = useState(options.isVisible);
 
-  if (!options.isVisible || panel == null) return null;
+  useEffect(() => {
+    if (options.isVisible) {
+      setShouldRender(true);
+      return undefined;
+    }
+
+    const timeoutId = window.setTimeout(() => setShouldRender(false), 180);
+    return () => window.clearTimeout(timeoutId);
+  }, [options.isVisible]);
+
+  if (!shouldRender || panel == null) return null;
 
   return (
-    <aside className="side-panel" style={{ '--side-panel-width': options.width } as CSSProperties}>
+    <aside
+      className={`side-panel ${options.isVisible ? 'side-panel--open' : 'side-panel--closing'}`}
+      style={{ '--side-panel-width': options.width } as CSSProperties}
+    >
       <header className="side-panel__header">
         <div className="side-panel__title">{options.title}</div>
         <Button aria-label="Close side panel" className="side-panel__close" type="text" icon={<CloseOutlined />} onClick={sidePanelStore.closePanel} />

From ac0854dca0a9c99d175c8cff7a829d3ea397ae68 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 22:16:30 +0200
Subject: [PATCH 13/29] Make side panel resizable

---
 app/src/containers/SidePanel/SidePanel.css    | 43 ++++++++++-
 app/src/containers/SidePanel/SidePanel.tsx    | 74 ++++++++++++++++++-
 .../sidePanelStore/side-panel-store.tsx       | 16 +++-
 3 files changed, 129 insertions(+), 4 deletions(-)

diff --git a/app/src/containers/SidePanel/SidePanel.css b/app/src/containers/SidePanel/SidePanel.css
index 55ba588..dd11d8c 100644
--- a/app/src/containers/SidePanel/SidePanel.css
+++ b/app/src/containers/SidePanel/SidePanel.css
@@ -1,12 +1,13 @@
 @import '../../css/constants.css';
 
 .side-panel {
+  position: relative;
   display: flex;
   flex: 0 0 var(--side-panel-width);
   flex-direction: column;
   width: var(--side-panel-width);
   min-width: 24rem;
-  max-width: min(34rem, 42vw);
+  max-width: min(760px, 55vw);
   min-height: 0;
   color: $textColourPrimary;
   background:
@@ -23,6 +24,46 @@
   will-change: transform, opacity;
 }
 
+.side-panel__resize-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -4px;
+  z-index: 2;
+  width: 8px;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.side-panel__resize-handle::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 4px;
+  width: 1px;
+  background: rgba(255, 255, 255, 0.08);
+  transition-property: background-color, box-shadow;
+  transition-duration: 120ms;
+  transition-timing-function: ease-out;
+}
+
+.side-panel__resize-handle:hover::before,
+.side-panel__resize-handle:focus-visible::before,
+.side-panel-resizing .side-panel__resize-handle::before {
+  background: rgba(42, 176, 247, 0.95);
+  box-shadow: 0 0 0 1px rgba(42, 176, 247, 0.24), 0 0 8px rgba(42, 176, 247, 0.44);
+}
+
+.side-panel__resize-handle:focus-visible {
+  outline: none;
+}
+
+.side-panel-resizing {
+  cursor: col-resize;
+  user-select: none;
+}
+
 .side-panel--open {
   animation: side-panel-enter 180ms cubic-bezier(0.2, 0, 0, 1);
 }
diff --git a/app/src/containers/SidePanel/SidePanel.tsx b/app/src/containers/SidePanel/SidePanel.tsx
index 560d93d..9ae0410 100644
--- a/app/src/containers/SidePanel/SidePanel.tsx
+++ b/app/src/containers/SidePanel/SidePanel.tsx
@@ -1,5 +1,5 @@
 import { isValidElement, useEffect, useState } from 'react';
-import type { CSSProperties } from 'react';
+import type { CSSProperties, KeyboardEvent, PointerEvent } from 'react';
 import { Button } from 'antd';
 import { CloseOutlined } from '@ant-design/icons';
 import { observer } from 'mobx-react';
@@ -9,6 +9,15 @@ import { SidePanelStore } from 'stores/sidePanelStore/side-panel-store';
 
 import './SidePanel.css';
 
+const minSidePanelWidth = 360;
+const maxSidePanelWidth = 760;
+const keyboardResizeStep = 24;
+
+function clampPanelWidth(width: number): number {
+  const viewportMaxWidth = Math.floor(window.innerWidth * 0.55);
+  return Math.max(minSidePanelWidth, Math.min(width, Math.min(maxSidePanelWidth, viewportMaxWidth)));
+}
+
 function SidePanel() {
   const sidePanelStore = useStore<SidePanelStore>('sidePanel');
   const { panel, options } = sidePanelStore;
@@ -26,11 +35,74 @@ function SidePanel() {
 
   if (!shouldRender || panel == null) return null;
 
+  const setPanelWidth = (nextWidth: number) => {
+    sidePanelStore.setWidth(`${clampPanelWidth(nextWidth)}px`);
+  };
+
+  const getCurrentPanelWidth = () => {
+    const sidePanelElement = document.querySelector<HTMLElement>('.side-panel');
+    return sidePanelElement?.getBoundingClientRect().width ?? minSidePanelWidth;
+  };
+
+  const beginResize = (event: PointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0) return;
+
+    event.preventDefault();
+    const sidePanelElement = event.currentTarget.closest<HTMLElement>('.side-panel');
+    if (sidePanelElement == null) return;
+
+    const panelRight = sidePanelElement.getBoundingClientRect().right;
+    const target = event.currentTarget;
+    target.setPointerCapture(event.pointerId);
+    document.body.classList.add('side-panel-resizing');
+
+    const handleMove = (moveEvent: globalThis.PointerEvent) => {
+      setPanelWidth(panelRight - moveEvent.clientX);
+    };
+
+    const handleUp = (upEvent: globalThis.PointerEvent) => {
+      if (target.hasPointerCapture(upEvent.pointerId)) target.releasePointerCapture(upEvent.pointerId);
+      document.body.classList.remove('side-panel-resizing');
+      window.removeEventListener('pointermove', handleMove);
+      window.removeEventListener('pointerup', handleUp);
+    };
+
+    window.addEventListener('pointermove', handleMove);
+    window.addEventListener('pointerup', handleUp);
+  };
+
+  const handleResizeKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      setPanelWidth(getCurrentPanelWidth() + keyboardResizeStep);
+    }
+
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      setPanelWidth(getCurrentPanelWidth() - keyboardResizeStep);
+    }
+
+    if (event.key === 'Home') {
+      event.preventDefault();
+      sidePanelStore.resetWidth();
+    }
+  };
+
   return (
     <aside
       className={`side-panel ${options.isVisible ? 'side-panel--open' : 'side-panel--closing'}`}
       style={{ '--side-panel-width': options.width } as CSSProperties}
     >
+      <div
+        aria-label="Resize side panel"
+        aria-orientation="vertical"
+        className="side-panel__resize-handle"
+        role="separator"
+        tabIndex={0}
+        onDoubleClick={() => sidePanelStore.resetWidth()}
+        onKeyDown={handleResizeKeyDown}
+        onPointerDown={beginResize}
+      />
       <header className="side-panel__header">
         <div className="side-panel__title">{options.title}</div>
         <Button aria-label="Close side panel" className="side-panel__close" type="text" icon={<CloseOutlined />} onClick={sidePanelStore.closePanel} />
diff --git a/app/src/stores/sidePanelStore/side-panel-store.tsx b/app/src/stores/sidePanelStore/side-panel-store.tsx
index 8406233..7e07beb 100644
--- a/app/src/stores/sidePanelStore/side-panel-store.tsx
+++ b/app/src/stores/sidePanelStore/side-panel-store.tsx
@@ -10,13 +10,15 @@ type SidePanelOptions = {
   props: object;
 };
 
+const defaultSidePanelWidth = '31rem';
+
 class SidePanelStore {
   panel: ElementType | ReactElement | null = null;
   options: SidePanelOptions = observable.object(
     {
       isVisible: false,
       title: '',
-      width: '31rem',
+      width: defaultSidePanelWidth,
       props: {},
     },
     {},
@@ -30,6 +32,8 @@ class SidePanelStore {
       options: observable.shallow,
 
       setPanelContent: action,
+      setWidth: action,
+      resetWidth: action,
       closePanel: action,
       reset: action,
     });
@@ -42,7 +46,7 @@ class SidePanelStore {
       {
         isVisible: show,
         title,
-        width: '31rem',
+        width: this.options.width || defaultSidePanelWidth,
         props,
       },
       {},
@@ -50,6 +54,14 @@ class SidePanelStore {
     );
   }
 
+  setWidth(width: string): void {
+    this.options.width = width;
+  }
+
+  resetWidth(): void {
+    this.options.width = defaultSidePanelWidth;
+  }
+
   closePanel = (): void => {
     this.reset();
   };

From cd636fa4d139d711de7443baa5cea6fafafc3195 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 22:19:37 +0200
Subject: [PATCH 14/29] Use display prompt numbers in diagnostics

---
 .../conversation-diagnostics-utils.test.ts    | 21 +++++++++++++++++++
 .../utils/conversation-diagnostics-utils.ts   |  2 +-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/app/src/utils/__tests__/conversation-diagnostics-utils.test.ts b/app/src/utils/__tests__/conversation-diagnostics-utils.test.ts
index c003fff..fd636c8 100644
--- a/app/src/utils/__tests__/conversation-diagnostics-utils.test.ts
+++ b/app/src/utils/__tests__/conversation-diagnostics-utils.test.ts
@@ -115,6 +115,27 @@ describe('conversation diagnostics', () => {
     expect(promptDiagnostics.some((diagnostic) => diagnostic.severity === 'warning' && diagnostic.title.startsWith('Prompt node'))).toBe(false);
   });
 
+  it('shows prompt labels as one-based display numbers', () => {
+    const conversationAsset = makeBasicConversation();
+    const root = conversationAsset.conversation.roots[0];
+    const secondPrompt = createPromptNode(1);
+    const commanderResponse = createResponseNode();
+    commanderResponse.responseText = 'Keep going.';
+    commanderResponse.nextNodeIndex = -1;
+    secondPrompt.text = '';
+    secondPrompt.branches = [commanderResponse];
+    root.nextNodeIndex = 1;
+    conversationAsset.conversation.nodes.push(secondPrompt);
+
+    const diagnostics = buildConversationDiagnostics({ conversationAsset, operationDefinitions: [] });
+
+    expect(diagnostics).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ severity: 'info', title: 'Prompt node has no text', nodeId: getId(secondPrompt), nodeLabel: 'Prompt #2' }),
+      ]),
+    );
+  });
+
   it('reports empty prompt nodes that have no responses or actions', () => {
     const conversationAsset = makeBasicConversation();
     const prompt = conversationAsset.conversation.nodes[0];
diff --git a/app/src/utils/conversation-diagnostics-utils.ts b/app/src/utils/conversation-diagnostics-utils.ts
index 66d5e02..c9e15bc 100644
--- a/app/src/utils/conversation-diagnostics-utils.ts
+++ b/app/src/utils/conversation-diagnostics-utils.ts
@@ -436,7 +436,7 @@ function createDiagnostic({
 function getPromptNodeContext(node: PromptNodeType): NodeContext {
   return {
     nodeId: getId(node),
-    nodeLabel: `Prompt #${node.index}`,
+    nodeLabel: `Prompt #${node.index + 1}`,
   };
 }
 

From c5afbe6cc1657082d4782c809d964065ed1445d1 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 22:26:48 +0200
Subject: [PATCH 15/29] Tighten diagnostics side panel palette

---
 .../ConversationDiagnosticsModal.css          | 54 +++++++++++++------
 app/src/containers/SidePanel/SidePanel.css    | 10 ++--
 2 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
index df14d8a..e4956a4 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
@@ -489,20 +489,27 @@
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__summary {
-  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: $smallMediumSpace;
+  padding: $smallMediumSpace;
   border-color: rgba(24, 144, 255, 0.45);
-  background: rgba(24, 144, 255, 0.06);
-  box-shadow:
-    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
-    0 12px 28px rgba(0, 0, 0, 0.22);
+  background: $backgroundTertiary;
+  box-shadow: inset 0 0 0 1px rgba(24, 144, 255, 0.16);
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__summary-icon {
+  width: 24px;
+  height: 24px;
+  font-size: 13px;
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__summary .ant-btn {
-  grid-column: 1 / -1;
-  justify-self: stretch;
+  grid-column: auto;
+  justify-self: end;
+  min-height: 34px;
   color: $textColourPrimary;
-  background: rgba(255, 255, 255, 0.05);
-  border-color: rgba(255, 255, 255, 0.2);
+  background: $backgroundPrimary;
+  border-color: $borderTertiary;
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__summary .ant-btn:hover,
@@ -514,32 +521,47 @@
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__summary-title {
   color: white;
+  font-size: $fontSizeNormal;
+  line-height: $lineHeightNormal;
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__summary-description {
   color: #c8d2df;
+  margin-top: 0;
+  line-height: $lineHeightSmall;
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar {
   grid-template-columns: 1fr;
-  gap: $smallMediumSpace;
+  gap: $smallSpace;
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar .ant-segmented {
+  width: 100%;
   box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.16);
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar .ant-segmented-item {
-  color: #c8d2df;
+  flex: 1 1 0;
+  min-width: 0;
+  color: $textColourSecondary;
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__toolbar .ant-segmented-item:hover,
+.conversation-diagnostics--side-panel .conversation-diagnostics__toolbar .ant-segmented-item:focus-visible {
+  color: white;
+  background: rgba(24, 144, 255, 0.1);
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar .ant-segmented-item-selected {
-  color: $blue4;
-  box-shadow: inset 0 -2px 0 $blue4;
+  color: white;
+  background: transparent;
+  box-shadow: inset 0 -2px 0 $linkColourPrimary;
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar .ant-segmented-thumb {
-  box-shadow: inset 0 -2px 0 $blue4;
+  background: rgba(24, 144, 255, 0.16);
+  box-shadow: inset 0 -2px 0 $linkColourPrimary;
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls {
@@ -550,8 +572,8 @@
 .conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select.ant-select-outlined:not(.ant-select-customize-input),
 .conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select:not(.ant-select-customize-input) .ant-select-selector,
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-btn {
-  background: rgba(14, 18, 23, 0.72);
-  border-color: rgba(255, 255, 255, 0.2);
+  background: $backgroundTertiary;
+  border-color: $borderTertiary;
   color: $textColourPrimary;
 }
 
diff --git a/app/src/containers/SidePanel/SidePanel.css b/app/src/containers/SidePanel/SidePanel.css
index dd11d8c..63d506a 100644
--- a/app/src/containers/SidePanel/SidePanel.css
+++ b/app/src/containers/SidePanel/SidePanel.css
@@ -10,9 +10,7 @@
   max-width: min(760px, 55vw);
   min-height: 0;
   color: $textColourPrimary;
-  background:
-    radial-gradient(circle at top right, rgba(42, 176, 247, 0.12), transparent 28rem),
-    #1c2229;
+  background: $backgroundPrimary;
   box-shadow:
     inset 1px 0 0 rgba(255, 255, 255, 0.08),
     -10px 0 28px rgba(0, 0, 0, 0.25);
@@ -80,8 +78,8 @@
   align-items: center;
   justify-content: space-between;
   gap: $mediumSpace;
-  min-height: 58px;
-  padding: $mediumSpace $mediumLargeSpace $smallMediumSpace $mediumLargeSpace;
+  min-height: 48px;
+  padding: $smallMediumSpace $mediumSpace $smallSpace $mediumSpace;
 }
 
 .side-panel__title {
@@ -116,7 +114,7 @@
   flex: 1 1 auto;
   min-width: 0;
   min-height: 0;
-  padding: 0 $mediumLargeSpace $mediumLargeSpace $mediumLargeSpace;
+  padding: 0 $mediumSpace $mediumSpace $mediumSpace;
 }
 
 @keyframes side-panel-enter {

From ecf07dd6f5bf58ac56a6a7cec88b1c75a7ac7dca Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 22:29:12 +0200
Subject: [PATCH 16/29] Fix diagnostics side panel tab colours

---
 .../ConversationDiagnosticsModal.css          | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
index e4956a4..9bb2142 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
@@ -538,6 +538,7 @@
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar .ant-segmented {
   width: 100%;
+  background: transparent;
   box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.16);
 }
 
@@ -545,20 +546,35 @@
   flex: 1 1 0;
   min-width: 0;
   color: $textColourSecondary;
+  background: transparent;
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__toolbar .ant-segmented-item-label {
+  color: inherit;
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar .ant-segmented-item:hover,
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar .ant-segmented-item:focus-visible {
   color: white;
-  background: rgba(24, 144, 255, 0.1);
+  background: rgba(24, 144, 255, 0.12);
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__toolbar .ant-segmented-item:hover .ant-segmented-item-label,
+.conversation-diagnostics--side-panel .conversation-diagnostics__toolbar .ant-segmented-item:focus-visible .ant-segmented-item-label {
+  color: white;
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar .ant-segmented-item-selected {
   color: white;
-  background: transparent;
+  background: rgba(24, 144, 255, 0.18);
+  background-color: rgba(24, 144, 255, 0.18);
   box-shadow: inset 0 -2px 0 $linkColourPrimary;
 }
 
+.conversation-diagnostics--side-panel .conversation-diagnostics__toolbar .ant-segmented-item-selected .ant-segmented-item-label {
+  color: white;
+}
+
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar .ant-segmented-thumb {
   background: rgba(24, 144, 255, 0.16);
   box-shadow: inset 0 -2px 0 $linkColourPrimary;

From 812e7d961bebc091c866cf906c4f43c5b0e8e8ff Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 22:30:26 +0200
Subject: [PATCH 17/29] Tighten diagnostics summary copy

---
 .../ConversationDiagnosticsModal.tsx                            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
index 326d94a..9141047 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
@@ -193,7 +193,7 @@ function ConversationDiagnosticsContent({ globalModalId, variant = 'modal' }: Pr
           </div>
           <div className="conversation-diagnostics__summary-description">
             {diagnostics.length > 0
-              ? `${getSummaryCountsText(errorCount, warningCount, infoCount)} in the active conversation.`
+              ? `${getSummaryCountsText(errorCount, warningCount, infoCount)}.`
               : 'The active conversation passed the current content, graph, operation, and reference checks.'}
           </div>
         </div>

From 9d825b3fabb28600772f623af0d124043bad8791 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 22:32:44 +0200
Subject: [PATCH 18/29] Compact diagnostics expand control

---
 .../ConversationDiagnosticsModal.css          | 20 ++++++++++++++++++-
 .../ConversationDiagnosticsModal.tsx          | 13 +++++++++++-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
index 9bb2142..6252f9d 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
@@ -149,6 +149,10 @@
   border-radius: 4px;
 }
 
+.conversation-diagnostics__expand-toggle.ant-btn {
+  min-width: 40px;
+}
+
 .conversation-diagnostics__toolbar-controls .ant-input-affix-wrapper {
   background: #ffffff;
   border-color: #d6dde8;
@@ -581,7 +585,21 @@
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls {
-  grid-template-columns: 1fr;
+  grid-template-columns: minmax(0, 1fr) 40px;
+  align-items: center;
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-input-affix-wrapper {
+  grid-column: 1 / -1;
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__category-select {
+  min-width: 0;
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__expand-toggle.ant-btn {
+  width: 40px;
+  padding: 0;
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-input-affix-wrapper,
diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
index 9141047..2e7da1e 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
@@ -4,9 +4,11 @@ import { Button, Empty, Input, Select, Segmented, Tag } from 'antd';
 import {
   AimOutlined,
   CheckCircleOutlined,
+  CompressOutlined,
   DownOutlined,
   DownloadOutlined,
   ExclamationCircleOutlined,
+  ExpandAltOutlined,
   InfoCircleOutlined,
   RightOutlined,
   SearchOutlined,
@@ -96,6 +98,7 @@ function ConversationDiagnosticsContent({ globalModalId, variant = 'modal' }: Pr
   ];
   const allFilteredDiagnosticsExpanded =
     filteredDiagnostics.length > 0 && filteredDiagnostics.every((diagnostic) => expandedDiagnosticIds.has(diagnostic.id));
+  const toggleVisibleDiagnosticsLabel = allFilteredDiagnosticsExpanded ? 'Collapse visible diagnostics' : 'Expand visible diagnostics';
 
   const toggleDiagnostic = (diagnosticId: string) => {
     setExpandedDiagnosticIds((currentIds) => {
@@ -237,7 +240,15 @@ function ConversationDiagnosticsContent({ globalModalId, variant = 'modal' }: Pr
                 { label: 'Reference', value: 'reference' },
               ]}
             />
-            <Button onClick={toggleFilteredDiagnostics}>{allFilteredDiagnosticsExpanded ? 'Collapse Visible' : 'Expand Visible'}</Button>
+            <Button
+              className="conversation-diagnostics__expand-toggle"
+              icon={allFilteredDiagnosticsExpanded ? <CompressOutlined /> : <ExpandAltOutlined />}
+              aria-label={variant === 'side-panel' ? toggleVisibleDiagnosticsLabel : undefined}
+              title={variant === 'side-panel' ? toggleVisibleDiagnosticsLabel : undefined}
+              onClick={toggleFilteredDiagnostics}
+            >
+              {variant === 'side-panel' ? null : allFilteredDiagnosticsExpanded ? 'Collapse Visible' : 'Expand Visible'}
+            </Button>
           </div>
         </div>
       )}

From 28f2f2ec03d924db4fd186b24819f375f4f9814a Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 22:37:45 +0200
Subject: [PATCH 19/29] Refine side panel icon controls

---
 .../ConversationDiagnosticsModal.css                      | 8 ++++++--
 app/src/containers/SidePanel/SidePanel.css                | 4 ++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
index 6252f9d..308637a 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
@@ -585,7 +585,7 @@
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls {
-  grid-template-columns: minmax(0, 1fr) 40px;
+  grid-template-columns: minmax(0, 1fr) 32px;
   align-items: center;
 }
 
@@ -598,7 +598,11 @@
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__expand-toggle.ant-btn {
-  width: 40px;
+  justify-self: end;
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  min-height: 32px;
   padding: 0;
 }
 
diff --git a/app/src/containers/SidePanel/SidePanel.css b/app/src/containers/SidePanel/SidePanel.css
index 63d506a..ac18abf 100644
--- a/app/src/containers/SidePanel/SidePanel.css
+++ b/app/src/containers/SidePanel/SidePanel.css
@@ -102,8 +102,8 @@
 
 .side-panel__close.ant-btn:hover,
 .side-panel__close.ant-btn:focus {
-  color: white;
-  background: rgba(255, 255, 255, 0.08);
+  color: white !important;
+  background: rgba(24, 144, 255, 0.16) !important;
 }
 
 .side-panel__close.ant-btn:active {

From 79a171297b92e32256f12c543d59ace5d5fe1d26 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 22:41:21 +0200
Subject: [PATCH 20/29] Align diagnostics dropdown theme

---
 .../ConversationDiagnosticsModal.css          | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
index 308637a..daebf6f 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
@@ -239,30 +239,31 @@
 }
 
 .conversation-diagnostics__category-dropdown--dark.ant-select-dropdown {
-  background: #202831;
+  background: $backgroundTertiary;
   color: $textColourPrimary;
   box-shadow:
     0 8px 24px rgba(0, 0, 0, 0.35),
-    0 0 0 1px rgba(255, 255, 255, 0.12);
+    0 0 0 1px rgba(255, 255, 255, 0.1);
 }
 
 .conversation-diagnostics__category-dropdown--dark.ant-select-dropdown .ant-select-item {
-  background: #202831;
+  background: $backgroundTertiary;
   color: $textColourPrimary;
 }
 
 .conversation-diagnostics__category-dropdown--dark.ant-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
-  background: rgba(24, 144, 255, 0.16);
+  background: $highlightColourPrimary;
   color: white;
 }
 
 .conversation-diagnostics__category-dropdown--dark.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
-  background: rgba(24, 144, 255, 0.22);
+  border-left: 3px solid $linkColourPrimary;
+  background: rgba(42, 176, 247, 0.14);
   color: white;
 }
 
 .conversation-diagnostics__category-dropdown--dark.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-state {
-  color: $blue4;
+  color: white;
 }
 
 .conversation-diagnostics__list {
@@ -619,7 +620,12 @@
 .conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select.ant-select-single .ant-select-selector .ant-select-selection-item,
 .conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select.ant-select-single .ant-select-selector .ant-select-selection-placeholder,
 .conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select:not(.ant-select-customize-input).ant-select-single .ant-select-selector .ant-select-selection-search-input {
-  color: $textColourPrimary;
+  color: $textColourPrimary !important;
+}
+
+.conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select-open .ant-select-selector .ant-select-selection-item,
+.conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select-focused .ant-select-selector .ant-select-selection-item {
+  color: $textColourPrimary !important;
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-input-affix-wrapper .ant-input::placeholder {

From 9a25e7aa7ad72c9c18bd96cfa85ace56204a0507 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 22:43:21 +0200
Subject: [PATCH 21/29] Toggle diagnostics side panel button

---
 .../containers/ConversationEditor/ConversationEditor.tsx | 9 ++++++++-
 app/src/stores/sidePanelStore/side-panel-store.tsx       | 9 ++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/app/src/containers/ConversationEditor/ConversationEditor.tsx b/app/src/containers/ConversationEditor/ConversationEditor.tsx
index 040eca9..accc0eb 100644
--- a/app/src/containers/ConversationEditor/ConversationEditor.tsx
+++ b/app/src/containers/ConversationEditor/ConversationEditor.tsx
@@ -59,6 +59,8 @@ const inactiveNodeSplitSizes = {
   minSecondarySize: '0%',
 };
 
+const diagnosticsSidePanelId = 'conversation-diagnostics';
+
 function ConversationEditor({ conversationAsset }: Props) {
   const nodeStore = useStore<NodeStore>('node');
   const dataStore = useStore<DataStore>('data');
@@ -112,7 +114,12 @@ function ConversationEditor({ conversationAsset }: Props) {
 
   const onDiagnosticsButtonClicked = () => {
     if ((windowSize.width ?? 0) >= 1280) {
-      sidePanelStore.setPanelContent(ConversationDiagnosticsPanel, {}, 'Conversation Diagnostics');
+      if (sidePanelStore.isPanelVisible(diagnosticsSidePanelId)) {
+        sidePanelStore.closePanel();
+        return;
+      }
+
+      sidePanelStore.setPanelContent(ConversationDiagnosticsPanel, {}, 'Conversation Diagnostics', true, diagnosticsSidePanelId);
       return;
     }
 
diff --git a/app/src/stores/sidePanelStore/side-panel-store.tsx b/app/src/stores/sidePanelStore/side-panel-store.tsx
index 7e07beb..3e3b7fa 100644
--- a/app/src/stores/sidePanelStore/side-panel-store.tsx
+++ b/app/src/stores/sidePanelStore/side-panel-store.tsx
@@ -4,6 +4,7 @@ import { action, makeObservable, observable } from 'mobx';
 import { getDevPreservedStore } from '../dev-preserved-store';
 
 type SidePanelOptions = {
+  contentId: string | null;
   isVisible: boolean;
   title: string | ReactElement;
   width: string;
@@ -16,6 +17,7 @@ class SidePanelStore {
   panel: ElementType | ReactElement | null = null;
   options: SidePanelOptions = observable.object(
     {
+      contentId: null,
       isVisible: false,
       title: '',
       width: defaultSidePanelWidth,
@@ -39,11 +41,12 @@ class SidePanelStore {
     });
   }
 
-  setPanelContent(PanelContent: ElementType, props = {}, title: string | ReactElement = '', show = true): void {
+  setPanelContent(PanelContent: ElementType, props = {}, title: string | ReactElement = '', show = true, contentId: string | null = null): void {
     this.panelVersion += 1;
     this.panel = <PanelContent key={`side-panel-${this.panelVersion}`} {...props} />;
     this.options = observable.object(
       {
+        contentId,
         isVisible: show,
         title,
         width: this.options.width || defaultSidePanelWidth,
@@ -69,6 +72,10 @@ class SidePanelStore {
   reset = (): void => {
     this.options.isVisible = false;
   };
+
+  isPanelVisible(contentId: string): boolean {
+    return this.options.isVisible && this.options.contentId === contentId;
+  }
 }
 
 export const sidePanelStore = getDevPreservedStore('__conversetekSidePanelStore', () => new SidePanelStore(), SidePanelStore.prototype);

From 4dace903da720a941b45d0b544fb9e639fe9cfbc Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 23:45:41 +0200
Subject: [PATCH 22/29] Clarify diagnostics dropdown contrast

---
 .../ConversationDiagnosticsModal.css          | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
index daebf6f..af250d7 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
@@ -239,31 +239,39 @@
 }
 
 .conversation-diagnostics__category-dropdown--dark.ant-select-dropdown {
-  background: $backgroundTertiary;
-  color: $textColourPrimary;
+  background: $backgroundTertiary !important;
+  color: $textColourPrimary !important;
   box-shadow:
     0 8px 24px rgba(0, 0, 0, 0.35),
     0 0 0 1px rgba(255, 255, 255, 0.1);
 }
 
 .conversation-diagnostics__category-dropdown--dark.ant-select-dropdown .ant-select-item {
-  background: $backgroundTertiary;
-  color: $textColourPrimary;
+  background: $backgroundTertiary !important;
+  color: $textColourPrimary !important;
+}
+
+.conversation-diagnostics__category-dropdown--dark.ant-select-dropdown .ant-select-item-option-content {
+  color: inherit !important;
 }
 
 .conversation-diagnostics__category-dropdown--dark.ant-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
-  background: $highlightColourPrimary;
-  color: white;
+  background: rgba(255, 255, 255, 0.08) !important;
+  color: white !important;
 }
 
 .conversation-diagnostics__category-dropdown--dark.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
   border-left: 3px solid $linkColourPrimary;
-  background: rgba(42, 176, 247, 0.14);
-  color: white;
+  background: rgba(255, 255, 255, 0.04) !important;
+  color: white !important;
+}
+
+.conversation-diagnostics__category-dropdown--dark.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled).ant-select-item-option-active {
+  background: rgba(255, 255, 255, 0.1) !important;
 }
 
 .conversation-diagnostics__category-dropdown--dark.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-state {
-  color: white;
+  color: $linkColourPrimary !important;
 }
 
 .conversation-diagnostics__list {
@@ -617,10 +625,14 @@
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-input-affix-wrapper .ant-input,
+.conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select .ant-select-selection-item,
+.conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select .ant-select-selection-placeholder,
+.conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select .ant-select-selection-search-input,
 .conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select.ant-select-single .ant-select-selector .ant-select-selection-item,
 .conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select.ant-select-single .ant-select-selector .ant-select-selection-placeholder,
 .conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select:not(.ant-select-customize-input).ant-select-single .ant-select-selector .ant-select-selection-search-input {
   color: $textColourPrimary !important;
+  -webkit-text-fill-color: $textColourPrimary !important;
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select-open .ant-select-selector .ant-select-selection-item,

From f55799cb8b2aec088c6c415315921107c1834389 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 23:47:28 +0200
Subject: [PATCH 23/29] Compact diagnostics export action

---
 .../ConversationDiagnosticsModal.css                  |  3 +++
 .../ConversationDiagnosticsModal.tsx                  | 11 +++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
index af250d7..3e78cd5 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
@@ -519,7 +519,10 @@
 .conversation-diagnostics--side-panel .conversation-diagnostics__summary .ant-btn {
   grid-column: auto;
   justify-self: end;
+  width: 34px;
+  min-width: 34px;
   min-height: 34px;
+  padding: 0;
   color: $textColourPrimary;
   background: $backgroundPrimary;
   border-color: $borderTertiary;
diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
index 2e7da1e..654682d 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
@@ -200,8 +200,15 @@ function ConversationDiagnosticsContent({ globalModalId, variant = 'modal' }: Pr
               : 'The active conversation passed the current content, graph, operation, and reference checks.'}
           </div>
         </div>
-        <Button icon={<DownloadOutlined />} onClick={exportReport} disabled={diagnostics.length <= 0}>
-          Export Report
+        <Button
+          className="conversation-diagnostics__export-button"
+          icon={<DownloadOutlined />}
+          aria-label={variant === 'side-panel' ? 'Export diagnostics report' : undefined}
+          title={variant === 'side-panel' ? 'Export diagnostics report' : undefined}
+          onClick={exportReport}
+          disabled={diagnostics.length <= 0}
+        >
+          {variant === 'side-panel' ? null : 'Export Report'}
         </Button>
       </section>
 

From 8f411f833f8cf4a5d1fdc586b51394ba235c72cc Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sat, 2 May 2026 23:51:13 +0200
Subject: [PATCH 24/29] Split diagnostics select themes

---
 .../ConversationDiagnosticsModal.css          | 49 ++++++++++---------
 .../ConversationDiagnosticsModal.tsx          | 11 +++--
 2 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
index 3e78cd5..a57fe73 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
@@ -238,7 +238,7 @@
   color: $linkColourTertiary;
 }
 
-.conversation-diagnostics__category-dropdown--dark.ant-select-dropdown {
+.conversation-diagnostics__category-dropdown--side-panel.ant-select-dropdown {
   background: $backgroundTertiary !important;
   color: $textColourPrimary !important;
   box-shadow:
@@ -246,32 +246,32 @@
     0 0 0 1px rgba(255, 255, 255, 0.1);
 }
 
-.conversation-diagnostics__category-dropdown--dark.ant-select-dropdown .ant-select-item {
+.conversation-diagnostics__category-dropdown--side-panel.ant-select-dropdown .ant-select-item {
   background: $backgroundTertiary !important;
   color: $textColourPrimary !important;
 }
 
-.conversation-diagnostics__category-dropdown--dark.ant-select-dropdown .ant-select-item-option-content {
+.conversation-diagnostics__category-dropdown--side-panel.ant-select-dropdown .ant-select-item-option-content {
   color: inherit !important;
 }
 
-.conversation-diagnostics__category-dropdown--dark.ant-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
-  background: rgba(255, 255, 255, 0.08) !important;
+.conversation-diagnostics__category-dropdown--side-panel.ant-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+  background: $highlightColourPrimary !important;
   color: white !important;
 }
 
-.conversation-diagnostics__category-dropdown--dark.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+.conversation-diagnostics__category-dropdown--side-panel.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
   border-left: 3px solid $linkColourPrimary;
-  background: rgba(255, 255, 255, 0.04) !important;
+  background: rgba(42, 176, 247, 0.14) !important;
   color: white !important;
 }
 
-.conversation-diagnostics__category-dropdown--dark.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled).ant-select-item-option-active {
-  background: rgba(255, 255, 255, 0.1) !important;
+.conversation-diagnostics__category-dropdown--side-panel.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled).ant-select-item-option-active {
+  background: $highlightColourPrimary !important;
 }
 
-.conversation-diagnostics__category-dropdown--dark.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-state {
-  color: $linkColourPrimary !important;
+.conversation-diagnostics__category-dropdown--side-panel.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-state {
+  color: white !important;
 }
 
 .conversation-diagnostics__list {
@@ -619,8 +619,8 @@
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-input-affix-wrapper,
-.conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select.ant-select-outlined:not(.ant-select-customize-input),
-.conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select:not(.ant-select-customize-input) .ant-select-selector,
+.conversation-diagnostics__category-select--side-panel.ant-select.ant-select-outlined:not(.ant-select-customize-input),
+.conversation-diagnostics__category-select--side-panel.ant-select:not(.ant-select-customize-input) .ant-select-selector,
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-btn {
   background: $backgroundTertiary;
   border-color: $borderTertiary;
@@ -628,19 +628,24 @@
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-input-affix-wrapper .ant-input,
-.conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select .ant-select-selection-item,
-.conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select .ant-select-selection-placeholder,
-.conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select .ant-select-selection-search-input,
-.conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select.ant-select-single .ant-select-selector .ant-select-selection-item,
-.conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select.ant-select-single .ant-select-selector .ant-select-selection-placeholder,
-.conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select:not(.ant-select-customize-input).ant-select-single .ant-select-selector .ant-select-selection-search-input {
+.conversation-diagnostics__category-select--side-panel.ant-select .ant-select-selector,
+.conversation-diagnostics__category-select--side-panel.ant-select .ant-select-selection-wrap,
+.conversation-diagnostics__category-select--side-panel.ant-select .ant-select-selection-item,
+.conversation-diagnostics__category-select--side-panel.ant-select .ant-select-selection-placeholder,
+.conversation-diagnostics__category-select--side-panel.ant-select .ant-select-selection-search,
+.conversation-diagnostics__category-select--side-panel.ant-select .ant-select-selection-search-input,
+.conversation-diagnostics__category-select--side-panel.ant-select.ant-select-single .ant-select-selector .ant-select-selection-item,
+.conversation-diagnostics__category-select--side-panel.ant-select.ant-select-single .ant-select-selector .ant-select-selection-placeholder,
+.conversation-diagnostics__category-select--side-panel.ant-select:not(.ant-select-customize-input).ant-select-single .ant-select-selector .ant-select-selection-search-input {
   color: $textColourPrimary !important;
   -webkit-text-fill-color: $textColourPrimary !important;
+  opacity: 1 !important;
 }
 
-.conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select-open .ant-select-selector .ant-select-selection-item,
-.conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select-focused .ant-select-selector .ant-select-selection-item {
+.conversation-diagnostics__category-select--side-panel.ant-select-open .ant-select-selector .ant-select-selection-item,
+.conversation-diagnostics__category-select--side-panel.ant-select-focused .ant-select-selector .ant-select-selection-item {
   color: $textColourPrimary !important;
+  opacity: 1 !important;
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-input-affix-wrapper .ant-input::placeholder {
@@ -649,7 +654,7 @@
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-input-prefix,
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-input-clear-icon,
-.conversation-diagnostics--side-panel .conversation-diagnostics__category-select.ant-select .ant-select-arrow {
+.conversation-diagnostics__category-select--side-panel.ant-select .ant-select-arrow {
   color: $blue4;
 }
 
diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
index 654682d..2138a0e 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
@@ -229,12 +229,15 @@ function ConversationDiagnosticsContent({ globalModalId, variant = 'modal' }: Pr
               onChange={(event) => setSearchText(event.target.value)}
             />
             <Select<CategoryFilterValue>
-              className="conversation-diagnostics__category-select"
+              className={classnames('conversation-diagnostics__category-select', {
+                'conversation-diagnostics__category-select--side-panel': variant === 'side-panel',
+              })}
               classNames={{
                 popup: {
-                  root: classnames('conversation-diagnostics__category-dropdown', {
-                    'conversation-diagnostics__category-dropdown--dark': variant === 'side-panel',
-                  }),
+                  root:
+                    variant === 'side-panel'
+                      ? 'conversation-diagnostics__category-dropdown--side-panel'
+                      : 'conversation-diagnostics__category-dropdown',
                 },
               }}
               value={categoryFilter}

From 47e1711ef373964e6bf1245d5296961ce60e59a3 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sun, 3 May 2026 00:00:07 +0200
Subject: [PATCH 25/29] Fixed style issue

---
 .../ConversationDiagnosticsModal.css          | 56 ++++++-------------
 .../ConversationDiagnosticsModal.tsx          |  5 +-
 2 files changed, 19 insertions(+), 42 deletions(-)

diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
index a57fe73..280d90e 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
@@ -238,42 +238,6 @@
   color: $linkColourTertiary;
 }
 
-.conversation-diagnostics__category-dropdown--side-panel.ant-select-dropdown {
-  background: $backgroundTertiary !important;
-  color: $textColourPrimary !important;
-  box-shadow:
-    0 8px 24px rgba(0, 0, 0, 0.35),
-    0 0 0 1px rgba(255, 255, 255, 0.1);
-}
-
-.conversation-diagnostics__category-dropdown--side-panel.ant-select-dropdown .ant-select-item {
-  background: $backgroundTertiary !important;
-  color: $textColourPrimary !important;
-}
-
-.conversation-diagnostics__category-dropdown--side-panel.ant-select-dropdown .ant-select-item-option-content {
-  color: inherit !important;
-}
-
-.conversation-diagnostics__category-dropdown--side-panel.ant-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
-  background: $highlightColourPrimary !important;
-  color: white !important;
-}
-
-.conversation-diagnostics__category-dropdown--side-panel.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
-  border-left: 3px solid $linkColourPrimary;
-  background: rgba(42, 176, 247, 0.14) !important;
-  color: white !important;
-}
-
-.conversation-diagnostics__category-dropdown--side-panel.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled).ant-select-item-option-active {
-  background: $highlightColourPrimary !important;
-}
-
-.conversation-diagnostics__category-dropdown--side-panel.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-state {
-  color: white !important;
-}
-
 .conversation-diagnostics__list {
   display: flex;
   flex-direction: column;
@@ -620,7 +584,6 @@
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-input-affix-wrapper,
 .conversation-diagnostics__category-select--side-panel.ant-select.ant-select-outlined:not(.ant-select-customize-input),
-.conversation-diagnostics__category-select--side-panel.ant-select:not(.ant-select-customize-input) .ant-select-selector,
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-btn {
   background: $backgroundTertiary;
   border-color: $borderTertiary;
@@ -628,6 +591,9 @@
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-input-affix-wrapper .ant-input,
+.conversation-diagnostics__category-select--side-panel.ant-select .ant-select-content,
+.conversation-diagnostics__category-select--side-panel.ant-select .ant-select-content-has-value,
+.conversation-diagnostics__category-select--side-panel.ant-select .ant-select-input,
 .conversation-diagnostics__category-select--side-panel.ant-select .ant-select-selector,
 .conversation-diagnostics__category-select--side-panel.ant-select .ant-select-selection-wrap,
 .conversation-diagnostics__category-select--side-panel.ant-select .ant-select-selection-item,
@@ -642,6 +608,20 @@
   opacity: 1 !important;
 }
 
+.conversation-diagnostics__category-select--side-panel.ant-select-open,
+.conversation-diagnostics__category-select--side-panel.ant-select-focused {
+  color: $textColourPrimary !important;
+}
+
+.conversation-diagnostics__category-select--side-panel.ant-select-open .ant-select-content,
+.conversation-diagnostics__category-select--side-panel.ant-select-focused .ant-select-content,
+.conversation-diagnostics__category-select--side-panel.ant-select-open .ant-select-content-has-value,
+.conversation-diagnostics__category-select--side-panel.ant-select-focused .ant-select-content-has-value {
+  color: $textColourPrimary !important;
+  -webkit-text-fill-color: $textColourPrimary !important;
+  opacity: 1 !important;
+}
+
 .conversation-diagnostics__category-select--side-panel.ant-select-open .ant-select-selector .ant-select-selection-item,
 .conversation-diagnostics__category-select--side-panel.ant-select-focused .ant-select-selector .ant-select-selection-item {
   color: $textColourPrimary !important;
@@ -655,7 +635,7 @@
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-input-prefix,
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-input-clear-icon,
 .conversation-diagnostics__category-select--side-panel.ant-select .ant-select-arrow {
-  color: $blue4;
+  color: $highlightColourSecondary;
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__item {
diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
index 2138a0e..00093d6 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
@@ -234,10 +234,7 @@ function ConversationDiagnosticsContent({ globalModalId, variant = 'modal' }: Pr
               })}
               classNames={{
                 popup: {
-                  root:
-                    variant === 'side-panel'
-                      ? 'conversation-diagnostics__category-dropdown--side-panel'
-                      : 'conversation-diagnostics__category-dropdown',
+                  root: variant === 'side-panel' ? undefined : 'conversation-diagnostics__category-dropdown',
                 },
               }}
               value={categoryFilter}

From c20f00b9abcb38a784780d7619afb55a38990260 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sun, 3 May 2026 00:02:23 +0200
Subject: [PATCH 26/29] Tweak

---
 .../ConversationGeneral.css                   | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/app/src/containers/ConversationGeneral/ConversationGeneral.css b/app/src/containers/ConversationGeneral/ConversationGeneral.css
index 788e2b3..77c4061 100644
--- a/app/src/containers/ConversationGeneral/ConversationGeneral.css
+++ b/app/src/containers/ConversationGeneral/ConversationGeneral.css
@@ -3,6 +3,7 @@
 .conversation-general.ant-card {
   background-color: $backgroundPrimary;
   box-sizing: border-box;
+  container-type: inline-size;
   height: 100%;
 
   &.ant-card-bordered {
@@ -22,6 +23,7 @@
     color: $textColourQuaternary;
     line-height: 32px;
     text-align: right;
+    white-space: nowrap;
   }
 
   &__value {
@@ -54,6 +56,8 @@
     justify-content: flex-end;
     align-items: center;
     height: 32px;
+    min-width: 0;
+    white-space: nowrap;
 
     .anticon {
       flex: 0 0 auto;
@@ -72,3 +76,45 @@
     }
   }
 }
+
+.conversation-general .ant-card-body > .ant-row {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+.conversation-general .ant-card-body > .ant-row > .ant-col {
+  min-width: 0;
+  padding-left: $smallSpace !important;
+  padding-right: $smallSpace !important;
+}
+
+@container (max-width: 28rem) {
+  .conversation-general .ant-card-body > .ant-row > .ant-col {
+    flex: 0 0 100% !important;
+    max-width: 100% !important;
+  }
+
+  .conversation-general__label {
+    line-height: $lineHeightNormal;
+    min-height: 24px;
+    text-align: left;
+  }
+
+  .conversation-general__speaker-group-label {
+    justify-content: flex-start;
+    height: auto;
+    min-height: 24px;
+  }
+
+  .conversation-general__speaker-group {
+    flex-wrap: wrap;
+  }
+
+  .conversation-general__speaker-select {
+    flex: 0 0 115px;
+  }
+
+  .conversation-general__speaker-group .ant-input {
+    flex: 1 1 12rem;
+  }
+}

From 1f8b2ee6de51177431513d607b02b88145fdbf04 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sun, 3 May 2026 00:08:52 +0200
Subject: [PATCH 27/29] Style tweaks

---
 .../ConversationDiagnosticsModal.css          | 11 ++--
 .../ConversationDiagnosticsModal.tsx          | 50 +++++++++----------
 .../ConversationEditor/ConversationEditor.css |  2 +-
 3 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
index 280d90e..826ce2f 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.css
@@ -633,9 +633,14 @@
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-input-prefix,
-.conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-input-clear-icon,
-.conversation-diagnostics__category-select--side-panel.ant-select .ant-select-arrow {
-  color: $highlightColourSecondary;
+.conversation-diagnostics--side-panel .conversation-diagnostics__toolbar-controls .ant-input-clear-icon {
+  color: $linkColourPrimary;
+}
+
+.conversation-diagnostics__category-select--side-panel.ant-select .ant-select-suffix,
+.conversation-diagnostics__category-select--side-panel.ant-select .ant-select-suffix .anticon,
+.conversation-diagnostics__category-select--side-panel.ant-select .ant-select-suffix svg {
+  color: $highlightColourSecondary !important;
 }
 
 .conversation-diagnostics--side-panel .conversation-diagnostics__item {
diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
index 00093d6..42cbfd8 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
@@ -184,33 +184,33 @@ function ConversationDiagnosticsContent({ globalModalId, variant = 'modal' }: Pr
         'conversation-diagnostics--side-panel': variant === 'side-panel',
       })}
     >
-      <section className={`conversation-diagnostics__summary conversation-diagnostics__summary--${getSummaryTone(errorCount, warningCount, infoCount)}`}>
-        <div className="conversation-diagnostics__summary-icon" aria-hidden="true">
-          {errorCount > 0 ? <ExclamationCircleOutlined /> : warningCount > 0 ? <WarningOutlined /> : infoCount > 0 ? <InfoCircleOutlined /> : <CheckCircleOutlined />}
-        </div>
-        <div className="conversation-diagnostics__summary-copy">
-          <div className="conversation-diagnostics__summary-title">
-            {diagnostics.length > 0
-              ? `${diagnostics.length} diagnostic${diagnostics.length === 1 ? '' : 's'} found`
-              : 'No diagnostics found'}
+      {variant !== 'side-panel' && (
+        <section className={`conversation-diagnostics__summary conversation-diagnostics__summary--${getSummaryTone(errorCount, warningCount, infoCount)}`}>
+          <div className="conversation-diagnostics__summary-icon" aria-hidden="true">
+            {errorCount > 0 ? <ExclamationCircleOutlined /> : warningCount > 0 ? <WarningOutlined /> : infoCount > 0 ? <InfoCircleOutlined /> : <CheckCircleOutlined />}
           </div>
-          <div className="conversation-diagnostics__summary-description">
-            {diagnostics.length > 0
-              ? `${getSummaryCountsText(errorCount, warningCount, infoCount)}.`
-              : 'The active conversation passed the current content, graph, operation, and reference checks.'}
+          <div className="conversation-diagnostics__summary-copy">
+            <div className="conversation-diagnostics__summary-title">
+              {diagnostics.length > 0
+                ? `${diagnostics.length} diagnostic${diagnostics.length === 1 ? '' : 's'} found`
+                : 'No diagnostics found'}
+            </div>
+            <div className="conversation-diagnostics__summary-description">
+              {diagnostics.length > 0
+                ? `${getSummaryCountsText(errorCount, warningCount, infoCount)}.`
+                : 'The active conversation passed the current content, graph, operation, and reference checks.'}
+            </div>
           </div>
-        </div>
-        <Button
-          className="conversation-diagnostics__export-button"
-          icon={<DownloadOutlined />}
-          aria-label={variant === 'side-panel' ? 'Export diagnostics report' : undefined}
-          title={variant === 'side-panel' ? 'Export diagnostics report' : undefined}
-          onClick={exportReport}
-          disabled={diagnostics.length <= 0}
-        >
-          {variant === 'side-panel' ? null : 'Export Report'}
-        </Button>
-      </section>
+          <Button
+            className="conversation-diagnostics__export-button"
+            icon={<DownloadOutlined />}
+            onClick={exportReport}
+            disabled={diagnostics.length <= 0}
+          >
+            Export Report
+          </Button>
+        </section>
+      )}
 
       {diagnostics.length > 0 && (
         <div className="conversation-diagnostics__toolbar">
diff --git a/app/src/containers/ConversationEditor/ConversationEditor.css b/app/src/containers/ConversationEditor/ConversationEditor.css
index 99a12f7..4758056 100644
--- a/app/src/containers/ConversationEditor/ConversationEditor.css
+++ b/app/src/containers/ConversationEditor/ConversationEditor.css
@@ -29,7 +29,7 @@
   &__toolbar {
     display: flex;
     justify-content: space-between;
-    margin: 0 $smallSpace $tinySpace $smallSpace;
+    margin: $tinySpace $smallSpace;
   }
 
   &__regenerate-ids-button {

From 098dae0c644ddb2e08f7cca0f090e1a68143d9f2 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sun, 3 May 2026 00:21:51 +0200
Subject: [PATCH 28/29] Tweaks

---
 .../ConversationEditor/ConversationEditor.tsx |  8 ++++
 .../conversation-diagnostics-utils.test.ts    | 42 +++++++++++++-----
 .../utils/conversation-diagnostics-utils.ts   | 43 ++++++++++---------
 3 files changed, 62 insertions(+), 31 deletions(-)

diff --git a/app/src/containers/ConversationEditor/ConversationEditor.tsx b/app/src/containers/ConversationEditor/ConversationEditor.tsx
index accc0eb..0fbbe5d 100644
--- a/app/src/containers/ConversationEditor/ConversationEditor.tsx
+++ b/app/src/containers/ConversationEditor/ConversationEditor.tsx
@@ -71,6 +71,7 @@ function ConversationEditor({ conversationAsset }: Props) {
 
   const { unsavedActiveConversationAsset } = dataStore;
   const { activeNode, rebuild } = nodeStore;
+  const activeConversationId = conversationAsset.conversation.idRef.id;
 
   const createNewUnsavedConversation = () => {
     const unsavedConversationAsset = { ...toJS(conversationAsset) };
@@ -138,6 +139,13 @@ function ConversationEditor({ conversationAsset }: Props) {
     createNewUnsavedConversation();
   }, [conversationAsset]);
 
+  useEffect(() => {
+    if (!sidePanelStore.isPanelVisible(diagnosticsSidePanelId)) return;
+    if ((windowSize.width ?? 0) < 1280) return;
+
+    sidePanelStore.setPanelContent(ConversationDiagnosticsPanel, {}, 'Conversation Diagnostics', true, diagnosticsSidePanelId);
+  }, [activeConversationId, sidePanelStore, windowSize.width]);
+
   useEffect(() => {
     if (windowSize.width != null && windowSize.width < 1280) sidePanelStore.closePanel();
   }, [sidePanelStore, windowSize.width]);
diff --git a/app/src/utils/__tests__/conversation-diagnostics-utils.test.ts b/app/src/utils/__tests__/conversation-diagnostics-utils.test.ts
index fd636c8..3612126 100644
--- a/app/src/utils/__tests__/conversation-diagnostics-utils.test.ts
+++ b/app/src/utils/__tests__/conversation-diagnostics-utils.test.ts
@@ -97,7 +97,7 @@ describe('conversation diagnostics', () => {
     );
   });
 
-  it('allows empty prompt nodes that continue into response choices', () => {
+  it('ignores empty prompt nodes that continue into response choices', () => {
     const conversationAsset = makeBasicConversation();
     const prompt = conversationAsset.conversation.nodes[0];
     const commanderResponse = createResponseNode();
@@ -109,21 +109,16 @@ describe('conversation diagnostics', () => {
     const diagnostics = buildConversationDiagnostics({ conversationAsset, operationDefinitions: [] });
     const promptDiagnostics = diagnostics.filter((diagnostic) => diagnostic.nodeId === getId(prompt));
 
-    expect(promptDiagnostics).toEqual(
-      expect.arrayContaining([expect.objectContaining({ severity: 'info', title: 'Prompt node has no text' })]),
-    );
-    expect(promptDiagnostics.some((diagnostic) => diagnostic.severity === 'warning' && diagnostic.title.startsWith('Prompt node'))).toBe(false);
+    expect(promptDiagnostics.some((diagnostic) => diagnostic.title.startsWith('Prompt node'))).toBe(false);
   });
 
   it('shows prompt labels as one-based display numbers', () => {
     const conversationAsset = makeBasicConversation();
     const root = conversationAsset.conversation.roots[0];
     const secondPrompt = createPromptNode(1);
-    const commanderResponse = createResponseNode();
-    commanderResponse.responseText = 'Keep going.';
-    commanderResponse.nextNodeIndex = -1;
     secondPrompt.text = '';
-    secondPrompt.branches = [commanderResponse];
+    secondPrompt.branches = [];
+    secondPrompt.actions = null;
     root.nextNodeIndex = 1;
     conversationAsset.conversation.nodes.push(secondPrompt);
 
@@ -131,7 +126,7 @@ describe('conversation diagnostics', () => {
 
     expect(diagnostics).toEqual(
       expect.arrayContaining([
-        expect.objectContaining({ severity: 'info', title: 'Prompt node has no text', nodeId: getId(secondPrompt), nodeLabel: 'Prompt #2' }),
+        expect.objectContaining({ severity: 'warning', title: 'Prompt node has no content or responses', nodeId: getId(secondPrompt), nodeLabel: 'Prompt #2' }),
       ]),
     );
   });
@@ -228,6 +223,33 @@ describe('conversation diagnostics', () => {
     );
   });
 
+  it('reports an empty BattleTech viewscreen image key as info instead of a warning', () => {
+    const conversationAsset = makeBasicConversation();
+    const prompt = conversationAsset.conversation.nodes[0];
+    prompt.actions = {
+      ops: [makeAction('Set BattleTech Viewscreen Image', [makeStringArg('')])],
+    };
+
+    const diagnostics = buildConversationDiagnostics({
+      conversationAsset,
+      operationDefinitions: [makeDefinition('Set BattleTech Viewscreen Image', [{ label: 'Key', types: ['string'] }])],
+    });
+
+    expect(diagnostics).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          severity: 'info',
+          title: 'Operation input is empty',
+          description: expect.stringContaining('clearing the conversation viewscreen'),
+          nodeId: getId(prompt),
+        }),
+      ]),
+    );
+    expect(diagnostics).not.toEqual(
+      expect.arrayContaining([expect.objectContaining({ severity: 'warning', title: 'Operation input is empty', nodeId: getId(prompt) })]),
+    );
+  });
+
   it('uses the runtime prompt node position for link target checks', () => {
     const conversationAsset = makeBasicConversation();
     const root = conversationAsset.conversation.roots[0];
diff --git a/app/src/utils/conversation-diagnostics-utils.ts b/app/src/utils/conversation-diagnostics-utils.ts
index c9e15bc..6b0bfc1 100644
--- a/app/src/utils/conversation-diagnostics-utils.ts
+++ b/app/src/utils/conversation-diagnostics-utils.ts
@@ -31,6 +31,7 @@ type OperationContext = NodeContext & {
 };
 
 const sideloadConversationOperation = 'Sideload Conversation';
+const setBattleTechViewscreenImageOperation = 'Set BattleTech Viewscreen Image';
 
 export function buildConversationDiagnostics(options: ConversationDiagnosticsOptions): ConversationDiagnostic[] {
   const { conversationAsset, operationDefinitions, loadedConversationAssets = [] } = options;
@@ -111,23 +112,15 @@ function scanConversationShape(
   nodes.forEach((node) => {
     const context = getPromptNodeContext(node);
 
-    if (node.text.trim() === '') {
+    if (node.text.trim() === '' && isEmptyPromptLikelyInert(node)) {
       diagnostics.push(
-        isEmptyPromptLikelyInert(node)
-          ? createDiagnostic({
-              severity: 'warning',
-              category: 'content',
-              title: 'Prompt node has no content or responses',
-              description: 'This prompt has no speaker text, no response options, and no actions. Check that the player will not be left on stale or missing dialogue text.',
-              context,
-            })
-          : createDiagnostic({
-              severity: 'info',
-              category: 'content',
-              title: 'Prompt node has no text',
-              description: 'This prompt has no speaker text, but it has response choices or actions. This is valid for continuation routing, chained commander response runs, and other intentional silent prompt nodes.',
-              context,
-            }),
+        createDiagnostic({
+          severity: 'warning',
+          category: 'content',
+          title: 'Prompt node has no content or responses',
+          description: 'This prompt has no speaker text, no response options, and no actions. Check that the player will not be left on stale or missing dialogue text.',
+          context,
+        }),
       );
     }
 
@@ -349,10 +342,7 @@ function scanOperationArg(
         severity,
         category: 'operation',
         title: 'Operation input is empty',
-        description:
-          severity === 'info'
-            ? `${inputPath} is empty. This is valid, but check that the missing value is intentional.`
-            : `${inputPath} is empty. This may fail or do nothing at runtime.`,
+        description: getEmptyRequiredArgDescription(operation.functionName, inputPath, severity),
         context,
       }),
     );
@@ -485,7 +475,18 @@ function isInputOptional(functionName: string, input: InputType): boolean {
 }
 
 function isInformationalEmptyArg(functionName: string, input: InputType): boolean {
-  return functionName === 'Start Conversation Custom' && input.label.toLowerCase() === 'conversation sub header';
+  if (functionName === 'Start Conversation Custom' && input.label.toLowerCase() === 'conversation sub header') return true;
+  if (functionName === setBattleTechViewscreenImageOperation && input.label.toLowerCase() === 'key') return true;
+  return false;
+}
+
+function getEmptyRequiredArgDescription(functionName: string, inputPath: string, severity: ConversationDiagnosticSeverity): string {
+  if (functionName === setBattleTechViewscreenImageOperation) {
+    return `${inputPath} is empty. BattleTech treats this as clearing the conversation viewscreen, so check that the reset is intentional.`;
+  }
+
+  if (severity === 'info') return `${inputPath} is empty. This is valid, but check that the missing value is intentional.`;
+  return `${inputPath} is empty. This may fail or do nothing at runtime.`;
 }
 
 function buildLoadedConversationsById(conversationAssets: ConversationAssetType[]): Map<string, ConversationAssetType> {

From 68b20eacc52475bf0f7f6893cda412c4238bc150 Mon Sep 17 00:00:00 2001
From: Richard Griffiths <cwolfs@gmail.com>
Date: Sun, 3 May 2026 00:33:56 +0200
Subject: [PATCH 29/29] Fixed

---
 .../ConversationDiagnosticsModal.tsx          |  8 ++-
 .../conversation-diagnostics-utils.test.ts    | 68 ++++++++++++++++++
 .../utils/conversation-diagnostics-utils.ts   | 71 +++++++++++++++++++
 3 files changed, 145 insertions(+), 2 deletions(-)

diff --git a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
index 42cbfd8..a13d9ef 100644
--- a/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
+++ b/app/src/components/ConversationDiagnosticsModal/ConversationDiagnosticsModal.tsx
@@ -143,7 +143,7 @@ function ConversationDiagnosticsContent({ globalModalId, variant = 'modal' }: Pr
       ...diagnostics.flatMap((diagnostic, index) => [
         `${index + 1}. [${getSeverityLabel(diagnostic.severity)}] ${diagnostic.title}`,
         `   Area: ${getCategoryLabel(diagnostic.category)}`,
-        `   Node: ${diagnostic.nodeLabel}`,
+        `   ${getDiagnosticSubjectLabel(diagnostic)}: ${diagnostic.nodeLabel}`,
         `   Detail: ${diagnostic.description}`,
         '',
       ]),
@@ -297,7 +297,7 @@ function ConversationDiagnosticsContent({ globalModalId, variant = 'modal' }: Pr
                       <aside className="conversation-diagnostics__item-details">
                         <MetaRow label="Severity" value={getSeverityLabel(diagnostic.severity)} />
                         <MetaRow label="Area" value={getCategoryLabel(diagnostic.category)} />
-                        <MetaRow label="Node" value={diagnostic.nodeLabel} />
+                        <MetaRow label={getDiagnosticSubjectLabel(diagnostic)} value={diagnostic.nodeLabel} />
                         <Button
                           className="conversation-diagnostics__jump-button"
                           type="link"
@@ -334,6 +334,10 @@ function getSummaryCountsText(errorCount: number, warningCount: number, infoCoun
   return `${errorText}, ${warningText}, and ${infoText}`;
 }
 
+function getDiagnosticSubjectLabel(diagnostic: ConversationDiagnostic): string {
+  return diagnostic.nodeId == null ? 'Conversation' : 'Node';
+}
+
 function MetaRow({ label, value }: { label: string; value: string }) {
   return (
     <div className="conversation-diagnostics__meta-row">
diff --git a/app/src/utils/__tests__/conversation-diagnostics-utils.test.ts b/app/src/utils/__tests__/conversation-diagnostics-utils.test.ts
index 3612126..f87ac4a 100644
--- a/app/src/utils/__tests__/conversation-diagnostics-utils.test.ts
+++ b/app/src/utils/__tests__/conversation-diagnostics-utils.test.ts
@@ -147,6 +147,74 @@ describe('conversation diagnostics', () => {
     );
   });
 
+  it('reports duplicate node ids in the active conversation', () => {
+    const conversationAsset = makeBasicConversation();
+    const prompt = conversationAsset.conversation.nodes[0];
+    const response = createResponseNode();
+    response.idRef.id = prompt.idRef.id;
+    response.responseText = 'Duplicate id response.';
+    prompt.branches = [response];
+
+    const diagnostics = buildConversationDiagnostics({ conversationAsset, operationDefinitions: [] });
+
+    expect(diagnostics).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          severity: 'warning',
+          title: 'Duplicate node id',
+          description: expect.stringContaining('sideload entry points'),
+          nodeId: getId(response),
+        }),
+      ]),
+    );
+  });
+
+  it('reports when the active conversation id is duplicated by another loaded conversation', () => {
+    const conversationAsset = makeBasicConversation();
+    conversationAsset.conversation.idRef.id = 'conversation_target';
+    const duplicateConversationAsset = createConversation('K:/Mods/Test/other-conversations');
+    duplicateConversationAsset.conversation.uiName = 'Duplicate Conversation';
+    duplicateConversationAsset.conversation.idRef.id = 'other-prefix:conversation_target';
+
+    const diagnostics = buildConversationDiagnostics({
+      conversationAsset,
+      operationDefinitions: [],
+      loadedConversationAssets: [duplicateConversationAsset],
+    });
+
+    expect(diagnostics).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          severity: 'warning',
+          title: 'Duplicate conversation id',
+          description: expect.stringContaining("Duplicate Conversation', uses matching id 'other-prefix:conversation_target'"),
+          nodeId: null,
+        }),
+      ]),
+    );
+  });
+
+  it('does not report the saved copy of the active conversation as a duplicate conversation id', () => {
+    const conversationAsset = makeBasicConversation();
+    conversationAsset.conversation.idRef.id = 'conversation_target';
+    const savedActiveConversationAsset = structuredClone(conversationAsset);
+
+    const diagnostics = buildConversationDiagnostics({
+      conversationAsset,
+      operationDefinitions: [],
+      loadedConversationAssets: [savedActiveConversationAsset],
+    });
+
+    expect(diagnostics).not.toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          severity: 'warning',
+          title: 'Duplicate conversation id',
+        }),
+      ]),
+    );
+  });
+
   it('does not treat operation definition values as strict validation rules', () => {
     const conversationAsset = makeBasicConversation();
     const prompt = conversationAsset.conversation.nodes[0];
diff --git a/app/src/utils/conversation-diagnostics-utils.ts b/app/src/utils/conversation-diagnostics-utils.ts
index 6b0bfc1..41f97b2 100644
--- a/app/src/utils/conversation-diagnostics-utils.ts
+++ b/app/src/utils/conversation-diagnostics-utils.ts
@@ -40,6 +40,7 @@ export function buildConversationDiagnostics(options: ConversationDiagnosticsOpt
   const promptNodesByRuntimeIndex = buildPromptNodeRuntimeIndexMap(conversationAsset.conversation.nodes, diagnostics);
   const loadedConversationsById = buildLoadedConversationsById([conversationAsset, ...loadedConversationAssets]);
 
+  scanActiveConversationIdDuplicates(conversationAsset, loadedConversationAssets, diagnostics);
   scanConversationShape(conversationAsset, diagnostics, promptNodesByRuntimeIndex);
   scanReachability(conversationAsset, diagnostics, promptNodesByRuntimeIndex);
   scanOperations(conversationAsset, diagnostics, operationDefinitionsByName, loadedConversationsById);
@@ -92,6 +93,8 @@ function scanConversationShape(
 ): void {
   const { roots, nodes } = conversationAsset.conversation;
 
+  scanDuplicateNodeIds(conversationAsset, diagnostics);
+
   if (roots.length <= 0) {
     diagnostics.push(
       createDiagnostic({
@@ -131,6 +134,44 @@ function scanConversationShape(
   });
 }
 
+function scanDuplicateNodeIds(conversationAsset: ConversationAssetType, diagnostics: ConversationDiagnostic[]): void {
+  const nodeContextsById = new Map<string, NodeContext>();
+
+  const scanNodeId = (node: ElementNodeType | PromptNodeType, context: NodeContext): void => {
+    const nodeId = getId(node);
+    if (nodeId === '' || nodeId === '-1') return;
+
+    const existingContext = nodeContextsById.get(nodeId);
+    if (existingContext != null) {
+      diagnostics.push(
+        createDiagnostic({
+          severity: 'warning',
+          category: 'reference',
+          title: 'Duplicate node id',
+          description: `${context.nodeLabel} shares node id '${nodeId}' with ${existingContext.nodeLabel}. Node-id based references, including sideload entry points, may resolve unpredictably.`,
+          context,
+        }),
+      );
+      return;
+    }
+
+    nodeContextsById.set(nodeId, context);
+  };
+
+  conversationAsset.conversation.roots.forEach((root, index) => {
+    scanNodeId(root, getElementNodeContext(root, `Root ${index + 1}`));
+  });
+
+  conversationAsset.conversation.nodes.forEach((node) => {
+    const promptContext = getPromptNodeContext(node);
+    scanNodeId(node, promptContext);
+
+    node.branches.forEach((response, index) => {
+      scanNodeId(response, getElementNodeContext(response, `Response ${index + 1} from ${promptContext.nodeLabel}`));
+    });
+  });
+}
+
 function isEmptyPromptLikelyInert(node: PromptNodeType): boolean {
   return node.branches.length <= 0 && (node.actions?.ops?.length ?? 0) <= 0;
 }
@@ -501,6 +542,36 @@ function buildLoadedConversationsById(conversationAssets: ConversationAssetType[
   return conversationsById;
 }
 
+function scanActiveConversationIdDuplicates(
+  conversationAsset: ConversationAssetType,
+  loadedConversationAssets: ConversationAssetType[],
+  diagnostics: ConversationDiagnostic[],
+): void {
+  const rawId = conversationAsset.conversation.idRef.id;
+  const comparableId = getComparableId(rawId);
+  const duplicateConversation = loadedConversationAssets.find((loadedConversationAsset) => {
+    if (loadedConversationAsset === conversationAsset) return false;
+    if (loadedConversationAsset.filepath === conversationAsset.filepath) return false;
+
+    const loadedRawId = loadedConversationAsset.conversation.idRef.id;
+    return loadedRawId === rawId || getComparableId(loadedRawId) === comparableId;
+  });
+
+  if (duplicateConversation == null) return;
+
+  const duplicateRawId = duplicateConversation.conversation.idRef.id;
+  const duplicateName = duplicateConversation.conversation.uiName || duplicateRawId;
+  diagnostics.push(
+    createDiagnostic({
+      severity: 'warning',
+      category: 'reference',
+      title: 'Duplicate conversation id',
+      description: `Another loaded conversation, '${duplicateName}', uses matching id '${duplicateRawId}'. The active conversation id is '${rawId}', so conversation-id based references may resolve to the wrong conversation until the duplicate id is fixed.`,
+      context: getConversationContext(conversationAsset),
+    }),
+  );
+}
+
 function getComparableId(id: string): string {
   return id.split(':')[1] || id;
 }