Add overlay and disable inputs while copilot is streaming, fix number… (#1243)

* Add overlay and disable inputs while copilot is streaming, fix numbering on ship modal, add blur to modal overlay

* Add missed component

* Set is streaming to false when copilot unmounts

* Polish:

* Remove unused import

* Fix bug with code diff viewer

Author: sarah-inkeep

agents-manage-ui/src/app/[tenantId]/projects/[projectId]/agents/[agentId]/page.client.tsx

@@ -28,6 +28,7 @@ import {
   teamAgentNodeTargetHandleId,
 } from '@/components/agent/configuration/node-types';
 import { useCopilotContext } from '@/components/agent/copilot/copilot-context';
+import { CopilotStreamingOverlay } from '@/components/agent/copilot-streaming-overlay';
 import { EmptyState } from '@/components/agent/empty-state';
 import { AgentErrorSummary } from '@/components/agent/error-display/agent-error-summary';
 import { DefaultMarker } from '@/components/agent/markers/default-marker';
@@ -116,7 +117,11 @@ export const Agent: FC<AgentProps> = ({
   credentialLookup = {},
 }) => {
   const [showPlayground, setShowPlayground] = useState(false);
-  const { isOpen: isCopilotChatOpen, isCopilotConfigured } = useCopilotContext();
+  const {
+    isOpen: isCopilotChatOpen,
+    isCopilotConfigured,
+    isStreaming: isCopilotStreaming,
+  } = useCopilotContext();
 
   const router = useRouter();
 
@@ -1034,6 +1039,7 @@ export const Agent: FC<AgentProps> = ({
         defaultSize={100}
         className="relative"
       >
+        {isCopilotStreaming && <CopilotStreamingOverlay />}
         <DefaultMarker />
         <SelectedMarker />
         <ReactFlow
@@ -1069,6 +1075,7 @@ export const Agent: FC<AgentProps> = ({
               <NodeLibrary />
             </Panel>
           )}
+
           {showEmptyState && (
             <Panel position="top-center" className="top-1/2! translate-y-[-50%]">
               <EmptyState onAddInitialNode={onAddInitialNode} />
@@ -1132,6 +1139,7 @@ export const Agent: FC<AgentProps> = ({
                 subAgentExternalAgentConfigLookup={subAgentExternalAgentConfigLookup}
                 subAgentTeamAgentConfigLookup={subAgentTeamAgentConfigLookup}
                 credentialLookup={credentialLookup}
+                disabled={isCopilotStreaming}
               />
             </ResizablePanel>
           </>

agents-manage-ui/src/components/agent/copilot-streaming-overlay.tsx

@@ -0,0 +1,20 @@
+import { Panel } from '@xyflow/react';
+import { Loader2 } from 'lucide-react';
+import { LoadingIndicator } from './copilot/message-parts/loading';
+
+export const CopilotStreamingOverlay = () => {
+  return (
+    <>
+      <div className="w-full h-full bg-background/50 absolute top-0 left-0 z-1" />
+      <Panel position="top-center" className="z-10">
+        <div className="flex items-center gap-2 bg-background dark:bg-sidebar px-4 py-2 rounded-lg shadow-[0_2px_20px_rgba(0,0,0,0.08)] dark:shadow-none z-10">
+          <Loader2 className="w-4 h-4 animate-spin text-primary" />
+          <LoadingIndicator
+            messages={['Thinking', 'Reviewing agent', 'Preparing changes']}
+            variant="tailwind"
+          />
+        </div>
+      </Panel>
+    </>
+  );
+};

agents-manage-ui/src/components/agent/copilot/components/code-diff.tsx

@@ -3,7 +3,7 @@
 import type * as Monaco from 'monaco-editor';
 import { useTheme } from 'next-themes';
 import type { ComponentPropsWithoutRef, FC } from 'react';
-import { useEffect, useRef } from 'react';
+import { useEffect, useId, useRef } from 'react';
 import { MonacoEditor } from '@/components/editors/monaco-editor';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useMonacoActions, useMonacoStore } from '@/features/agent/state/use-monaco-store';
@@ -23,13 +23,16 @@ interface CodeDiffProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'
 export const CodeDiff: FC<CodeDiffProps> = ({
   originalValue,
   newValue,
-  originalUri = 'code-original.txt',
-  modifiedUri = 'code-modified.txt',
+  originalUri: originalUriProp,
+  modifiedUri: modifiedUriProp,
   className,
   editorOptions = {},
   onMount,
   ...props
 }) => {
+  const instanceId = useId();
+  const originalUri = originalUriProp ?? `code-original-${instanceId}.txt`;
+  const modifiedUri = modifiedUriProp ?? `code-modified-${instanceId}.txt`;
   // If there's no original value, show a regular editor instead of a diff
   const hasOriginalValue = originalValue && originalValue.trim() !== '';
 
@@ -168,7 +171,6 @@ export const CodeDiff: FC<CodeDiffProps> = ({
   }, [monaco, hasOriginalValue]);
 
   if (!hasOriginalValue) {
-    modifiedUri ??= `new-code.json`;
     return (
       <MonacoEditor value={newValue} uri={modifiedUri} readOnly className={className} {...props} />
     );

agents-manage-ui/src/components/agent/copilot/copilot-chat.tsx

@@ -52,6 +52,10 @@ export function CopilotChat({ agentId, tenantId, projectId, refreshAgentGraph }:
     },
   });
 
+  useEffect(() => {
+    return () => setIsStreaming(false);
+  }, [setIsStreaming]);
+
   useEffect(() => {
     const updateAgentGraph = (event: any) => {
       // we need to check if the conversationId is the same as the one in the event because this event is also triggered by the 'try now' chat.

agents-manage-ui/src/components/agent/copilot/message-parts/loading.tsx

@@ -20,8 +20,10 @@ export const LoadingDots = () => {
 
 export function LoadingIndicator({
   messages = ['Thinking', 'Looking for content', 'Analyzing'],
+  variant = 'inkeep',
 }: {
   messages?: string[];
+  variant?: 'inkeep' | 'tailwind';
 }) {
   const [messageIndex, setMessageIndex] = useState(0);
 
@@ -38,12 +40,17 @@ export function LoadingIndicator({
     return () => clearInterval(interval);
   }, [messages.length]);
 
+  const shimmerClass =
+    variant === 'inkeep'
+      ? 'bg-[linear-gradient(to_bottom_right,_var(--ikp-color-gray-700),_var(--ikp-color-gray-400))] dark:bg-[linear-gradient(to_bottom_right,_var(--ikp-color-gray-dark-300),_var(--ikp-color-gray-dark-100))]'
+      : 'bg-[linear-gradient(to_bottom_right,_#374151,_#9ca3af)] dark:bg-[linear-gradient(to_bottom_right,_#d1d5db,_#f3f4f6)]';
+
   return (
     <div
       className="flex items-center space-x-2 font-medium text-sm text-gray-700 dark:text-gray-dark-300"
       aria-live="polite"
     >
-      <span className="animate-shimmer bg-[linear-gradient(to_bottom_right,_var(--ikp-color-gray-700),_var(--ikp-color-gray-400))] dark:bg-[linear-gradient(to_bottom_right,_var(--ikp-color-gray-dark-300),_var(--ikp-color-gray-dark-100))] bg-clip-text text-transparent">
+      <span className={`animate-shimmer ${shimmerClass} bg-clip-text text-transparent`}>
         {messages[messageIndex]}
       </span>
       <div className="flex space-x-1">

agents-manage-ui/src/components/agent/ship/mcp-guide/snippets/cursor.ts

@@ -1,8 +1,6 @@
 export const cursorTemplate = `
 1. Open [Cursor](https://cursor.com/docs/context/mcp). Create a \`.cursor\` directory in your project root if there isn't one already.
-
 2. Create or open the \`mcp.json\` file in the \`.cursor\` directory.
-
 3. Add the following configuration:
 \`\`\`bash
 {
@@ -17,11 +15,7 @@ export const cursorTemplate = `
   }
 }
 \`\`\`
-
 4. Save the configuration file. You may need to restart Cursor to see the changes.
-
 5. You can also add the configuration globally by opening the command palette (\`Cmd/Ctrl + Shift + P\`) and selecting **Cursor Settings > MCP > Add new global MCP server**.
-
 6. You can verify the connection by opening the composer (\`Cmd + I\`) in **agent mode** and asking a question.
-
 `;

agents-manage-ui/src/components/agent/ship/mcp-guide/snippets/vscode.ts

@@ -1,11 +1,7 @@
 export const vscodeTemplate = `
-
 1. Open [Visual Studio Code](https://code.visualstudio.com/docs/copilot/customization/mcp-servers). Create a \`.vscode\` directory in your project root if there isn't one already.
-
 2. Create or open the \`mcp.json\` file in the \`.vscode\` directory.
-
 3. Add the following configuration:
-
 \`\`\`bash
 {
   "servers": {
@@ -19,9 +15,6 @@ export const vscodeTemplate = `
   }
 }
 \`\`\`
-
 4. Save the configuration file. You may need to restart VS Code to see the changes.
-
 5. You can verify the connection by opening the composer (\`Ctrl + Alt + I\`) in **agent mode** and asking a question.
-
 `;

agents-manage-ui/src/components/agent/ship/mcp-guide/snippets/windsurf.ts

@@ -1,11 +1,7 @@
 export const windsurfTemplate = `
-
 1. Open [Windsurf](https://docs.windsurf.com/windsurf/cascade/mcp). Create a \`.windsurf\` directory in your project root if there isn't one already.
-
 2. Create or open the \`mcp_config.json\` file in the \`.windsurf\` directory.
-
 3. Add the following configuration:
-
 \`\`\`bash
 {
   "mcpServers": {
@@ -18,8 +14,6 @@ export const windsurfTemplate = `
   }
 }
 \`\`\`
-
 4. Save the configuration file. You may need to restart Windsurf to see the changes.
-
 5. You can verify the connection by opening the composer (\`Cmd/Ctrl + L\`) in **code mode** and asking a question.
 `;

agents-manage-ui/src/components/agent/sidepane/sidepane.tsx

@@ -48,6 +48,7 @@ interface SidePaneProps {
   subAgentExternalAgentConfigLookup: SubAgentExternalAgentConfigLookup;
   subAgentTeamAgentConfigLookup: SubAgentTeamAgentConfigLookup;
   credentialLookup: Record<string, Credential>;
+  disabled?: boolean;
 }
 
 export function SidePane({
@@ -61,6 +62,7 @@ export function SidePane({
   subAgentExternalAgentConfigLookup,
   subAgentTeamAgentConfigLookup,
   credentialLookup,
+  disabled = false,
 }: SidePaneProps) {
   const selectedNode = useNodesData(selectedNodeId || '');
   const edges = useEdges();
@@ -206,7 +208,11 @@ export function SidePane({
         </div>
         <SidePaneLayout.CloseButton onClick={onClose} />
       </SidePaneLayout.Header>
-      <SidePaneLayout.Content>{editorContent}</SidePaneLayout.Content>
+      <SidePaneLayout.Content>
+        <fieldset disabled={disabled} className="contents">
+          {editorContent}
+        </fieldset>
+      </SidePaneLayout.Content>
     </SidePaneLayout.Root>
   );
 }

agents-manage-ui/src/components/form/expandable-field.tsx

@@ -78,7 +78,10 @@ export function ExpandableField({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <div className="space-y-2">{content}</div>
 
-      <DialogContent className="!max-w-none h-screen w-screen max-h-screen p-0 gap-0 border-0 rounded-none">
+      <DialogContent
+        size="fullscreen"
+        className="!max-w-none h-screen w-screen max-h-screen p-0 gap-0 border-0 rounded-none"
+      >
         <DialogTitle className="sr-only">{label}</DialogTitle>
         <DialogDescription className="sr-only">{`${label} Editor`}</DialogDescription>
         <div className="flex flex-col w-full px-8 pb-8 pt-12 mx-auto max-w-7xl min-w-0 gap-2">