feat(devops-copilot): add copilot configuration panel #2156

killiancolla · 2025-11-21T15:45:38Z

What does this PR do?

This PR integrates the Copilot configuration panel with the following features:

New tab in the admin configuration panel (protected by feature flag)
Ability to accept Copilot terms of use
Option to enable/disable Copilot
Toggle between read-only and read-write modes in configuration settings
Organization-wide list of recurring tasks with pause/resume and delete capabilities
Per-thread read-write mode switching (when enabled in config)
Disabled state for fields when Copilot is not activated

PR Checklist

This PR introduces breaking change(s) and has been labeled as such
This PR introduces new store changes
I made sure the code is type safe (no any)

RemiBonnet · 2025-11-21T15:45:40Z

Qovery can create a Preview Environment for this PR.
To trigger its creation, please post a comment with one of the following command.

Command	Blueprint environment
/qovery preview cc1de7de-94e5-40f8-8e45-bc8986d9dfec	storybook
/qovery preview 28c47145-c8e7-4b9d-8d9e-c65c95b48425	staging
/qovery preview {all\|UUID1,UUID2,...}	To preview multiple environments

This comment has been generated from Qovery AI 🤖.
Below, a word from its wisdom :

Write comments that add new information that doesn’t exist in the code

codecov · 2025-11-21T15:53:42Z

Codecov Report

❌ Patch coverage is 63.68564% with 134 lines in your changes missing coverage. Please review.
✅ Project coverage is 48.04%. Comparing base (6f95072) to head (e053144).

Files with missing lines	Patch %	Lines
...s/use-message-submission/use-message-submission.ts	52.45%	29 Missing ⚠️
.../lib/devops-copilot-panel/devops-copilot-panel.tsx	0.00%	25 Missing ⚠️
...ai-copilot-config/use-update-ai-copilot-config.tsx	11.76%	15 Missing ⚠️
...rc/lib/ai-copilot-settings/ai-copilot-settings.tsx	54.54%	8 Missing and 2 partials ⚠️
...ure/src/lib/devops-copilot-panel/submit-message.ts	33.33%	7 Missing and 3 partials ⚠️
...ot/feature/src/lib/mermaid-chart/mermaid-chart.tsx	0.00%	9 Missing ⚠️
...configuration/section-ai-copilot-configuration.tsx	72.72%	5 Missing and 1 partial ⚠️
.../devops-render-markdown/devops-render-markdown.tsx	0.00%	4 Missing ⚠️
...ring-task/use-delete-ai-copilot-recurring-task.tsx	33.33%	4 Missing ⚠️
...ring-task/use-toggle-ai-copilot-recurring-task.tsx	33.33%	4 Missing ⚠️
... and 10 more

Additional details and impacted files

@@             Coverage Diff             @@
##           staging    #2156      +/-   ##
===========================================
- Coverage    48.68%   48.04%   -0.64%     
===========================================
  Files         1161     1204      +43     
  Lines        20226    21235    +1009     
  Branches      6000     6235     +235     
===========================================
+ Hits          9847    10203     +356     
- Misses        8489     9122     +633     
- Partials      1890     1910      +20

Flag	Coverage Δ
unittests	`48.04% <63.68%> (-0.64%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

killiancolla · 2025-11-21T15:56:00Z

/qovery preview all

RemiBonnet · 2025-11-21T15:56:04Z

Preview environments were automatically created via Qovery.
Click on the links below to follow their deployments and use them.
👉 [PR] storybook - feat(devops-copilot): add copilot configuration panel - 2025-11-21T15:56:03Z
👉 [PR] staging - feat(devops-copilot): add copilot configuration panel - 2025-11-21T15:56:03Z

Another comment will be posted when deployments are finished

RemiBonnet · 2025-11-21T15:58:44Z

Your preview environment failed to be deployed !
Click on the link below to check the deployment logs.
👉 [PR] storybook - feat(devops-copilot): add copilot configuration panel - 2025-11-21T15:56:03Z

RemiBonnet · 2025-11-21T16:03:13Z

Your preview environment has been successfully deployed !
Click on the link below to open your service:
👉 console

…settings

- Add read/write mode toggle in conversation header (locked after first message) - Add warning callout when read-write mode is enabled - Add delete recurring task functionality with confirmation - Pass readOnly to thread creation

RemiBonnet

Thanks @killiancolla 🙏

Here are my comments on the PR.
Next time, could you please add a short explanation of how and where we can test it? Since we don’t have the full context of your task, this information is necessary to review it properly

Also, please be careful with AI-generated code. You are responsible for any code you include, so make sure to test it and verify its performance. That part is not the reviewers’ job

You can check the codebase documentation in .cursor or in AGENT.md, and I’m happy to jump on a call if you need a clearer explanation of the codebase

The devops-copilot-panelcomponent is too large and contains too many lines. We need to refactor it and split it into smaller parts
You need to add some unit tests to cover your code
The loader is too big and not consistent with what we use elsewhere in the codebase. Please take inspiration from other settings pages. Also, the loading time is quite long, can we optimise it?

The design isn't correct and ISO with other element, could you validate it with a designer? (cc: @TheoGrandin74 )
- We don't have this color in the code base for "disable" btn
- We should probably use BlockContent instead of a custom block to stay consistent with other settings pages
- The Read-Write mode should be a Callout component this one is custom

RemiBonnet · 2025-11-26T12:24:42Z

libs/shared/devops-copilot/data-access/src/lib/domains-devops-copilot-data-access.ts

+    },
+  }),
+  recurringTasks: ({ organizationId }: { organizationId: string }) => ({
+    queryKey: [organizationId, 'recurring-tasks'],


Suggested change

queryKey: [organizationId, 'recurring-tasks'],

queryKey: [organizationId],

It is not necessary to add recurring-tasks it's already add by default

RemiBonnet · 2025-11-26T12:25:49Z

libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/devops-copilot-panel.tsx

+                  {isFeatureFlagPanel && !isCopilotEnabled && (
+                    <>
+                      <br></br>
+                      <br></br>


The margins should be done with CSS not br

libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/devops-copilot-panel.tsx

RemiBonnet · 2025-11-26T12:29:00Z

libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/submit-message.ts

      throw new Error('Organization ID is required but not provided in context')
    }

    // First, create a new thread


Remove this useless comment please 🙏
Try do keep only necessary comment when it's generate by IA !

RemiBonnet · 2025-11-26T12:30:20Z

...pages/settings/src/lib/ui/page-organization-ai-copilot/page-organization-ai-copilot.spec.tsx

@@ -0,0 +1,13 @@
+import { render } from '__tests__/utils/setup-jest'


This one is deprecated you need to use import { renderWithProviders } from '@qovery/shared/util-tests'

RemiBonnet · 2025-11-26T13:18:54Z

...b/feature/page-organization-ai-copilot-feature/page-organization-ai-copilot-feature.spec.tsx

@@ -0,0 +1,9 @@
+import { render } from '__tests__/utils/setup-jest'


This one is deprecated

Suggested change

import { render } from '__tests__/utils/setup-jest'

import { renderWithProviders } from '@qovery/shared/util-tests'

RemiBonnet · 2025-11-26T13:20:38Z

libs/pages/settings/src/lib/ui/page-organization-ai-copilot/page-organization-ai-copilot.tsx

+  last_error?: string
+}
+
+export function PageOrganizationAICopilot(props: PageOrganizationAICopilotProps) {


All this page should be renamed and inside the copilot library like AICopilotSettings

@killiancolla It’s not exactly what I expected, the whole setting page can be inside your domain and you can renamed it something like AICopilotSettings, with the section inside if you prefer.
Let me know if anything is unclear! 🙏

RemiBonnet · 2025-11-26T13:35:17Z

libs/pages/settings/src/lib/ui/page-organization-ai-copilot/page-organization-ai-copilot.tsx

+
+      queryClient.setQueryData(
+        devopsCopilot.config({ organizationId: organization?.id ?? '' }).queryKey,
+        (old: any) => ({


You can't use any

RemiBonnet · 2025-11-26T13:35:35Z

libs/pages/settings/src/lib/ui/page-organization-ai-copilot/page-organization-ai-copilot.tsx

+          {isEnabled && (
+            <div className="space-y-4 rounded border border-neutral-250 bg-neutral-100 p-6">
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-neutral-400">Access Mode</label>


This one should be a Heading ?

RemiBonnet · 2025-11-26T13:36:21Z

libs/pages/settings/src/lib/ui/page-organization-ai-copilot/page-organization-ai-copilot.tsx

+                      <div>
+                        <p className="mb-1 font-medium text-neutral-400">1. Data Collection and Usage</p>
+                        <p>
+                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut


Could you add real text? We can't merge lorem ipsum in production

killiancolla · 2025-11-26T14:55:55Z

Thanks @RemiBonnet for the detailed feedback 🙏
Sorry for the extra work this caused, I'll fix these things to have a cleaner code base on my side

…gn feedback - separate sections with dedicated BlockContent and Section components - reduce LoaderSpinner size - replace custom information section with Callout "sky" component - add confirmation modals for "Disable" and "Delete" task actions - update "Disable" button styling (color change, icon removal) - replace "Pause"/"Resume" and status badge with InputToggle component - replace "Delete" button with icon button and update color - align tasks list styling with codebase patterns

…onment variable

…ality - Split PageOrganizationAICopilot into smaller components (OptIn, Configuration, ScheduledTasks) - Replace deprecated test import - Replace <br> tags with CSS margin classes - Use Link component and URL constants

- Add useRecurringTasks and useConfig hook - Remove useless comments, condition and parameters

- Rename feature flag variable: isFeatureFlagPanel -> isDevopsCopilotPanelFeatureFlag - Extract mutations into custom hooks (useToggleRecurringTask, useDeleteRecurringTask, useUpdateOrgConfig) - Use react-hook-form for T&C acceptance - Use Icon component with iconName prop instead of name prop - Remove width and height props from Icon components

killiancolla · 2025-12-05T12:15:05Z

Hey @RemiBonnet,

I've addressed your comments, here's the changes I've made:

Refactoring

Split PageOrganizationAICopilot into smaller components (OptIn, Configuration, ScheduledTasks)
Extracted all queries and mutations into custom hooks (useRecurringTasks, useConfig, useToggleRecurringTask, useDeleteRecurringTask, useUpdateOrgConfig)
Renamed feature flag variable to isDevopsCopilotPanelFeatureFlag to avoid conflicts
Removed all 'any' types with proper typing from the API
Extracted devops-copilot-panel into smaller components (Header, Input, AssistantMessage, StreamingMessage, StreamingMermaidRenderer)
Created devops-copilot-panel.types.ts for centralized type definitions

UI/UX improvements

Reduced loader size
Replaced custom blocks with BlockContent components
Replaced custom information section with Callout "sky" component
Updated design after validation with Théo (button colors, spacing, layout)
Added confirmation modals for "Disable" and "Delete" task actions
Replaced Icon 'name' prop with 'iconName'
Removed width/height props from Icon components

Code quality

Replaced all <br> tags with CSS margin classes
Used Link component with URL constants (SETTINGS_AI_COPILOT_URL)
Implemented react-hook-form for T&C acceptance
Replaced deprecated test imports with renderWithProviders
Removed all unnecessary comments
Removed unnecessary conditions and parameters
Updated Terms & Conditions with real content
Added an environment variable for the Copilot backend URL

Testing

Added unit tests for hooks, components and utilities

You can test it all by navigating to the configuration panel for the Qovery Realm organization here. Don’t hesitate to tell me if you have some feedback or question!

RemiBonnet · 2025-12-08T08:47:00Z

libs/pages/settings/src/lib/ui/page-organization-ai-copilot/page-organization-ai-copilot.tsx

+  last_error?: string
+}
+
+export function PageOrganizationAICopilot(props: PageOrganizationAICopilotProps) {


@killiancolla It’s not exactly what I expected, the whole setting page can be inside your domain and you can renamed it something like AICopilotSettings, with the section inside if you prefer.
Let me know if anything is unclear! 🙏

…library

RemiBonnet

Well done, it's much better than before, I added a few comments, and it should be nice now!

RemiBonnet · 2025-12-08T16:05:28Z

...feature/src/lib/hooks/use-ai-copilot-recurring-tasks/use-ai-copilot-recurring-tasks.spec.tsx

+import { renderHook } from '@qovery/shared/util-tests'
+import { useAICopilotRecurringTasks } from './use-ai-copilot-recurring-tasks'
+
+jest.mock('@tanstack/react-query', () => ({


The tests with react-query for hooks aren't necessary, you can remove it (for other hook as well)

RemiBonnet · 2025-12-08T16:06:35Z

libs/shared/devops-copilot/feature/src/lib/hooks/use-thread-state/use-thread-state.ts

 import { useAuth0 } from '@auth0/auth0-react'
 import { useEffect, useState } from 'react'
-import { type Thread } from '../../devops-copilot-panel/devops-copilot-panel'
+import { type Thread } from '../../devops-copilot-panel/devops-copilot-panel.types'


RemiBonnet · 2025-12-08T16:07:20Z

libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/index.ts

@@ -0,0 +1,8 @@
+export { DevopsCopilotPanel } from './devops-copilot-panel'


Theses export aren't really necessary here, could you export directly from the files ?

RemiBonnet · 2025-12-08T16:08:14Z

libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/ai-copilot-settings.tsx

+import SectionScheduledTasks from './section-scheduled-tasks/section-scheduled-tasks'
+
+export interface AICopilotSettingsProps {
+  organization?: Organization


should be required no?

… DevopsCopilotContext type to CopilotContextData to avoid naming conflict with React Context

…tSettings

RemiBonnet

LGTM 👍

RemiBonnet · 2025-12-09T11:09:27Z

...ilot/feature/src/lib/hooks/use-ai-copilot-recurring-tasks/use-ai-copilot-recurring-tasks.tsx

+export function useAICopilotRecurringTasks({ organizationId }: UseAICopilotRecurringTasksProps) {
+  return useQuery({
+    ...devopsCopilot.recurringTasks({ organizationId }),
+    enabled: !!organizationId,


Suggested change

enabled: !!organizationId,

Useless if organizationId is required

libs/shared/devops-copilot/feature/src/lib/ai-copilot-settings/ai-copilot-settings.tsx

...ib/ai-copilot-settings/section-ai-copilot-configuration/section-ai-copilot-configuration.tsx

...ilot/feature/src/lib/ai-copilot-settings/section-scheduled-tasks/section-scheduled-tasks.tsx

.../devops-copilot/feature/src/lib/devops-copilot-panel/assistant-message/assistant-message.tsx

...feature/src/lib/devops-copilot-panel/hooks/use-message-submission/streaming-state-reducer.ts

.../devops-copilot/feature/src/lib/devops-copilot-panel/streaming-message/streaming-message.tsx

- Extract modal content - Replace mermaidRenderCache logic with useMemo - Memoize string processing logic

…rganizationId requests

libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/devops-copilot-panel.tsx

… bugs

killiancolla added 10 commits November 26, 2025 09:24

feat(QOV-1340): add Copilot configuration panel page in organization …

cfb7b90

…settings

test(devops-copilot): add unit tests for AI Copilot configuration page

cf793d9

logs delete

239e523

remove logs

4e027d8

fix condition

560ee7b

feat(devops-copilot): add useModalConfirmation componant for delete task

1a0a28c

feat(devops-copilot): add feature flag on the config panel

ae7678a

mermaid fix

1abd698

configuration message show condition

5458377

killiancolla force-pushed the feat/copilot-config branch from 0dd776b to 5458377 Compare November 26, 2025 10:06

format:write fix

e8c05f0

killiancolla marked this pull request as ready for review November 26, 2025 10:24

killiancolla requested review from RemiBonnet and rmnbrd November 26, 2025 10:25

RemiBonnet requested changes Nov 26, 2025

View reviewed changes

killiancolla added 7 commits November 26, 2025 16:36

fix(devops-copilot): use consistent loader and BlockContent components

1177df0

feat(devops-copilot): add NX_PUBLIC_DEVOPS_COPILOT_API_BASE_URL envir…

e167ec2

…onment variable

feat(devops-copilot): update Terms & Conditions

ece7e05

refactor(devops-copilot): extract custom hooks and remove comments

807ba9d

- Add useRecurringTasks and useConfig hook - Remove useless comments, condition and parameters

killiancolla added 2 commits December 4, 2025 16:45

test(devops-copilot): add coverage test

2b77c04

test(devops-copilot): add test coverage for components

0917b89

killiancolla requested a review from RemiBonnet December 5, 2025 12:14

RemiBonnet requested changes Dec 8, 2025

View reviewed changes

killiancolla added 2 commits December 8, 2025 14:25

refactor(devops-copilot): move AI Copilot settings to devops-copilot …

fb1618a

…library

fix(devops-copilot): fix lint error

3f943af

killiancolla requested a review from RemiBonnet December 8, 2025 14:16

RemiBonnet requested changes Dec 8, 2025

View reviewed changes

test(devops-copilot): remove react-query tests from hooks

1a966ee

kmk142789 approved these changes Dec 8, 2025

View reviewed changes

killiancolla added 3 commits December 9, 2025 09:42

refactor(devops-copilot): remove .types and index.ts files and rename…

29174c6

… DevopsCopilotContext type to CopilotContextData to avoid naming conflict with React Context

refactor(devops-copilot): make organization prop required in AICopilo…

f1d481c

…tSettings

test(devops-copilot): fix tests after making organization prop required

6f947b8

killiancolla requested a review from RemiBonnet December 9, 2025 09:34

RemiBonnet approved these changes Dec 9, 2025

View reviewed changes

RemiBonnet reviewed Dec 9, 2025

View reviewed changes

rmnbrd requested changes Dec 9, 2025

View reviewed changes

refactor(devops-copilot): improve component readability and memoization

73e4be7

- Extract modal content - Replace mermaidRenderCache logic with useMemo - Memoize string processing logic

killiancolla requested a review from rmnbrd December 10, 2025 12:48

killiancolla added 3 commits December 12, 2025 09:56

fix(devops-copilot): handle fragmented SSE chunks and prevent empty o…

cf772d2

…rganizationId requests

fix(devops-copilot): fix organizationid

803bc5f

fix(devops-copilot): fix lint error

e5e1363

rmnbrd requested changes Dec 12, 2025

View reviewed changes

libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/devops-copilot-panel.tsx Show resolved Hide resolved

refactor(devops-copilot): remove unused reducer

43caec0

killiancolla requested a review from rmnbrd December 16, 2025 09:54

killiancolla added 2 commits December 17, 2025 14:43

fix(devops-copilot): hide mermaid errors from users and fix rendering…

c4dc056

… bugs

fix(devops-copilot): added security for incomplete mermaid diagram

0a9e3c4

rmnbrd approved these changes Dec 18, 2025

View reviewed changes

Merge branch 'staging' into feat/copilot-config

e053144

	queryKey: [organizationId, 'recurring-tasks'],
	queryKey: [organizationId],

		@@ -0,0 +1,13 @@
		import { render } from '__tests__/utils/setup-jest'

		@@ -0,0 +1,9 @@
		import { render } from '__tests__/utils/setup-jest'

	import { render } from '__tests__/utils/setup-jest'
	import { renderWithProviders } from '@qovery/shared/util-tests'

		@@ -0,0 +1,8 @@
		export { DevopsCopilotPanel } from './devops-copilot-panel'

feat(devops-copilot): add copilot configuration panel #2156

Are you sure you want to change the base?

feat(devops-copilot): add copilot configuration panel #2156

Uh oh!

Conversation

killiancolla commented Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

PR Checklist

Uh oh!

RemiBonnet commented Nov 21, 2025

Uh oh!

codecov bot commented Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

killiancolla commented Nov 21, 2025

Uh oh!

RemiBonnet commented Nov 21, 2025

Uh oh!

RemiBonnet commented Nov 21, 2025

Uh oh!

RemiBonnet commented Nov 21, 2025

Uh oh!

RemiBonnet left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

killiancolla commented Nov 26, 2025

Uh oh!

killiancolla commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

RemiBonnet left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

RemiBonnet Dec 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

RemiBonnet Dec 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

RemiBonnet left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

killiancolla commented Nov 21, 2025 •

edited

Loading

codecov bot commented Nov 21, 2025 •

edited

Loading

RemiBonnet left a comment •

edited

Loading

killiancolla commented Dec 5, 2025 •

edited

Loading

RemiBonnet Dec 8, 2025 •

edited

Loading

RemiBonnet Dec 8, 2025 •

edited

Loading